# Canvas Trail Effect (experiment)

Was playing around with canvas and Hype AnimationFrame. Here is a canvas trail effects. Duo to some rounding errors in browsers there is a ghosting effect when fading. There are workarounds that mostly do a full flush and element repaint of the canvas but that’s overkill for this little experiment and certainly not “fun”.

4 Likes

Alternative version producing the above (moon trail around a planet over time, 2D flat):

``````/* start animation frame  */
hypeDocument.startAnimationFrame(function(time){

/* do some playful calculations */
var left = 300 + Math.sin(i*deg)*125;
var top = 200 + Math.cos(i*deg)*125;
i += 1;

hypeDocument.setElementProperty(elm, 'left', left);
hypeDocument.setElementProperty(elm, 'top', top);

var x = left + Math.sin(i*15*deg)*50 + 15;
var y = top + Math.cos(i*15*deg)*50 + 15;
hypeDocument.setElementProperty(moonElm, 'left',x-5);
hypeDocument.setElementProperty(moonElm, 'top', y-5);

if (oldX && oldY) {
drawLine(ctx, oldX, oldY, x, y);
}
oldX = x;
oldY = y;

});``````
2 Likes
1 Like
1 Like

Playing around with some old school math (perpendicular 2D vectors) and building a simple ribbon.

Here is a fixed version of the ribbon (previous screen had janky edges)…

2 Likes

I just found that I by accident created a famous pattern from the Lissajous Curves subset often produced by a double pendulum. Here is an interactive version https://academo.org/demos/lissajous-curves/

1 Like

There was really some dust on the School Math… either way the results are nice. Corrected formula:

``````	function PerpendicularClockwise( v1, v2) {
var x = v2.x - v1.x;
var y = v2.y - v1.y;
return {x:-y, y:x};
}

function PerpendicularCounterClockwise( v1, v2) {
var x = v2.x - v1.x;
var y = v2.y - v1.y;
return {x:y, y:-x};
}
``````

A lost Artist within you as always great stuff Max !

3 Likes

Would this work with Physics?

Yes although I am only using the position. The rest is constructed.

Added a download button and testing retina canvas with `context.scale(2,2);`.