Coder Social home page Coder Social logo

atmospherejs's Introduction

# AtmosphereJS
--------------------------

Welcome to the AtmosphereJS Wiki/FAQ!

## What is AtmosphereJS?
AtmosphereJS is a simple HTML5/Canvas API drawing library that allows users to create sky lines and atmospheric effects.

### So... what's available?
Not much at the moment, creation of:

* Scalable clouds
* Scalable sun
* Scalable moon

with more features are planned for the future (see below).

### Why create it?
I've created AtmosphereJS as a learning exercise, to help improve my knowledge of HTML5, JavaScript frameworks and the Canvas API.

### What's planned?

The following items are currently planned: 

* Stars 
* Rain 
* Animation

## Getting started

Add the atmosphere.js file to your html file. The following code snippet provides an example of usage:

var xPos = 100, yPos = 150, scale = 1.0;
var cloud = new Atmosphere.Cloud(context, x, y, ratio); // Where context is a 2d context provided by a canvas object.
cloud.draw();

atmospherejs's People

Contributors

adnanullah avatar

Stargazers

Yuri Matheus Gomes avatar  avatar

Watchers

 avatar

atmospherejs's Issues

Implement canvas per object to optimise redraw behaviour

Currently a reference to the canvas context is being passed into each library function. This means all objects share the same context which can potentially cause a performance bottleneck.

TODO:

  1. Change the function signatures to accept a DOM node instead of a Canvas object
  2. Dynamically create a Canvas node per object and store the reference to that node internally.

See http://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices for more info.

Modularise each drawable component

Each component of AtmosphereJS should be a plugin module, similar to the way YUI and JQuery allow custom extensions to be written. This will also help keep file sizes down as you should only need to include items you're referencing.

This will probably require some re-architecture of library and should probably be tied to a new milestone.

Tweak moon rendering

The beizer curves used for moon rendering are a little off (see lhs of object rendered), need investigate why and how to fix.

Consistent usage of values

Currently, the x, y and ratio values have a different weighting per object need to standardise this behaviour. To ensure consistent rendering.

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.