I can't see where i'm missing


#1

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.

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:

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

#2

it’s not hard to do.

in the class you have this line:

  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!)


      ellipse(x, y, r, r);

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

      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:

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 :slight_smile:

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

 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

    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/

Chrisir


#3

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