Motion Trails

Click around to change number of spokes and orbit speed. Full screen.

This sketch combines P5 and TweenMax to explore motion trails and tweening object properties.

If we draw an object on the canvas with p5 but, instead of erasing the canvas before each draw cycle, we “partially” erase it by overlaying it with a semi-transparent black, it will gradually etch away what was previously drawn, instead of clearing it all at once.

p.colorMode(p.RGB, 255);
p.fill(0, 20);
p.noStroke();
p.rect(0, 0, p.width, p.height);

The second parameter to fill is an alpha value from 0 to 255. 255 is fully opaque and basically erases the canvas completely. Dial the opacity back and it takes more iterations. The older items drawn to the canvas will disappear faster than the latest ones with each draw cycle creating a gradient type trail of opacity as an object moves.

The opacity can be modified in the sketch above by using the mouse wheel.

Tweens to object properties

Like the previous sketch, a class of objects (Sparkees) were created and have their own methods to draw themselves on screen. A property called offset controls the length of their spoke. This property is bound to TweenMax during object creation

sparks = [];
for (let i = 0; i < parm.sparks; i++) {
  let spark = new Sparkee(p, p.width / 2, p.height / 2);
  spark.radians = i;
  TweenMax.to(spark, p.random(1.0, 5.0), {
    offset: p.random(100, 350),
    repeat: -1,
    yoyo: true,
    roundProps: "offset",
  });
  sparks.push(spark);
}

The roundProps addon to TweenMax rounds the number during tweening so we aren’t trying to set the length to values like 100.45. The tween repeats indefinitely and oscillates between an initial value of zero and some random length that was preset.