Animating Drawings

Programming Questions

ditchweed

in Programming Questions • 2 years ago

hey guys

wanted to create a separate post for this as although its the same sketch as my last post its a completely different query. I made the drawing program below, however instead of the lines simply appearing instantly, i want them all to be drawn as though it were a film of someone drawing them all simultaneously instead of an instant drawing. so that it lasted maybe 5 minutes instead of milliseconds. any help with this would be much appreciated, just not really sure what search terms to use to get anything helpful.

many thanks

Ditchweed

float[] dotx;
float[] doty;
size(screen.width,720);
smooth();
strokeWeight (0.2);
background (255);
dotx = new float [50];
doty = new float [50];
for (int i=0; i < 50; i++){
float x=random(0,width);
float y=random(0,height);
dotx[i] = x;
doty[i] = y;
point(x,y);
}
for (int i=0; i<50; i++){
for (int j=0; j<50; j++) {
line (dotx[i],doty[i],dotx[j],doty[j]);
}
}

Replies(3)

PhiLho

Re: Animating Drawings

2 years ago

People have trouble managing time in Processing to do animations or to suspend them. Not surprising, it isn't very intuitive, honestly.
The trick is to do one drawing, then wait a little, and make another drawing, etc.
By "wait a little", I mean you don't stop the main loop (calling draw()) but for a while, you just do nothing: at the start of draw(), if current time minus last event time is below the waiting time, just return without doing anything.
There are numerous examples of this on the forums.

ditchweed

Re: Animating Drawings

2 years ago

thanks for the hint is there anywhere you can think of where there is an example of this method being used that i could look at to get an idea of what needs to be done.

thanks

ijeoma

Re: Animating Drawings

2 years ago

animation libraries such as ijeomamotion, ani make doing animations such as what you want to do easier using tween sequences. you can create animation sequences. to create a tween sequence in ijeomamotion you have to create a tweensequence object then append the tweens you want to sequence to it.

/*
press a key to play the tweensequence and click and drag from left to right to seek from the beginning to the end of the sequence.
*/
import ijeoma.motion.*;
import ijeoma.motion.tween.*;
TweenSequence ts;
void setup() {
size(400, 400);
smooth();
float[] xs = new float [50];
float[] ys = new float [50];
for (int i=0; i < xs.length; i++) {
xs[i] = random(0,width);
ys[i] = random(0,height);
}
Motion.setup(this);
ts = new TweenSequence();
for (int i=0; i < xs.length - 1; i++) {
float x1 = xs[i];
float y1 = ys[i];
float x2 = xs[i+1];
float y2 = ys[i+1];
Property xP = new Property("x", x1, x2);
Property yP = new Property("y", y1, y2);
ts.appendChild(new Tween("t"+i, new Property[] { xP, yP }, 50));
// or
// String xP = "x: "+x1+", "+x2;
// String yP = "y: "+y1+", "+y2;
//
// ts.appendChild(new Tween("t", new String[] { xP, yP }, 50));
}
//ts.setTimeScale(2);
ts.play();
}
void draw() {
background (255);
noFill();
beginShape();
for (int i = 0; i < ts.getCurrentChildIndex() + 1; i++) {
float x = ts.getTween(i).getProperty("x").getPosition();
float y = ts.getTween(i).getProperty("y").getPosition();
// or
// float x = ts.getTween(i).getPosition("x");
// float y = ts.getTween(i).getPosition("y");
vertex(x, y);
}
endShape();
}
void keyPressed() { ts.play(); }
void mousePressed() { ts.pause(); }
void mouseReleased() { ts.resume(); }
void mouseDragged() { ts.seek((float) mouseX / width); }

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/