background preloader


Facebook Twitter

Js. EaselJS. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added / unstore() The Story. Creating spirals. I have been having fun playing around with JavaScript, the HTML5 Canvas element and EaselJS lately, and have been building a lot of small experiments.

Creating spirals

I wanted to share a simple one I created, which creates spiral designs. The example was pretty simple to put together, but is fun to play with, and can make some pretty nice patterns / spirals. I have uploaded a couple of images that I have created using the example: <! --more--> and put together a time lapse video showing a spiral being created: You can view the example at: I have also posted all of the code in my GitHub Repository. There is no UI to change settings, but you can tweak the designs you create by passing in some URL params, like so: /index.html? Minradius : The minimum radius of the circle that will be drawn.maxradius : The maximum radius of the circle that will be drawn.

If minradius and maxradius are different, the circle radius will tween back and forth between the sizes. Getting Started with EaselJS. One of the features of HTML5 that developers are most excited about is the Canvas element.

Getting Started with EaselJS

The Canvas element essentials provides a bitmap canvas for dynamically rendering shapes and bitmap graphics. It is very similar to the Flash Player's Bitmap and BitmapData classes. However, working with the Canvas element can be difficult, especially if you need to manage, update and or / animate multiple shapes and bitmaps. Unlike the Flash Player, the Canvas element does not have a concept of a display list or individual items to render.

Instead, it provides a single Canvas on which to draw, and it is up to the developer to determine what needs to be rendered and when. Grant Skinner has release a JavaScript library named EaselJS, which attempts to provide a Flash like DisplayList API in order to make it easier to work with the Canvas element. In this post, I will show how to get started animating content in the Canvas element using the EaselJS JavaScript library. SafariGoogle ChromeOperaFirefox. JS Game Engines. IMPORTANT!

JS Game Engines

Wikified version of this page may be found here. Feel free to edit. :) I put together a list of game engines available for JavaScript. It seems like there are heaps of those out there. And I'm sure I managed to miss some. Since reddit is great and everything I thought it might be cool to try to make this a community effort. If you don't have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like. :) Just to save some clicking around, here's the whole list: Game Engines 3D Engines Compared to full-fledged game engines these might be missing some features (AI, sound, game logic, network etc.) and you might need to use some other libs to provide these features. Physics - port of Box2D to JS Animation Audio SoundManager2 Graphics Canvas Note that size comparisons may not be accurate due to compression (some libs don't compress by default).

WebGL WebGLU - WebGL helpers Color Math. PixelFlow. If you have happen to have been watching my Flickr feed for the past week or two, you have probably noticed that I have been playing around with creating some graphics using Canvas and EaselJS.


What started as a simple EaselJS experiment, quickly morphed into an excuse to build a mini app / example and play around with some of the new HTML5 and CSS3 features. The example I created (named PixelFlow) is a simple example / app that allows you to choose an image, and then create some designs using the colors from the image. The core drawing functionality is built about the HTML5 canvas element and the EaselJS library. It also leverages CSS3 transitions and transformation for animating the UI elements (loading and unloading). You can play around with the example yourself at: <! I built the example with touch in mind, and thus it has support for touch on Android and iOS devices. Follow Drone. As I posted the other day, I have been spending some time playing around with dynamic drawing with the HTML5 Canvas element and EaselJS.

Follow Drone

I have put together quite a few examples and experiments and will be posting them (along with what I learned from them) over the next couple of weeks. The first example I want to share is a simple one which I call "follow". It basically uses EaselJS to create a snake like shape that follows you mouse. Here is a screen shot of a graphic I created with it: Here is an inline version of the example that you can play with. You can view the example fullscreen (which looks better) here. You can view, as well as download all of the code from my GitHub repository (released under an MIT License). Im going to write a series of posts over the next couple of days on a couple of things I learned while building this example.