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

Timo · February 9, 2022, 6:01pm

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

  }

Chrisir · February 9, 2022, 7:23pm

think more simple

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

how many circles are there?

Timo · February 9, 2022, 7:43pm

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

Chrisir · February 9, 2022, 7:55pm

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

Timo · February 10, 2022, 12:04pm

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

Chrisir · February 10, 2022, 7:35pm

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

Timo · February 10, 2022, 9:11pm

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;

  }
  

}

Chrisir · February 10, 2022, 10:12pm

Again

Think more simple

Say you have only ONE circle all the time

ONE

What happens on mouse click?

Timo · February 11, 2022, 3:12pm

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

Chrisir · February 11, 2022, 3:49pm

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

Timo · February 11, 2022, 10:32pm

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

Chrisir · February 11, 2022, 10:52pm

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

Timo · February 12, 2022, 4:42pm

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


}

Chrisir · February 12, 2022, 5:48pm

Just give it another position on mousePressed

Chrisir · February 12, 2022, 6:36pm

Timo:

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

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

Timo · February 16, 2022, 3:36pm

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

Chrisir · February 16, 2022, 4:07pm

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

Timo · April 6, 2022, 3:48pm

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

Chrisir · April 6, 2022, 8:42pm

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
}

Timo · April 7, 2022, 4:29pm

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

Topic		Replies	Views
Making a circle disappear when clicked on Coding Questions	6	2031	March 1, 2020
Some please help me with my code Coding Questions homework	3	367	April 10, 2021
Circles that will disappear when the mouse hovers Coding Questions homework	1	384	March 26, 2020
Background hides circles inside the for loop Beginners	3	473	June 2, 2020
Make different objects appear at different timing Coding Questions	6	1209	April 1, 2019

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

Related topics