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”. :wink:

Demo:
HypeAnimationFrame_CanvasFun.html

Download:
HypeAnimationFrame_CanvasFun.hype.zip

2 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) {
		fadeOut(ctx, '0.025', canvasElm.width, canvasElm.height);
		drawLine(ctx, oldX, oldY, x, y);
	}
	oldX = x;
	oldY = y;
	
});
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)…

Demo:
HypeAnimationFrame_CanvasFun_Ribbon.html

Download:
HypeAnimationFrame_CanvasFun_Ribbon.hype.zip

1 Like

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

Inspired by …
http://www.cimf.org.au/2018-festival-program

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};
    }

Demo:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits.html

Download:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits.hype.zip

A lost Artist within you :grinning: as always great stuff Max !

2 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);.
Also made code easier to read.

Demo:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits_Retina.html

Download:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits_Retina.hype.zip