Skip to content

alex-wilmer/canvas-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Canvas Animation w/ Tutorial

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published