Hello, I am currently struggling the way forward regarding the following
On a mouse click inside a given circle the circle disappears
At the same time another is drawn on the canvas .The same process repeats, that is the new created circle should disappear if the mouse is clicked inside the circle ( or if the x co-ordinate and y co-ordinate of mouse if inside the circle , it should disappear)
I have used the following way of using function so make the circle disappear but , I am unable to draw another circle at the same time. I tried to console log to check if the function is executed by the circle is actually not drawn . I am wondering what is the right way forward ?
The code is here below
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
}
function drawRandomCircles () {
background(255);
fill(128,128,128)
circle(random(100),random(100),100)
console.log('this is called');
console.log("t value : "+t);
}
function mouseClicked(){
console.log('confirmation that the mouse got clicked!');
console.log(mouseX, mouseY); //finding out the x and y co ordinates
d = dist(mouseX, mouseY,100,100);
console.log(d);
if(d <100){
t = random(10);
circleObjectClicked = true;
drawRandomCircles();
}
It seems to draw random positioned ones (which is one of the objectives) but a lot of them .
and another problem is that the distance I have hard coded so the logic below does not seem to work.
d = dist(mouseX, mouseY,100,100);
console.log("distance is " + d);
if(d <100){
circleObjectClicked = true;
}
The p5js scirpt is below
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
let xCenter,yCenter;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
if(circleObjectClicked == true){
fill(128,0,0);
//circle(random(100),random(100),100)
circle(200,200,100);
}
}
function mouseClicked(){
console.log('confirmation that the mouse got clicked!');
console.log(mouseX, mouseY); //finding out the x and y co ordinates
d = dist(mouseX, mouseY,100,100);
console.log("distance is " + d);
if(d <100){
circleObjectClicked = true;
}
}
ok , if it is only one circle , when I click it inside the circle , it disappears . This is the simplified version of the code is here .
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
let xCenter,yCenter;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
}
function mouseClicked(){
console.log('confirmation that the mouse got clicked!');
console.log(mouseX, mouseY); //finding out the x and y co ordinates
d = dist(mouseX, mouseY,100,100);
console.log("distance is " + d);
if(d <100){
circleObjectClicked = true;
}
I think i need a fresh start. I might have over complicated it here , I explored the concepts of classes. But now I think it is drifting away from the main objective . Should i split the problem into two ? quite lost here
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
let xCenter,yCenter;
let newCircle ;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
}
class Circle {
constructor(x, y, r) {
this.x = x;
this.y = y;
}
display() {
fill('yellow');
circle(this.x, this.y, 100);
}
}
function mouseClicked(){
console.log('confirmation that the mouse got clicked!');
console.log(mouseX, mouseY); //finding out the x and y co ordinates
d = dist(mouseX, mouseY,100,100);
console.log("distance is " + d);
if(d <100){
circleObjectClicked = true;
newCircle = new Circle(100,100,100);
newCircle.display();
}
}
Hi @Chrisir , i used your feedback , implemented and got the desired results. I am now trying to extend it in the 3D using webGL. So for now I am trying to check if the mouseX and mouseY is inside the cube. If it is inside the cube then another cube is drawn moving towards the user. In the example below, my condition to check the above statement is wrong .
Is it possible to have a condition where one can check if the mouseX, mouseY is inside the cube ( neglecting the z parameter) ? Sample sketch is below
let r = 100, g = 100, b =200
let z = -80;
let x = 0, y = 0 ;
function setup() {
createCanvas(400, 400,WEBGL);
avoidClipping();
}
function draw() {
background(255);
push();
fill(255);
fill(r,g,b);
translate(x,y,z);
box(80,80,80);
pop();
z += 3;
}
function avoidClipping() {
perspective(PI / 3.0, width / height, 1, 1000000);
}
function mouseClicked() {
let d = dist(mouseX,mouseY,x,y);
// console.log(mouseX);
console.log(d);
if (d >80) {
x= random(-200,200);//random(width);
y= random(-200,200);//random(height);
z = -40;
r = random(0,255);
g = random(0,255);
b = random(0,255);
}
}
Hi thanks for the tip. If i understood the script , it takes a snapshot of the co-ordinates for example X and Y co-ordinate and stores in the variables. I modified as mentioned in the github repo , but i found out that the screenposition and the mouse position seems to be nearly identical. Have i understood it wrong ?
Script
let r = 100, g = 100, b =200
let z = -100;
let x = 0, y = 0 ;
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(60,60,60);
pop();
z += 3;
}
function avoidClipping() {
perspective(PI / 3.0, width / height, 1, 1000000);
}
function mouseClicked() {
mouseX2D = screenPosition(mouseX);
mouseY2D = screenPosition(mouseY);
// check if there is any difference in the values
console.log(mouseX2D.x);
console.log(mouseX);
let d = dist(mouseX,mouseY,mouseX2D.x,mouseY2D.y);
if (d <80) {
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);
}
}