How to change the parameters of a shape over time?

jonathanbaird

Hey everyone! I'm new to Processing and am in the middle of creating a simple drawing program. Right now, ellipses are continually drawn as the mouse is pressed, with hue changing over time. How can I code the program so the hue of each ellipse continues to change after it has been drawn? Any tips/solutions would be very appreciated.

int hue = 0;

void setup() {
  size(720, 720);
  colorMode(HSB, 100);
  smooth();
  noFill();
  background(0);
}

void draw() {
  if (mousePressed) {
    strokeWeight(random(1, 2));
    stroke(hue, 100, 100, 4);
    ellipse(width/2, height/2, mouseX, mouseY);  
    hue = hue + 1;
  }
  if (hue == 100) {
    hue = 0;
  }
}

ffggjjv5

Well, a total remake but I coul not think of something more elegant.

You see, in order to be able to alter the state of something you must first store it somewhere. By creating a class for your ellipses you can have as many of them as you want and alter their state independently.

I had to change your brightness in order to make the ellipses more visible. You will have to tweak the color if you use this code. By leaving the background(0); in the setup you end up with pixelated graphics as frame don't overlap perfectly on each other and well... it is not a good approach anyway. Hope it helps :)

• The Circle class has to go in a new tab with this same name

  ArrayList<Circle> circles;
  
  void setup() {
    size(720, 720);
    colorMode(HSB, 100);
    smooth();
    noFill();  
    circles = new ArrayList<Circle>();
  }
  
  void draw() {
    background(0); 
    for (Circle  c : circles) {
      c.draw();
      c.update();
    }
  }
  
  void mousePressed() {
    circles.add(new Circle(width/2, height/2, mouseX, mouseY));
  }
  
  
  class Circle {
    int hue = 0;
    float x, y, w, h, sw;
  
    Circle(float x, float y, float w, float h) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      sw = random(1, 2);
    };
  
    void draw() {
      strokeWeight(sw);
      stroke(hue, 100, 100, 100);
      ellipse(x, y, w, h);
    }
  
    void update() {
      hue++;
      if (hue == 100) {
        hue = 0;
      }
    }
  }
  

jonathanbaird

Wow! Thank you so much! I made a few modifications, but everything works!