CANVAS RINGS PATTERN

Canvas Rings Pattern

Launch project

HTML5 / JavaScript Practice

An early project created to practice JavaScript and HTML. Uses HTML5 canvas to animate colored rings.

Ring start and end positions are calculated by passing a linearly increasing value into sine and cosine functions. Draw direction swaps if two ends meet, but are rounded in such a way to create a sort of bouncing / flickering effect.

Controls

Click: Change graph
Double click: Enter full screen

Open on Github

Date
March 29, 2012

Skills
HTML5, Canvas, JavaScript, Pattern