MaxZieb
(Loves Hype)
August 23, 2019, 10:46am
1
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”.
Demo:
HypeAnimationFrame_CanvasFun.html
Download:
HypeAnimationFrame_CanvasFun.hype.zip
4 Likes
MaxZieb
(Loves Hype)
August 23, 2019, 11:01am
2
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;
});
2 Likes
MaxZieb
(Loves Hype)
August 23, 2019, 2:12pm
7
Playing around with some old school math (perpendicular 2D vectors) and building a simple ribbon.
MaxZieb
(Loves Hype)
August 23, 2019, 2:50pm
8
Here is a fixed version of the ribbon (previous screen had janky edges)…
Demo:
HypeAnimationFrame_CanvasFun_Ribbon.html
Download:
HypeAnimationFrame_CanvasFun_Ribbon.hype.zip
2 Likes
MaxZieb
(Loves Hype)
August 23, 2019, 3:02pm
9
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/
MaxZieb
(Loves Hype)
August 23, 2019, 9:07pm
10
1 Like
MaxZieb
(Loves Hype)
August 23, 2019, 9:28pm
11
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};
}
MaxZieb
(Loves Hype)
August 23, 2019, 10:06pm
12
h_classen
(Hans-Gerd Claßen)
August 24, 2019, 9:54am
14
A lost Artist within you as always great stuff Max !
3 Likes
jonathan
(Jonathan Deutsch)
August 25, 2019, 12:02am
15
Would this work with Physics?
MaxZieb
(Loves Hype)
August 25, 2019, 4:50am
16
Yes although I am only using the position. The rest is constructed.
MaxZieb
(Loves Hype)
August 25, 2019, 11:49am
17