How to change the parameters of a shape over time?

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

Answers

  • edited October 2015 Answer ✓

    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;
          }
        }
      }
      
  • Wow! Thank you so much! I made a few modifications, but everything works!

Sign In or Register to comment.