CODEWITHSUNDEEP
processing
user17808983
user17808983

Reputation:

Can't slow down the processing draw

I'm currently trying to generate some random circular ellipses and in my for loop I can't find it how can I slow the render of the ellipses (it's too flashy and fast the way it looks right now).

float circleX;
float circleY;
float x = 0;
float y = 0;


void setup() {
  size(640, 360);
}

void draw() {
  background(0);
  circleX = random(350, 370);
  circleY = 3;
  for (int i=0; i < frameCount; i++) {
    push();
    translate(width/2, height/2);
    noFill();
    stroke(255);
    strokeWeight(4);
    rotate(radians(i*20.3+(i*frameCount*0.005)));
    x = x + random(-1, 1);
    y = y + random(-1, 1);
    ellipse(circleX*0.002*i+15, circleY, x, y);
    pop();
  }
}

I tried to twist the values of radians but it doesn't seem to fix it.

Upvotes: 1

Views: 331

Answers (1)

laancelot
laancelot

Reputation: 3207

The Processing draw() loop runs at the amount of FPS your program is set to use, or typically 60 frames per seconds. If your computer is slow enough for having trouble with your program, it'll drop lower, though it would be quite surprising with a simple sketch.

The laziest way to slow your sketch would be to use the frameRate() method, but I don't like the idea because I value my frame rate, so instead we'll find something else.

You could also create a timer and set up your program so the timer decides when the drawing changes. It would be pretty cool, but also it's over-engineered for this purpose. That's usually my go-to solution, so let me know if you want me to elaborate, it's not really complicated and it has the advantage to separate the animation from the frame rate, so if you don't know if the computer where your program runs will be able to run at full FPS and your animation is time sensitive, it may seems it "skips" frames but for real it just draws the frames it has enough FPS to draw without slowing down. If you tie an animation to the frame rate and this one is lower than anticipated, the whole animation seems to slow down, like when there was too many elements on screen in an old NES game.

My favorite quick-and-dirty way to slow this kind of sketch without lowering the frame rate is to tie the drawing to a frame count and use the modulo operator. It's a quite useful operator if you don't already know about it. So I would add a int frameCounter = 0; global variable and increase it once every time the draw() loop runs, but progress with the animation only once every couple frames, thus slowing down the whole thing. Here's your code but with this adaptation:

float circleX;
float circleY;
float x = 0;
float y = 0;
int frameCounter = 0;


void setup() {
  size(640, 360);
}

void draw() {
  if (frameCounter%4==0) { // evolve the sketch every 4 frames, so it'll turn at 25% of the previous speed
    background(0);
    circleX = random(350, 370);
    circleY = 3;
    for (int i=0; i < frameCounter; i++) {
      push();
      translate(width/2, height/2);
      noFill();
      stroke(255);
      strokeWeight(4);
      rotate(radians(i*20.3+(i*frameCounter*0.005)));
      x = x + random(-1, 1);
      y = y + random(-1, 1);
      ellipse(circleX*0.002*i+15, circleY, x, y);
      pop();
    }
  }
  frameCounter++;
}

EDIT: please note that the frameCount variable is already a system variable in Processing, as it's generally a useful number to know. I'm making you count it by hand on purpose but once you're used to the concept you can just as easily use the system variable to get to the same result.

Hope this will help. Have fun!

Upvotes: 2

Related Questions