var bg=30; //Background color

​

function setup() {

  w = windowWidth<windowHeight? windowWidth : windowHeight;

  createCanvas(w, w);

  angleMode(DEGREES);

  colorMode(HSB, 255); 

  radius=width/n;

  angleArr = [];

  colorArr = [];

  for(i=0;i<pow(n, 2);i++) {

    angleArr.push(0);

    colorArr.push(color(random(255), 360, 360));

  }

}

​

function draw() {

  background(bg);

  translate(radius/2, radius/2);

  for(y=0;y<height/radius;y++) {

    for(x=0;x<width/radius;x++) {

      push();

      translate(x*radius, y*radius);

      scale(pow(-1, x), pow(-1, y));

      rad = cos(2*frameCount-x*20-y*20)*radius/2+radius/2; //Oscillates between 0 and r

      rotate(angleArr[y*n+x]);

      yinYang(rad)

      pop();

      if((x+y)%2==0) {

        push();

        translate(radius/2+radius*x, radius/2+radius*y);

        rotate(90*x-frameCount);

        noStroke();

        fill(colorArr[y*n+x]);

        //fill(255);

        ellipse(10, 0, cos(frameCount-y*20+x*20)*10);

        pop();

      }

      angleArr[y*n+x] -= cos(2*frameCount+180-x*20-y*20)*10+12;

    }

  }

  resetMatrix();

  noStroke();

  fill(220, 200);

  textFont('Nunito', 30);

  textStyle(BOLD);

  text("@URBANOXYGEN_", 20, height-20);

}

​

function yinYang(r) {

  c = color(((x+y)*10+80)%360, 360, 360);

  noStroke();

  fill(bg);

  arc(0, 0, r, r, 180, 0);

  fill(c);

  arc(0, 0, r, r, 0, 180);

  fill(bg);

  ellipse(-r/4, 0, r/2);

  fill(c);

  ellipse(r/4, 0, r/2);

}