how can I slow down my animation without making it choppy

originalsurfmex

I am using random() to create some variation in a sketch, however it is either too fast or to slow and choppy. I've tried using frameRate() but the results have not been good. How can I slow down the random() part without changing the entire sketch or making the movement choppy?

Sketch:

Blob myBlob;

void setup() {
  size(300,300);

  //initialize blob
  myBlob = new Blob();
}

void draw() {
  frameRate(60);
  background(255);
  myBlob.move();
  myBlob.center();
  myBlob.body();
}

Blob class:

class Blob {

  color c;
  float xpos;
  float ypos;
  float xspeed;

  Blob() {
    c = color(244);
    xpos = width/2;
    ypos = height/2;
    xspeed = 1;
  }

  void center() {
    rectMode(CENTER);
    fill(c);
    rect(xpos, ypos, 5, 2.5);
  }

  void ring(float radian, float w, float h, int grey) {
    noFill();
    rotate(millis() * 0.001 * (radians(radian)));
    stroke(grey);
    ellipse(0, 0, w, h);    
  }

  void body() {
    float rSize10 = random(-10,10);
    float rSize20 = random(-20,20);

    translate(xpos, ypos);

    ellipseMode(CENTER);
    pushMatrix();
    ring(-270, 40 + rSize10, 30, 153);
    popMatrix();
    ring(120, 50, 40 + rSize10, 150);
    ring(45, 40 + rSize10, 50, 155);
  }

  void move() {
    xpos = xpos + xspeed;
    if (xpos > width) {
      xpos = 0;
    }
  }
}

GoToLoop

Dunno whether it's any help, but I've got an online example
which demos a frame independent animation: /:)

http://studio.processingtogether.com/sp/pad/export/ro.9jAqLpHlv-8K3/latest

originalsurfmex

thanks for the lead GoToLoop

I can't figure out how to make the concept apply only to the random() portion of my sketch though. I don't want to mess with the speed the objects moves across the screen per se, just speed the rings change size with random().

Any hints?

velvetkevorkian

You could try using lerp(), to smooth the randomness a little? Quickly applied to your Blob class:

class Blob {

  color c;
  float xpos;
  float ypos;
  float xspeed;
  float rSize10, rSize20;

  Blob() {
    c = color(244);
    xpos = width/2;
    ypos = height/2;
    xspeed = 1;
  }

  void center() {
    rectMode(CENTER);
    fill(c);
    rect(xpos, ypos, 5, 2.5);
  }

  void ring(float radian, float w, float h, int grey) {
    noFill();
    rotate(millis() * 0.001 * (radians(radian)));
    stroke(grey);
    ellipse(0, 0, w, h);    
  }

  void body() {
     rSize10 = lerp(rSize10, random(-10,10), 0.3);
     rSize20 = lerp(rSize20, random(-20,20), 0.3);

    translate(xpos, ypos);

    ellipseMode(CENTER);
    pushMatrix();
    ring(-270, 40 + rSize10, 30, 153);
    popMatrix();
    ring(120, 50, 40 + rSize10, 150);
    ring(45, 40 + rSize10, 50, 155);
  }

  void move() {
    xpos = xpos + xspeed;
    if (xpos > width) {
      xpos = 0;
    }
  }
} 

koogs

you're changing the radius randomly 60 times a second, it's bound to look choppy.

i always do this using sinusoidal values (all floats)

radius = avgRadius + range * cos(alpha);
alpha += delta;

where delta is initialised as random(-.002, .002); or something. have a different alpha and delta for each variable you are changing.

noise() is also useful...

originalsurfmex

koogs, thanks very much for the explanation as to why its choppy. I really liked the noise() method and I'm going to use it. I couldn't quite wrap my head around using millis() to smooth things out.

I'll try the sinusoidal in a future project.

Sean_I

Is there a way to change the radius fewer times every second and still have the rest of the sketch drawing at the same rate?