EaselJS / Canvas Example : 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. 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. Just click to toggle whether the drone follows your mouse (requires a browser with support for the HTML5 Canvas element).
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. In the mean time, here is the main gist of what is going on:
- I am drawing to a canvas, but telling EaselJS to not clear the canvas when it redraws. This makes it very easy to create a persistent design, and since I only have one Shape to track / render, it helps keep CPU usage down.
- On Mouse based devices, I use a second overlay canvas, and display the mouse point, and a line showing the direction the drone is moving in.
- The example has support for multitouch when running on iOS devices (works really well on the iPad). It also works on Android, but not as well as Android only supports single touch events in JavaScript and has some aliasing issues when drawing to Canvas.
Again, you can view the full version of the example here, and view and download all of the code from here.
I will be making some more posts over the next couple of days, going into more detail on the example, as well as some of the lessons I learned from making it. In the meantime, post any questions or comments below.
You should also check out http://github.com/digitalfruit/limejs if you are interested in such stuff. Bit different take on similar problems. Its even looks more like AS3 in some ways and also has good iPad support.
Tony
24 Jan 11 at 1:41 pm
What are your thoughts on http://www.okapijs.org/ ?
Joel Stransky
24 Jan 11 at 2:19 pm
thanks for sharing! :)
Not working on my iPhone 3GS with 3.2. Why?
Pablo Cabana
24 Jan 11 at 5:21 pm
@Pablo
Hmm, havent had a chance to test on 3.2, but it should work.
If you get a chance, can you enabled the debug console for Safari on iPhone:
See Enabling and Using Developer Tools in Safari on iPhone OS section at:
http://bit.ly/eSeyEp
and then run the example again, and let me know what, if any errors are listed there.
thanks…
mike chambers
mesh@adobe.com
mikechambers
24 Jan 11 at 9:21 pm
It is working on a Palm Pre while the EaselJS example mostly did not. Really cool!! (For me – no one else on earth does use a Palm Pre)
ArneO
25 Jan 11 at 6:31 am
[...] you run my EaselJS Drone Follow example from yesterday on any non-Android / iOS computer / device, you may notice that a graphic is drawn between the [...]
Layering Multiple Canvas Elements using JavaScript and EaselJS at Mike Chambers
25 Jan 11 at 12:54 pm
Sorry Mike, my ios is 3.1.3 .
I run the example with the debug mode and it did not throw any errors.
Here, on this page, it doesnt work at all.
At fullscreen, it starts only on the first touch, but it doesnt follow my touch. It goes to the most upper-left direction and stays there drawing indefinitely! :S
Pablo Cabana
26 Jan 11 at 1:41 pm
is there any way to get a mouseover event out of this? ive been looking everywhere.
Jack
22 Feb 11 at 12:45 pm
@Jack
mouseover for what? The Canvas, or individual elements within the Canvas?
mike chambers
mesh@adobe.com
mikechambers
22 Feb 11 at 2:05 pm