​

Q = calmness 

W = anger

E = joy

R = sadness

*/

​

​

​

let a = 0;

let b = 0;

let e = 0;

let shape = 0;

​

function setup() {

  createCanvas(500, 500);

  //rectMode(CENTER);

}

​

function draw() {

  background(0);

  noStroke();

​

  let from = color(255 - a, 139, 255 - b);

  let to = color(255, 237, 255);

​

  let colorA = lerpColor(from, to, 0.2);

  let colorB = lerpColor(from, to, 0.4);

  let colorC = lerpColor(from, to, 0.6);

  let colorD = lerpColor(from, to, 0.8);

​

  if (shape === 1) { //calmness /rect square / green blue

    push();

    //noLoop();

    //Q: if noLoop is active, every other key stopped working 

    for (let c = 0; c < 15; c++) {

      for (let d = 0; d < 15; d++) {

        fill(0, 200, random(255))

        rect(50 * c, 50 * d, 50);

      }

    }

    frameRate(10);

    pop();

​

  } else if (shape === 2) { //anger / quad triangle / red orange 

    // apply transparency? / Q: change speed 

    push();

    fill(255, random(0, 100), random(0, 150))

    quad(

      random(0, width), random(0, height),

      random(0, width), random(0, height),

      random(0, width), random(0, height),

      random(0, width), random(0, height)

    );

​

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

    quad(

      random(-20, 520), random(-20, 520),

      random(-20, 520), random(-20, 520),

      random(-20, 520), random(-20, 520),

      random(-20, 520), random(-20, 520)

    );

    frameRate(20);

    pop();

​

  } else if (shape === 3) { //joyful / pink yellow

    //delete 4 direction key?

    push();

    background(255);

    translate(180 - b, 150 + a);

    fill(to);

    circle(width / 2, height / 2, 550);

    fill(colorD);

    circle(width / 2, height / 2, 450);

    fill(colorC);

    circle(width / 2, height / 2, 350);

    fill(colorB);

    circle(width / 2, height / 2, 250);

    fill(colorA);

    circle(width / 2, height / 2, 150);

    fill(from);

    circle(width / 2, height / 2, 50);

    pop();

    push();

    translate(b, 300 - a);

    fill(from);

    circle(width / 2, height / 2, 550);

    fill(colorA);

    circle(width / 2, height / 2, 450);

    fill(colorB);

    circle(width / 2, height / 2, 350);

    fill(colorC);

    circle(width / 2, height / 2, 250);

    fill(colorD);

    circle(width / 2, height / 2, 150);

    fill(to);

    circle(width / 2, height / 2, 50);

    pop();

​

  } else if (shape === 4) { //sadness / lines stripes / blue purple

    //use probability

    if (random(2) > 1) {

      fill(158, 150, 255);

      rect(0, 0, 200);

    } else {

      translate(b, 300 - a);

      push();

      fill(from);

      rect(width / 2, height / 2, 550);

      fill(colorA);

      rect(width / 2, height / 2, 450);

      fill(colorB);

      rect(width / 2, height / 2, 350);

      fill(colorC);

      rect(width / 2, height / 2, 250);

      fill(colorD);

      rect(width / 2, height / 2, 150);

      fill(to);

      rect(width / 2, height / 2, 50);

      pop();

    }

  }

}

​

function keyPressed() {

  if (keyCode === 38) {

    a += 30;

  } else if (keyCode === 40) {

    a -= 30;

  } else if (keyCode === 39) {

    b += 30;

  } else if (keyCode === 37) {

    b -= 30;

  } else if (keyCode === 81) {

    shape = 1;

  } else if (keyCode === 87) {

    shape = 2;

  } else if (keyCode === 69) {

    shape = 3;

  } else if (keyCode === 82) {

    shape = 4;

  }

}