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/
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 
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);.
Also made code easier to read.
Demo:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits_Retina.html
Download:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits_Retina.hype.zip
ZOING!!!
1 Like
BTW here is the file for the fixed perpendicular vector. Although I really like the faulty one too, as it has the illusion of a spinning airplane trail.
Download:
HypeAnimationFrame_CanvasFun_Ribbon_fixed.hype.zip
1 Like
Max, this looks amazing! In the ribbon experiments you have a little circle that the line follows. The ribbon is part of the canvas, but the circle is "outside" the context. Is it possible to add the circle (or other element created in the hype scene) to the canvas? I suppose the canvas to serve as a wrapper.
Reason for asking is: canvas.captureStream, which could allow to output the animation as a video. But at the moment it's rendering only the ribbon, not the circle.
Thanks
Wow! These experiments are impressive. Visual art in movement 
Using Hype Animation Frame to play with the Euler Spiral
HypeAnimationFrame_EulerSpiral1.hype.zip (16,2 KB)
HD-Version (basic values):
Tweaking the values to slightly change over time creates beautiful patterns:
4 Likes