i want to change the background colour of the button before and after clicking but the code doesn't seems to work properly? i even cannot change the background colour of the canvas while clicking .is there any way to change the colour of the canvas using bg colour
ar playAnim=false;
var pic1;
var pic2;
var pic3;
let button;
let posX=0
let posY=0
const rightwall=350;
const height=600;
function preload(){
pic1=loadImage("5.png")
pic2=loadImage("iron.jpg")
pic3=loadImage("slag.jpg")
}
function setup(){
createCanvas(600,600);
background("blue");
button=createButton("CLICK ME")
button.position(200,250);
button.mousePressed(changeBG);
noLoop();
}
function changeBG() {
let val = random(65);
background(val);
loop();
playAnim=true;
draw();
posX=0;
posY=0;
// background will be overwritten with 220
}
function draw() {
background(220);
text(mouseX + "," + mouseY, 20, 20);
img1=image(pic1, 300, 30, 150, 200)
img2=image(pic2, posX, 70, 100, 100)
img3=image(pic3,posX, posY-300,150, 200)
if (playAnim) {
posX=constrain(posX+1,0,rightwall-30)
posY=constrain(posX-1,posY,height-50)
}
}
You should use:
if(mouseIsPressed) {
fill(//add your color here)
//add your code here
}
You can visit https://www.codecademy.com/courses/learn-p5js/lessons/p5js-interaction/exercises/p5js-detecting-mouse-events for further info
Or if you want to detect a mouse button press and release over the element, use:
if (mouseClicked) {
// enter your code here
}