// move mouse horizontally to change shape

​

var color = 0

​

function setup() {

  createCanvas(300, 300);

}

​

function draw() {

  background(220);

  color = map(mouseY, 0, 300, 0, 255);

  if(mouseX < 100) {

    noStroke();

    fill(color);

    ellipse(150,150,50);

  }

  if(mouseX >= 100 && mouseX <= 200) {

    noStroke();

    fill(color);

    rect(125,175,50,-50);

  }

  if(mouseX > 200) {

    noStroke();

    fill(color);

    triangle(125,175,150,125,175,175); 

  }  

}