Coder Social home page Coder Social logo

seansmyth / shooting-stars Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jh3y/shooting-stars

0.0 2.0 0.0 208 KB

HTML5 Canvas play around to create shooting stars effect

Home Page: http://jh3y.github.io/shooting-stars

JavaScript 24.58% CoffeeScript 57.94% HTML 15.45% CSS 2.03%

shooting-stars's Introduction

Shooting-stars

Shooting stars is an experiment with creating particle rendering systems with the HTML5 Canvas.

You can see a demo of this at jh3y.github.io/shooting-stars.

I wanted to create something simple instead of using CSS animations on DOM element as I was previously with a different implementation.

This isn't a released piece of code but if you're interested in playing with it you can by importing the shooting-stars.js file into your page and then adding something like the following code to your javascript.

  var config = {
    id: 'app',
    particleLife: 300,
    particleRenderProbability: 0.5,
    amount: 50,
    resizePoll: 250,
    star: {
      size: {
        upper: 50,
        lower: 25
      },
      rotateLimit: 90,
      points: 5,
      innerRadius: 0.5,
      borderColor: '#000',
      fillColor: 'red',
    }
  };

  myCanvas = new ShootingStars(config);
  myCanvas.flushPool();
  myCanvas.render();

This relies on there being a canvas element in your DOM with the ID app. You can of course change this as long as that canvas element exists.

I'm just passing in a config to the function and the options included are as follows

  • id: string - the ID of the canvas element to be used.
  • particleLife: int - the lifespan of each star in frames.
  • particleRenderProbability: int - the probability of rendering a new particle in each frame if the amount limit hasn't been reached (must be from 0 - 1, eg. 0.95).
  • amount: int - the amount of stars to be rendered on the canvas.
  • resizePoll: int - the amount of ms for canvas to debounce resizing on viewport resize.
  • star: obj - defines characteristics of stars that are rendered.
    • size: obj - defines the upper and lower bound size of the star in pixels.
      • upper: int - defines the upper bound size.
      • lower: int - defines the lower bound size.
    • rotateLimit: int - defines the maximum rotation that stars will make during render.
    • points: int - defines the number of points that a star will have.
    • innerRadius: float - defines the size of the inner radius of the star. For example; an inner radius of 0.5 means that the inner radius will be (starSize / 2) * 0.5.
    • borderColor: string - defines the border color. Can be any valid CSS color representation.
    • fillColor: string - defines the fill color. Can be any valid CSS color representation.

##Contributing If you'd like to get involved or have any issues with the implementation or need some pointers feel free to leave an issue or tweet me @_jh3y!

##License MIT

@jh3y 2015

shooting-stars's People

Contributors

jh3y avatar

Watchers

James Cloos avatar Sean avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.