You want to pass the coordinates of the box to the screen position function
Thanks ! sorry I understood it wrong and passed it to the 2D objects . I think now I have it done correctly. However I was trying to corelate the x position , y position for the mouse and the cube. I think the logic : Switch to a new cube if the mouseX and mouseY **is inside the cube **
is some how wrong. And i am not why. I actually printed out the values to for inspection, and currently I am using a static condition to check if the cubes are switching .
let r = 100, g = 100, b =200
let z = -100;
let x = 0, y = 0 ;
let tempX, tempY, screenPositionGen;
let mouseX2D, mouseY2D;
function setup() {
createCanvas(400, 400,WEBGL);
avoidClipping();
addScreenPositionFunction();
}
function draw() {
background(255);
push();
fill(255);
fill(r,g,b);
translate(x,y,z);
box(80,80,80);
pop();
z += 1;
ScreenPositionGen = screenPosition(x,y,z);
mouseX2D = ScreenPositionGen.x;
mouseY2D = ScreenPositionGen.y ;
}
function avoidClipping() {
perspective(PI / 3.0, width / height, 1, 1000000);
}
function mouseClicked() {
// check if there is any difference in the values
//console.log(mouseX);
let d = dist(mouseX,mouseY,mouseX2D, mouseX2D);
console.log("X mouse : " + mouseX);
console.log("Y mouse : " + mouseY);
console.log("X snapshot : "+ mouseX2D);
console.log("Y snapshot : "+ mouseY2D);
console.log("distance : " + d);
if (d >40) {
x= random(-200,200);//random(width);
y= random(-200,200);//random(height);
z = -1000;
r = random(0,255);
g = random(0,255);
b = random(0,255);
}
}
Typo in last word
Chrisir
Consider using < here !!!
Hi Chris , sorry was my mistake. I did use mouseY2D and had also tried with the threshold conditition
d < 40
But when i measured the distance between mouseX,mouseY,mouseX2D,mouseY2D the distance computed was more than 40 , even though the mouseclick was inside the cube. So i am a but confused what is the reason.
Interesting.
I never used screenPosition because I don’t use p5.
Try:
ScreenPositionGen = screenPosition(0,0,0); // only 0 here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
directly after translate() command !!!
Remark
Maybe 40 is too small?
Hi, thanks for the quick reply. Hmmm I thought putting ScreenPositionGen after translate would take the snap shot of the X,Y component . If the value is set to 0 then the condition would not change right ? I tried to put the condition twice, once to reset it and then get the new parameters. I am not sure , I am just guessing right now .
40 sounds right ? because is it half the length of side of the cube? (80 is the side length)
let r = 100, g = 100, b =200
let z = -100;
let x = 0, y = 0 ;
let tempX, tempY, screenPositionGen;
let mouseX2D, mouseY2D;
function setup() {
createCanvas(400, 400,WEBGL);
avoidClipping();
addScreenPositionFunction();
}
function draw() {
background(255);
push();
fill(255);
fill(r,g,b);
translate(x,y,z);
ScreenPositionGen = screenPosition(0,0,0);
box(80,80,80);
pop();
ScreenPositionGen = screenPosition(x,y,z);
z += 1;
mouseX2D = ScreenPositionGen.x;
mouseY2D = ScreenPositionGen.y ;
}
function avoidClipping() {
perspective(PI / 3.0, width / height, 1, 1000000);
}
function mouseClicked() {
// check if there is any difference in the values
//console.log(mouseX);
let d = dist(mouseX,mouseY,mouseX2D, mouseY2D);
console.log("X mouse : " + mouseX);
console.log("Y mouse : " + mouseY);
console.log("X snapshot : "+ mouseX2D);
console.log("Y snapshot : "+ mouseY2D);
console.log("distance : " + d);
if (d < 40) {
x= random(-200,200);//random(width);
y= random(-200,200);//random(height);
z = -1000;
r = random(0,255);
g = random(0,255);
b = random(0,255);
}
}
Using it twice doesn’t make sense. The 2nd would just overwrite the first.
Just once (the first appearance in your code using 0,0,0)
Test it please.
(sorry, I don’t have time right now)
Not good names
Better boxPositionX2D, boxPositionY2D
Did you follow the usage here: GitHub - bohnacker/p5js-screenPosition: This function provides a solution to the missing screenX and screenY functions in p5.js. See https://github.com/processing/p5.js/issues/1553 for the discussion.
?
Can you post a link to your p5.js editor to share?
Hello sorry for the late reply. I did use the script in the disucssion and followed the instructions.
My sample sketch is here :
I am still experimenting on it .
@Chrisir I could not think of any other way except for what was mentioned in the guide. Any ideas ?
1 Like
File an issue on github or contact the maker of the tool
1 Like
Good idea, I have raised an issue in github! Hopefully can get some directions and information. Actually I am not sure at the moment , how to check if the point is inside a 2D squarer plane , since we do not have the corners ( such as x1, x2, y1,y2) but only the side of the cube .
iirc we use dist from the mouse position to the box position (which is the 2D screen position derived from the 3D position)
So no square needed
Hi , I think i found my mistake here. I had not translated the mouse co ordinates to reflect on the canvas. My mistake.
1 Like
Hi @Chrisir , I kept of moving forward with what was initially suggested by you and also when finding my mistake. The issues I am currently facing are two folds
A) When i am clicking inside the cube ( or when the condition is met) the cube disappears but the explosion occurs in the second circle . That is the cubes move forward and the explosion keeps occuring at the same time. What I am trying to do is to
1. Click inside the cube
2. First cube disappears
3. Explosion is created and at the same time new cube appears.
I remember in your explanations above , you mentioned to think of the circle as one circle . ( or to simplify things )
I am wondering if the same applies to the above logic
B) Currently the explosion only supports splitting into rectangles and not into smaller cubes. I tried randomly assigning smaller number .
I am not sure how to move forward . Any ideas . The sketch is mostly inspired from happy-coding p5js tutorials.
Sketch link : p5.js Web Editor
Timo
I
explosion code in processing java
// for explosions (these are actually shrapnels)
ArrayList <Shrapnel> shrapnels = new ArrayList<Shrapnel>();
//
// ---------------------------------------------------------------
//
void setup() {
// runs only once - init
size(800, 600);
} // func
void draw() {
// runs again and again
// delete screen
background(0, 64, 0);
// explosions
explosionManager();
} // func
//------------------------------------------------------------------------
void mousePressed() {
explode();
}
void explode() {
// explode!
shrapnels.clear();
int maxMissiles = int(random(4, 222));
for (int i=0; i<maxMissiles; i++) {
// this is where explode missile/shrapnel object is created
// and added to the missiles arrayList.
// It is small (4) and life decrease is .72 (how fast it dies),
// no Line (false).
shrapnels.add(
new Shrapnel(
random(mouseX-3, mouseX+3), random(mouseY-9, mouseY+9),
random(-1.3, 1.3), random(-2.7, .6),
4, .72, false)); //
}
} // method
//--------------------------------------------------------------------------------------------------
// the tab for Explosions and related and the complete class
void explosionManager() {
// this is a new for loop.
// Actually for the Shrapnels.
for (Shrapnel m : shrapnels) {
m.decreaseLife(); // call the decrease life (for explosion)
m.fly(); // call the "fly" method of the missile
m.display(); // call the "display" method of the missile
}
//
// remove dead ones (you need to have a conventional for-loop here)
for (int i=shrapnels.size()-1; i>=0; i--) {
Shrapnel m = (Shrapnel) shrapnels.get(i);
if (m.dead) {
shrapnels.remove(i);
}
}
} // func
// ===============================================================
class Shrapnel {
float startlocX, startlocY; // start location
float x, y; // current pos
float xvel, yvel; // velocity
float sizeShrapnel; // size for rect
float life=20; // how much lifes does it have
float lifeDecrease; // remove lifes
boolean dead=false; // is it alive?
boolean withLine; // draw line? Explosion has none.
// contructor
Shrapnel(
float _startlocX, float _startlocY,
float _xvel, float _yvel,
float _size, float _lifeDecrease,
boolean _withLine)
{
startlocX = _startlocX;
startlocY = _startlocY;
x = startlocX;
y = _startlocY;
sizeShrapnel = _size;
lifeDecrease=_lifeDecrease;
xvel = _xvel;
yvel = _yvel;
withLine=_withLine;
} // contructor
//-----
void display() {
//stroke(255, 2, 2);
fill(255, 2, 2);
noStroke();
if (withLine) {
line(startlocX, startlocY, x, y);
}
sizeShrapnel-=.07;
rect(x, y, sizeShrapnel, sizeShrapnel);
} // method
void fly() {
x += xvel;
y += yvel;
} // method
void decreaseLife() {
life-=lifeDecrease;
if (life<=0 || sizeShrapnel<=0) {
dead=true;
}
} // method
//
} // class
//
// ======================================================================
1 Like
Thank you @Chrisir , I will try to go through it and understand it. As I am learning javascript and using p5js as web editor , it is kind of difficult at the moment to check the java implementation into javascript . At the moment i dont understand quite a few of the syntaxes . 
1 Like
@Chrisir Actually when i first wanted to check the sketch it threw an error right away . I am wondering how to translate it to p5js web sketch