https://github.com/alex-wilmer/canvas-animation

Canvas Animation w/ Tutorial
https://github.com/alex-wilmer/canvas-animation

Last synced: about 1 month ago
JSON representation

Canvas Animation w/ Tutorial

• Host: GitHub
• URL: https://github.com/alex-wilmer/canvas-animation
• Owner: alex-wilmer
• Created: 2015-12-03T07:43:12.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-19T20:25:03.000Z (over 8 years ago)
• Last Synced: 2024-11-01T09:51:42.903Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 3.7 MB
• Stars: 27
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Remaking 'The Golden Angle'

**[Demo](http://alex-wilmer.github.io/canvas-animation/)** - If you see an empty black screen, move your mouse around.

**[Audio Visualizer Demo](http://45.55.239.144:8000/)** - May take 5 - 10 seconds to load audio.

### A Simple HTML5 Canvas Tutorial

When I first saw [The Golden Angle](http://codepen.io/tucsky/pen/QjmpBw) by [@Tucsky](https://twitter.com/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](https://github.com/alex-wilmer/app-starter) which requires [Node](https://nodejs.org/en/) and [Webpack](https://webpack.github.io/). The code itself is written in ES6 / ES2015 transpiled with [Babel](https://babeljs.io/).

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.

#### [Read the full tutorial here.](https://github.com/alex-wilmer/canvas-animation/blob/master/tutorial/full-tutorial.md)