alex-page / harmonograph.art Goto Github PK

After using the harmonograph for a while with HTML5 canvas, I think an SVG would be a nicer solution.

The harmonograph is currently drawn with lots of little lines between points, SVG should allow me to reduce the number of points and use bezier curves.

Some additional notes on the two options:

Canvas:

• The width of the canvas is not equal to the size of the harmonograph drawn
• This makes it hard to but the harmonograph in a location on the page
• You can right click the canvas and save it as an image
• Have to use rAF for each point being drawn, each point is a frame

SVG:

• SVG allows to reduce the number of dots and decimals and create a bezier curve between the points
• Save the harmonograph as an SVG
• The harmonograph can be drawn instantly
• The animation can be handled with CSS
• Retina by default
• https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74

Investigate using requestAnimationFrame