Skip to content

Latest commit

 

History

History
29 lines (17 loc) · 1.38 KB

README.md

File metadata and controls

29 lines (17 loc) · 1.38 KB

Remaking 'The Golden Angle'

Demo - If you see an empty black screen, move your mouse around.

Audio Visualizer Demo - May take 5 - 10 seconds to load audio.

A Simple HTML5 Canvas Tutorial

When I first saw The Golden Angle by @Tucsky I marveled at the beauty of the animation, but was astonished by what seemed like an impossibly short program. In this repository I have deconstructed the code into a series of simple steps.

Hopefully after this you will feel confident about using the canvas API and be inspired to you create your own animations.

Setup

This project uses Minimalist App Starter which requires Node and Webpack. The code itself is written in ES6 / ES2015 transpiled with Babel.

Assuming Node is installed already:

npm install -g webpack webpack-dev-server
npm install
npm start

This will run the Webpack dev server which will refresh the page for us every time we modify and save our code.

Go to localhost:8080 in your browser to see the completed animation.