let ypos = 0;

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  angleMode(DEGREES);

}

​

function draw() {

  background(222, 245, 166);

  noStroke();

  if (keyIsPressed === true) {

    fill(245, 241, 27);

    xpos = 100;

  } else {

    fill(125, 237, 55);

    xpos = 0;

  }

​

  translate(width / 2, height / 2); 

  for (let a = 0; a < 12; a++) {

    push();

    rotate(45 * a);

    circle(0 + xpos, 100, 30);

    translate(0, 20);

    for (let b = 0; b < 12; b++) {

      push();

      rotate(45 * b)

      fill(247, 164, 30 + xpos * 20);

      circle(0 + xpos, 100 + ypos, 10);

      pop();

    }

    pop();

  }

}

​

function keyPressed() {

  if (keyCode === 38) {

    ypos -= 10;

  } else if (keyCode === 40) {

    ypos += 10;

  } else if (keyCode === 37) {

    xpos += 10;

  } else if (keyCode === 39) {

    xpos -= 10;

  }

}