How to use mousePressed with mouseX and mouseY?

p5.js Coding Questions
1

I have 6 different objects and I’d like to choose one of the objects and move it to the next screen. Right now there is just 3D box on the next screen. But I don’t know how to do it. Any help would be needed!

Here’s the code

var rotX = 0;
var rotY = 0;
var rotZ = 0;
var _text;

var screen = 0;

function setup() {
createCanvas(500, 700, WEBGL);
smooth();

_text = createGraphics(400,300);

 _text.fill(100);
_text.textAlign(CENTER);
_text.textSize(20);
_text.text('Choose the design', 200, 180);
_text.textSize(15);
_text.text('Continue', 320, 270);

}

function draw() {

background(180, 80, 80);

if (screen == 0){

let locX = mouseX - height / 2;
let locY = mouseY - width / 2;



push();
translate(0, 0, -50);
noStroke();
fill(200, 60, 40);
rect(-250, -380, 500, 800);
pop();

push();
translate(0, 0, -50);
fill(235);
stroke(0);
rect(-235, -310, 140, 140);
rect(-70, -310, 140, 140);
rect(95, -310, 140, 140);
rect(-235, -120, 140, 140);
rect(-70, -120, 140, 140);
rect(95, -120, 140, 140);
rect(-125, 100, 250, 250);
pop();

fill(255);
push();
translate(-150, -220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 0, 0);
box(70);
pop();

push();
translate(0, -210);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 90, 0);
cylinder(50, 20);
pop();

push();
translate(150, -220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
 fill(20, 80, 150);
cone(50, 70);
pop();

push();
translate(-150, -45);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
  fill(90, 80, 200);
torus(30, 15);
pop();

push();
translate(0, -45);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
  fill(20, 190, 250);
box(60, 30, 40);

pop();

  push();
translate(150, -45);

 rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
    fill(20, 250, 200);
ellipsoid(60, 15, 40);
pop();

 push();
 ambientLight(random(250), random(230));
noStroke();
fill(20);
ellipse(180, 230, 60, 60);
fill(250);
ellipse(180, 230, 43, 43);
fill(0);
ellipse(180, 230, 35, 35);
pop();


push();
if (mouseX < 180 && mouseY < 220) {
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
 fill(250, 0, 0);
box(70);
} else if (mouseX < 320 && mouseY < 220){
 translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 90, 0);
cylinder(50, 20);
} else if (mouseX < 480 && mouseY < 220){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 80, 150);
cone(50, 70);
} else if (mouseX < 180 && mouseY < 420){
 translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
  fill(90, 80, 200);
torus(30, 15);
 } else if (mouseX < 320 && mouseY < 420){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
  fill(20, 190, 250);
box(60, 30, 40);
  } else if (mouseX < 480 && mouseY < 420){
 translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
  ambientLight(60, 60, 60);
 pointLight(255, 255, 255, locX, locY, 100);
  frameRate(25);
    fill(20, 250, 200);
ellipsoid(60, 15, 40);
 }
     pop();

texture(_text);
 noStroke();
 plane(600, 600);
} else if (screen == 1) {

background (200);

push();
translate (0, 0, -50);
fill(255, 0, 0);
rect(-250, -350, 500, 700);
pop();

fill(255);
push();
rotateY(rotY);
rotateX(rotX);
translate(mouseX - width/2, mouseY - height/2);
box(75, 100, 50);
pop();
}}

function mouseDragged(){
 if (screen == 0) {
screen = 1;
} else if (screen ==1) {

rotY += (mouseX - pmouseX) * 0.01;
rotX += -(mouseY - pmouseY) * 0.01;

}}

1 Like
2

Hey There!

Have you looked into mousePressed ? Also having a bounding for each shape to be able to choose it.
And it be great for a simple example !

3

Do you mean, click one object with the mouse and then draw a new screen with only that clicked object, not all six?