Webgl 3d point mouse interaction

p5.js Coding Questions
1

Hello there,

I have a collection of points in 3d space. they are rotating around a center. Would like to create a simple mouse interaction where they change color when I hover the mouse on them.
my code is as follows

 var w,h,angle,r;
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);
  w = windowWidth;
  h = windowHeight;

angle =0;


}

function draw() {
  background(0);
angle = angle+1;

if(angle>=360){
  angle=0;
}

push();
translate(0,0,0);

rotateY(radians(angle));

////////////// How do i resolve this mouse interaction with the point

if(mouseX  && mouseY ){
  stroke(255,255,0);
  strokeWeight(40);

}
else{
  stroke(255,0,0);
  strokeWeight(20);

}

////////////// How do i resolve this mouse interaction with the point
r =w/2;

beginShape(POINTS);
vertex(10,10,r);
vertex(80,500,r);
endShape();
pop();


}

Many thanks in advance
:smile:

1 Like
2

You can use this in addition with dist(mouseX , mouseY, …

1 Like
3

Thank you @Chrisir !

was going through the shared thread and found the off screen buffer method as an easier solution for my case.

2 Likes