Starter Code: Interaction Part 3 Exercises

//INSTRUCTIONS

  //Make a fork(copy) of this sketch.

  //This sketch refers to this tutorial video: 

  //https://www.openprocessing.org/sketch/876152

​

  //EXERCISE

  //Make a new variable called y1 and use the map()

  //function to control mouseY to move a red ellipse

  //up and down ONLY on the green area (no left/right movement). 

  //Turn into the collection where you got this starter code.

​

​

function setup() {

  createCanvas (400,200);

}

​

function draw() {

  //background

  background(255);

  fill (0,0,255);

  rect (200,0,200,200);

  fill (0,255,0);

  rect (0,100,200,200);

  //black ellipse() moves freely with mouseX

  fill (0);

  ellipse (mouseX, 50, 50, 50);

  //pink ellipse() is mapped to the blue region on X axis

  let x1 = map(mouseX, 0, width, 225, 375, true);

  fill (255,0,255);

  ellipse(x1, 150, 50, 50);

  //red circle

  let y1=map(mouseY, 0, height, 125,175,true);

  fill(255,0,0);

  ellipse(100,y1,50,50)

} //close draw()  

​

​