let textMessage = "press any key or move the mouse";

let color1 = 0;

let color2 = 0;

let color3 = 255;

let stripeWidth = 2;

​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER)

}

​

function draw() {

  background(220);

//greenstripe

  for (let x = stripeWidth; x < width; x += stripeWidth*4) {

    Stripe(x,0,255,0);

  }

//pinkorange + redstripe

  fill(255);

  for (let x = 75; x < 600; x += 150) {

    circle(x, mouseY, 125);

  }

  for (let x = 75; x < 600; x += 150) {

    circle(x, mouseY+300, 125);

  }

  for (let x = stripeWidth+2; x < width; x += stripeWidth*4) {

    Stripe(x,255,0,0);

  }

//alternatingcircle + alternatingstripe

  fill(255);

  for (let x = 75; x < 600; x += 150) {

    circle(x, mouseY-150, 125);

  }

  fill(255);

  for (let x = 75; x < 600; x += 150) {

    circle(x, mouseY+150, 125);

  }

  for (let x = stripeWidth+4; x < width; x += stripeWidth*4) {

    Stripe(x,color1,color2,color3);

  }

//text

  push()

  fill(255);

  rect(width/2, 525, 575, 50);

  fill(0);

  text(textMessage, 30, 530);

  pop()

}

​

function Stripe(x,r,g,b) {

  noStroke();

  fill(r,g,b);

  rect(x, 0, stripeWidth, height*2);

}

​

function keyPressed(){

  if (value === true){

    value = false

    color1 = 255

    color2 = 255

    color3 = 0

    textMessage = "you may not see it at first, but all the circles are the same color"

  }else{

    value = true

    color1 = 0

    color2 = 0

    color3 = 255

    textMessage = "watch as colors change and dots move"

  }

}