Michal Shahaf

10/31/22 

​

Instructions:

1. Touch John to change the colors

2. click on John to make him do something

*/

var height = 400;

var width = 400;

var img;

var h = height / 2;

var w = width / 2;

var The = "The";

var GOODLISTENER = "GOOD LISTENER";

var podcast = "podcast";

var memeText = "with John Hadden";

var s = 1; //text size

var speed = 1;

​

function preload() {

  blink = loadImage("blink.png");

  john = loadImage("john.png");

}

​

function setup() {

  createCanvas(400, 400);

  frameRate(7);

}

​

function draw() {

  //background//

  background("white");

  fill(104, 168, 152);

  noStroke();

  rect(10, 10, 390, 390, 20);

​

  //background color change//

  if (mouseX < width / 4 && mouseY > height / 2 + 20) {

    background(104, 168, 152);

    fill("white");

    noStroke();

    rect(10, 10, 380, 380, 20);

  }

  //text and images//

  image(john, 0, 200, 300, 200);

  textSize(34);

  textFont("Verdana");

  fill(31, 71, 60);

  text("the", w / 2 - 17 - 40, 85);

  textSize(56);

  fill("white");

  text("GOOD", w - 110, 145);

  text("LISTENER", w - 110, 205);

  textSize(37);

  fill(31, 71, 60);

  text("podcast", w + 25, 250);

  textSize(30);

  fill(104, 168, 152);

​

  //blinking John//

  if (mouseIsPressed && mouseX < width / 4 && mouseY > height / 2 + 20) {

    image(blink, 0, 200, 300, 200);

  }

  //GOOD LISTENER color text change//

  if (mouseX < width / 4 && mouseY > height / 2 + 20) {

    fill(104, 168, 152);

    textSize(56);

    text("GOOD", w - 110, 145);

    text("LISTENER", w - 110, 205);

    fill(218, 165, 32);

    textSize(30);

  }

  //spinning text//

  translate(110, 330);

  var r = frameCount / PI;

  rotate(r);

  fill(0, 0, 128);

  textSize(s);

  text(memeText, 0, 0);

  s += speed;

​

  if (s > 26 || s < 2) speed *= -1;

}

​