let bg2;

let show = false;

​

let imgArr = [];

​

function preload (){

  bg1 = loadImage("background.png"); 

  bg2 = loadImage("background2.png");

  // imgArr.puush(bg1);

  // imgArr.puush(bg2);

}

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER)

  angleMode(DEGREES)

}

​

function draw() {

​

  image(bg1, 0, 0, width, height); //render image, positioned by top-left corner at (0,0), using width & height of canvas

  if(show == true){

    image(bg1, 0, 0, width, height);

  } else{

     image(bg2, 0, 0, width, height);

  }

  if(frameCount % 50 == 0){

    //do something every 5 frames

    show = !show;

    // gives you the opposite of show 

    // works with true and false values

  }

  drawCat();

}

​

​

​

​

//CODE FOR DRAWING THE CAT

​

function drawCat(){

  fill(0);

  noStroke();

  //face

  rect(width/2,height/2,100,80,25,25,50,50);

  //body

  rect(width/2,height/2 + 90,100,120,50,50,10,10);

  //tail

  push()

  translate(width/2 + 30,height/2 + 100)

  rotate(map(mouseY,0, height,-45, -30));

  rect(50,0,100,15,100);

  fill(255)

  rect(100,0,10,1,100);

  rect(100,2,10,1,100);

  rect(100,4,10,1,100);

  pop()

  //ears

  triangle(width/2 - 50, height/2 - 50, width/2 - 50, height/2 - 20, width/2 - 30, height/2 - 30)

   triangle(width/2 + 50, height/2 - 50, width/2 + 50, height/2 - 20, width/2 + 30, height/2 - 30)

  //nose

  fill(255,200,255)

  triangle(width/2, height/2 + 5, width/2 - 5, height/2, width/2 + 5, height/2);

  //eyes

  fill(255)

  ellipse(width/2 - 30,height/2,30,20);

  ellipse(width/2 + 30,height/2,30,20);

  fill(0,0,0)

  let factor = 0;

  if(mouseX < width){

     factor = map(mouseX, 0, width, -10, 10);

  }

  ellipse(width/2 - (30 - factor),height/2,10,20);

  ellipse(width/2 + (30 + factor),height/2,10,20);

}