createCanvas(400, 400);

}

​

function draw() {

  background(100);

  // left antenna

  stroke(10)

  line(150, 50, 350, 300)

  // right antenna

  stroke(10)

  line(50, 300, 260, 50)

  // TV screen

  stroke(10);

  fill(10)

  rect(40, 100, 320, 200)

  // map the value that changes

  // from it's range

  // to output range

  let r = map(mouseX, 10, width, 10, 150)

  let g = map(mouseY, 10, height, 10, 150)

  //error picture

  //bottom color

  noStroke()

  fill(r, g, 200)

  rect(40, 250, 320, 50)

  //box color 1

  fill(r, g, 255)

  rect(40, 100, 90, 150)

  //box color 2

  fill(r, g, 155);

  rect(120, 100, 90, 150)

  // box color 3

  fill(r, g, 80);

  rect(200, 100, 90, 150)

  //box color 4

  fill(r, g, 50)

  rect(280, 100, 80, 150)

}

​

​

  function mousePressed() {

   save("Interactive.jpg");

}

​