adnanullah / atmospherejs Goto Github PK
View Code? Open in Web Editor NEWA library for drawing atmospheric skylines using the canvas api
A library for drawing atmospheric skylines using the canvas api
# 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();
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:
See http://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices for more info.
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.
Make use of bezier curves to draw a single cloud shape rather than use compound shapes. This allows for better detailing/shadows/transparency etc.
The beizer curves used for moon rendering are a little off (see lhs of object rendered), need investigate why and how to fix.
Stick to the DRY principle!
Check commits against JSLint site to validate adherence to JS coding standards.
Currently, the x, y and ratio values have a different weighting per object need to standardise this behaviour. To ensure consistent rendering.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.