​

function setup() {

  createCanvas(280, 280);

}

​

function draw() {

  print(mouseX, mouseY);

  background(255);

​

  // line

  for (x = 5; x < width; x += 20) {

    for (y = 15; y < height; y += 20) {

      stroke(random(0), random(255), random(255), random(255)); //r, g, b, opacity

      line(x, y, x + 5, y + 5);

    }

  }

​

  for (x = 10; x < width; x += 20) {

    for (y = 25; y < height; y += 20) {

      stroke(random(0), random(255), random(255), random(255));

      line(x, y, x - 5, y - 5);

    }

  }

​

  for (x = 20; x < width; x += 20) {

    for (y = 35; y < height; y += 20) {

      stroke(random(0), random(255), random(255), random(255));

      line(x, y, x - 5, y - 5);

    }

  }

​

  // square in center

  //The push() function saves the current drawing style settings and transformations, while pop() restores these settings.

  // Jeff Thompsan Video

  push();

  translate(140, 140);

  angle += radians(1);

  rotate(angle);

  noStroke();

  rectMode(CENTER); // keeps square in the center

  fill(random(), random(255), random(255), random(255));

  rect(0, 0, 50);

  pop();

​

  // ring of squares rotating

  for (let a = 0; a < radians(360); a += radians(30)) {

    push();

    translate(140, 140);

    rotate(a); // rotate each by 30º

    translate(0, 80); // puts it around the center square

    rotate(-angle); // rotate the other way

    fill(random(0), random(255), random(255), random(255));

    rect(0, 0, 25);

    pop();

  }

​

  for (let a = 0; a < radians(360); a += radians(30)) {

    push();

    translate(140, 140);

    rotate(a);

    translate(0, 120);

    rotate(-angle);

    fill(random(0), random(255), random(255), random(255));

    rect(0, 0, 20);

    pop();

  }

}

​