Change background color when mousePressed

p5.js Coding Questions
1

Hello, I am trying to make the background change when pressing each circle here, but I cannot get it to work, it is always white, any help? The circles are supposed to grow and be black when rolling over and the background change to different colors when clicking on each…

Thank you!

var x = 300;
var y = 200;
var d = 20;
var d2 = 20;
var d3 = 20;
var c = 'white';

function setup() {
  createCanvas(600, 400);
}

function draw() {
  ellipseMode(CENTER);
  background ('c');

  if (dist(mouseX, mouseY, x, y) < d/2) {
     fill(0);
     d=35;
  } else {
     fill(180);
     d=20;
  }  
  ellipse(x, y, d, d);    

  if (dist(mouseX, mouseY, x-100, y) < d2/2) {
     fill(0);
     d2=35;
  } else {
     fill(180);
     d2=20;
  }    
  ellipse(x-100, y, d2, d2);

  if (dist(mouseX, mouseY, x+100, y) < d3/2) {
     fill(0);
     d3=35;
  } else {
     fill(180);
     d3=20;     
  }   
  ellipse(x+100, y, d3, d3);
}

function mousePressed() {
  background ('c');
  let r = dist(mouseX, mouseY, x,y);
  if (r < 20) {
  c='yellow';
  }

 let s= dist(mouseX, mouseY, x-100,y);
  if (s < 20) {
  c='blue';
  }
  
 let t= dist(mouseX, mouseY, x+100,y);
  if (t < 20) {
  c='red';
  }
}
2

Try this without the ’ ’

At start of draw() mainly background (c);

1 Like