project 4

 This project, was an interactive project with p5.js editor using images and 2 interactions, I had 4 gifs one in each cornerish area. and there is an ellipse that grows and shrinks on its own, there is a word at the bottom that says trippy. when you click the mouse there is another word that shows up, it says faded, this word is only stroke and no fill, and trippy's color turns bright lime green. When you hit the arrow keys the ellipse disappears. 

let diam = 10;
let direction = 1;
let centX, centY;
let quote= "FADED";
let quote2= "TRIPPY";
function preload() {
  img = loadImage("assets/numeroduosthumb.gif")
}
function setup() {
  createCanvas(400, 400);
  frameRate(15); //24 frames per second
  background(200, 200, 200);
  centX = width/2;
  centY = height/2;
}

function draw() {
    stroke(255, 0, 150);
  if(diam >= 400 || diam <= 0) {
    direction *=-1;
 
}
    background(220, 0, 0, 50);
image(img, 25, 75, 100, 100);
  image(img, 250, 250, 100, 100);
  image(img, 25, 250, 100, 100);
  image(img, 250, 75, 100, 100);
  if (mouseIsPressed){
    textSize(32);
    fill(220, 0, 255, 10);
    text(quote, height/4, width/4, 100, 100);
  } else {
    textSize(38);
    text(quote2, 125, 350, 100, 100);
  }
  if (keyIsPressed === true){
    fill(0, 255, 0);
  } else{
    fill(0, 0, 255);
    ellipse(centX, centY, diam, diam);
   diam += 10 * direction;
  }
}