CODEWITHSUNDEEP
javascriptp5.js
Chandan Kumar Chowdhury
Chandan Kumar Chowdhury

Reputation: 47

How can i change the colour of the button which i have created in P5.js?

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)
  }
}

Upvotes: 0

Views: 929

Answers (1)

Oscar Nguyen
Oscar Nguyen

Reputation: 53

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
}

Upvotes: 1

Related Questions