vector-sky

vector-sky is a collection procedurally generated animated vectors on a JS canvas.

Comment

Inspiration

vector-sky's main inspiration comes from rainy-mood, Momentum (Chrome Extension) and in general, 2D animation.

What it does

vector-sky stores a set of 700-800 random strokes as vectors and animates them by manipulating each vector position per frame. The animation is meant to mirror rain or starry night environments displayed on a HTML5 canvas.

How I built it:

  • used paper.js as a framework
  • created shapes through Shape objects and vector geometry
  • text as Type object 'animated' like shapes animated with onFrame( ) methods.
  • mouse cursor interacts with objects within a certain radii

Challenges I ran into:

  • so. many. unexpected token errors.
  • giving the vectors appearance of 'stars' or 'rain' through vector positioning
  • drawing vectors themselves; programs like Inkscape or Adobe Illustrator are taken for granted

Accomplishments that I'm proud of

  • being able to translate Python (CS61A) knowledge to JS
  • wouldn't mind as a wallpaper

What I learned

  • using frameworks
  • applications of abstraction data types
  • applications of Javascript

What's next for vector-sky:

  • reduce memory usage of generated vectors
  • convert to chrome extension for further use

Built With

Share this project:

Updates