We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hi
I created a box out of planes. I'm trying to find a way to click on each plane (creating like a cube navigation).
How do i do it while using translate for location? Thanks
`let moveX; let moveY; let varx; let vary; let varinc;
function setup() { createCanvas(windowWidth, windowHeight, WEBGL);
}
function moveCube(){ moveX= map(mouseX, 0,width, 0,360); moveY= map(mouseY,0,height,0,360); rot(); thebox();
}
function rot(){ rotateX(-moveY * 0.01); rotateY(-moveX * 0.01); rotateZ(frameCount*0.007); }
function cubeNoise(){ varx = map(noise(varinc),0,1,-150,150); vary = map(noise(varinc),0,1,-150,150);
varinc+=0.003;
}
function draw() { background(250); orbitControl();
//cubeNoise(); push(); //translate(varx,vary); moveCube(); pop(); }
function thebox(){ fill(250,0,0);//red plane(250);
push();
translate(-125,0,-125);
rotateY(radians(90));
fill(0,250,0);//green
plane(250);
pop();
push();
translate(125,0,-125);
rotateY(radians(90));
fill(0,0,250);//blue
plane(250);
pop();
push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();
push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();
push(); translate(0,125,-125); rotateX(radians(90)); fill(150,150,150);//gray plane(250); pop();
push(); translate(0,0,-250);
fill(0);//gray
plane(250);
pop();
}
function screens{ var trx; var try; translate(-width/2, -height/2); for (var i = 0; i<9; i++){ push(); translate(
`
Answers
I think you have two options:
- Ray Picking (shooting a Ray and see what it hits)
- Color Picking (see if the MousePostion match with a deserved Color)
I don't think either one is implemented in p5js direcly.
i found this via goole, (if you know what to searing for)
https://gist.github.com/sixhat/5bcf3b8d159e7285e247a96c1cbf055f#file-sketch-js-L137