Logic on making a circle disappear when clicked and drawing another circle at the same time

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();

  }

think more simple

a given circle the circle disappears - another is drawn on the canvas

how many circles are there?

Just one circle should be drawn on a click (random center co-ordinates)

1 Like

So what do you have to do on a click happening?

When a clicking happens or when the mouse co-ordinates are inside the circle . Two things happen

  • The original circle disappears , lets say circle1

  • A new circle (circle 2) with different center co-ordinates should appear in the screen .

  • When we click inside the the new circle (circle2) , the circle 2 disappears and a new circle , circle 3 appears.

This is the process in general, i was thinking about

I am sorry this is taking so long

I wanted to suggest that this is in fact only ONE circle.

Maybe this helps you to find a new approach

Thank you for the feedback , i think i have got a step further . I can see a transition now. However I have an issue in the following

when i use

if(circleObjectClicked == true){
  fill(128,0,0);
  circle(random(100),random(100),100)
  //circle(200,200,100);

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;

  }
  

}

Again

Think more simple

Say you have only ONE circle all the time

ONE

What happens on mouse click?

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;
}

It disappears … and reappears!
So what do you have to do?

Sorry i didnt get you . It just disappears , it does not reappears. But perhaps i have understood something wrong here

Just give it another position instead of thinking of it in terms of 2 circles

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();
}


}


Just give it another position on mousePressed

Let’s start with this version.

for the position instead of 100,100 say x,y

define x,y before setup()

  if(d <100){
    circleObjectClicked = true;
  }

here you want give x and y a new value SO THAT THE circle appears elsewhere

if(d <100){
    x = .....
    y = ... 
}

you can also change its radius and color (when both are variables too)


That’s what I meant when I said think of it as ONE circle and just move it to a new position

It’s just re-thinking the assignment (or its text)

I hope this helps.

Chrisir


Full Code (in JAVA flavor)


float x=100, y=100; 

void setup() {
  size(500, 500);
}

void draw() { 
  background(255); 

  fill(128, 0, 128);
  ellipse(x, y, 100, 100);
}

void mouseClicked() {

  float d = dist(mouseX, mouseY, x, y);

  if (d <100) {
    x=random(width); 
    y=random(height);
  }
}

1 Like

Thanks a lot, It was as you said with one circle quite straightforward . I totally went overboard in my thinking there. Thanks again.

1 Like

you can also change size and color on mouse click when you store these data in variables too

1 Like

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);
  }
  
}

I recommend you look at screenX and implement it

for p5

see Mouse interaction with 3D objects / objects on 3D plane - #2 by Chrisir

In processing JAVA flavor you can say

theX=screenX (.........
theY=screenY (.........

and later


if(dist(mouseX,mouseY,theX,theY)<40) {
     // hit
}

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);
  }
  
  
}