# I can't see where i'm missing

**URL:** <https://discourse.processing.org/t/i-cant-see-where-im-missing/9190>\
**Category:** Coding Questions\
**Created:** [March 11, 2019, 11:33am UTC](https://discourse.processing.org/t/i-cant-see-where-im-missing/9190 "2019-03-11T11:33:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseBri93](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@JoseBri93](https://discourse.processing.org/u/JoseBri93)\
**Post date:** [March 11, 2019, 11:33am UTC](https://discourse.processing.org/t/i-cant-see-where-im-missing/9190/1 "2019-03-11T11:33:56Z")

</div>

Hi, i’ve got this sketch where i want to create a new circle whenever a mousePressed() event occurs. It’s been fine for me but now i want it to appear whenever my mouse is located so it continues its path and don’t follow my mouse. i’ve tried to defined it in my class part and in my mousePressed() event but doesn’t work. I’d appreciate your help.

```auto
Circulo[] circulos = new Circulo[20];
int cantidad = 0;

void setup() {
  size(400,400);
  
  for (int i= 0; i < circulos.length; i++) {
    circulos[i] = new Circulo(32);
  }
}

void mousePressed() {
  cantidad = cantidad +1;
}

void draw() {  
  background(0);
  //fill(150,50);
  if (frameCount % 10 == 0) {
    fill(frameCount*3 % 255, frameCount*5 % 255, frameCount
    *7 % 255, 50);
  }
  //translate(mouseX, mouseY); //centra figura
  for (int i= 0; i < cantidad; i++) {
    circulos[i].display();
    circulos[i].escala();
    circulos[i].tope();
  }
} 

```

And this is my class part:

```auto
&lt;class Circulo {
  float r;
  float x;
  float y;
  float diametro;
  
  Circulo(float radio) {
    //x = width/2;
    //y = height/2;
    diametro = radio;
  }
  
  void display() {
  stroke(255);
  //ellipseMode(CENTER);
  ellipse(mouseX,mouseY,r,r);
  }
  
  void escala() {
    r+=0.4;
    //x = x + random (-2,2); // efecto
  }
  
  void tope() {
    if (y < diametro/2) {
      y = diametro/2;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 11, 2019, 12:40pm UTC](https://discourse.processing.org/t/i-cant-see-where-im-missing/9190/2 "2019-03-11T12:40:47Z")

</div>

it’s not hard to do.

in the class you have this line:

```auto
  ellipse(mouseX,mouseY,r,r);

```

but you want to have each circulo in the array circulos have a **different** position.  
That’s why you have `x` and `y` in the class!

So the line above must be (using x and y!)

```auto

      ellipse(x, y, r, r);

```

Also define x and y in the constructor of the class:

```auto
      x = mouseX;
      y = mouseY;

```

(it’s probably more common to pass mouseX and mouseY to the constructor as parameters and say x=x\_; and y=y\_; in the constructor but never mind)

Now, you need to use the constructor and fill the array circulos:

```auto
void mousePressed() {
  circulos[cantidad] = new Circulo(32); // cantidad is the writing position in the array to add a new circle
  cantidad = cantidad + 1;
}

```

**Remarks**

these lines in setup() are not necessary 🙂

```auto
  for (int i= 0; i < circulos.length; i++) {
    circulos[i] = new Circulo(32);
  }

```

- You need to check whether the array is full, program will crash

- Technically radio is not the same as diametro (in the class you have both. Not good)

- You can delete the circle at a certain size or make it shrink (pulsating) by adding a negative to the diameter

- in tope() you change y (upper screen bound); you could treat x the same way and also take care of the other borders (y: lower screen border, x: right screen border)

**Colors**

To achieve different colors for each circle,

these lines would go into the class (into `display()`)

```auto
 if (frameCount % 10 == 0) {
    fill(frameCount*3 % 255, frameCount*5 % 255, frameCount
    *7 % 255, 50);
  }

```

replace frameCount with something like `(frameCount-frameCountAtThisCirclesBirth)` (with brackets)

and in the constructor say `frameCountAtThisCirclesBirth=frameCount;`

Add a line `int frameCountAtThisCirclesBirth;` before the constructor

That’s not exactly as you have it now.

You have to say fill(col); outside the if in `display()` and change col in

```auto
    if ((frameCount-frameCountAtThisCirclesBirth) % 10 == 0) {
      col = color ((frameCount-frameCountAtThisCirclesBirth) *3 % 255, 
        (frameCount-frameCountAtThisCirclesBirth) *5 % 255, 
        (frameCount-frameCountAtThisCirclesBirth) *7 % 255, 50);
    }

```

declare col before setup: `color col;`

**Tutorial**

There is a nice tutorial about objects

[https://www.processing.org/tutorials/objects/](https://www.processing.org/tutorials/objects/)

Chrisir

---

<div class="post-metadata">

**Author:** ![JoseBri93](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@JoseBri93](https://discourse.processing.org/u/JoseBri93)\
**Post date:** [March 11, 2019, 2:36pm UTC](https://discourse.processing.org/t/i-cant-see-where-im-missing/9190/3 "2019-03-11T14:36:46Z")

</div>

Hi Chrisir, Well thank you very much, thats way more than i excepted to receive as an answer! I’ll take your advices and produce better sketches!

Jose