Draw A Circle After 20 Mouse Clicks In An Array

Processing Coding Questions
1

Hello All,

I am trying to figure out how to draw a circle after 20 mouse click in an array.

int mouseClicks;
void mousePressed() {
if (mouseClicks== 20) {Circle(,)} else { mouseClicks = 0; }

Thank You For The Help!

2

Please show your entire runnable code

Please read the reference on arrays. Can’t see yours

1 Like
3

Sorry I am very new to Java Processing :frowning:

This is the code I have so far:

int mouseClicks;
void mousePressed() {
if (mouseClicks== 20) {Circle(,)} else { mouseClicks = 0; }

4

Hello, @KH1, and welcome to the Processing Community!

In order for us to help, we will need to know specifically how the coordinates of the mouse clicks should relate to the placement and the size of the circle. For instance, should the circle be centered at the average of the x and the average of the y values of the clicks? Should the radius of the circle be the average distance from the computed center of the circle to the points where the mouse was clicked?

5

Hello,

Please format your code as a courtesy to the community:
https://discourse.processing.org/faq#format-your-code

There are resources (tutorials, references, examples, etc.) here:
https://processing.org/

And examples that come with Processing:

image

:)

1 Like
6

Hello Javagar,

Thank You For The Warm Welcome!

Essentially where ever the mouse is click on the stage a circle would appear after 20 clicks.

So this makes sense:

Thank You.

1 Like
7

@Chrisir and @glv have provided some good advice and information for you to use.

It may be a good idea for you to divide your solution into parts. For example, you could write a function that takes two arrays of 20 integers each and returns the specifications for the circle, which would be the x and y coordinates of the center and the radius.

See Wikipedia: Euclidean distance. After you compute the coordinates of the center, that article may help you compute the distances of the clicked points to that center.

We look forward to seeing your code, formatted of course, as you develop it.

1 Like
8

This is what I have so far:

Now how do I make it to only show that little dot after 20 clicks?

int []x;
int []y;
int mouseClicks;

void setup() {
  size (500, 500);
  x = new int[20];
  y = new int[20];
}

void draw() {
  background(255, 255, 255);
  for (int i = 0; i <=19; i = i +1) {
    x[i] = mouseX;

    for (int t = 0; t <=19; t = t +1) {
      y[t] = mouseY;

      fill(0, 0, 255);
      if (mousePressed) {
        circle(x[i], y[t], 10);
      }
    }
  }
}
9

Thanks for the formatted code.

Why are you using a nested loop to get the coordinates of the mouse clicks?

10

No Worries,

I am very new to the programming world a quick sample of how to do the if mouse clicks >20 then circle would be highly appreciated.

Thank You.

11

In your code, it reads:
(Pseudo Code:)

On mouse click: If the mouse has been clicked twenty times, draw a circle.
Otherwise, set the mouse to be clicked 0 times.

I hope you can see the error here. The mouse variable is constantly reset to 0, and never reaches twenty. A better way to do this would be to:

int mouseClicks = 0; //Our initial variable. This stores all of our clicks.
void mouseClicked(){ //Our click function. I like to use mouseReleased in my programs, but it's up to you.
  if(mouseClicks == 20){ //If it's twenty run this line:
   //Your ellipse/circle
  } else {
    mouseClicks++; //Increases the click count by one ever click. 
  }
  
}

Actually, after reading this; maybe you should do something closer to this:
(More Pseudo Code:)

Every time you click a mouse, increase the times it clicked by 1. If it's greater than twenty, ever time we click, draw a circle.

And the actual code would look like:

ArrayList<int> x = new ArrayList<int>(); //Create an arraylist that continues to be able to grow.
ArrayList<int> y = new ArrayList<int>(); //I probably would use a PVector, but hey.
int clicks = 0; //Stores how many times we've clicked.

void mouseClicked(){ //Our click function.
  if(clicks >= 20){ //If our click count is < 20, do nothing but increase our click count.
   x.add(mouseX); //If it's bigger than twenty, store the mouse positions in an arraylist
   y.add(mouseY); //I'm doing an arraylist so that I don't have to worry about running out of space in the list.
  } else{
   clicks++; //Just increase our click count.
  }
}

void draw(){ //Begin our draw loop
 background(255); //Our background so that it wipes.
 for(int i : x){ //For all X values in our list, store them as variable: i
  for(int j : y){ //For all Y values in our list, store them as variable: j
   circle(i, j); //Finally, draw each ellipse/circle at those locations.
  }
 }
}
2 Likes
12

Thank You Mattyjak - I figured it out :slight_smile:

3 Likes