The Highlander Blog » Alex

JavaScript animation – using EaselJS pt 2

Alex — Fri, 06 Jan 2012 16:07:36 +0000

In this post I am continuing my foray into Easel.js. Here I am now actually displaying and animating pictures. So this post is about JavaScript animation – using EaselJS pt 2. We will be making this…

EaselJS animation v1

…and it will be the car that is moving across the screen.

Again you need to make up a simple html5 page and link to the easljs library…

First you need to create a stage and link it to your canvas element…

var page = document.getElementById(“canvas”);
var stage = new Stage(page);

Here my canvas element has an id of canvas. The stage variable will hold all of my items to view and animate, and it is linked to the canvas element by Stage(page). Now I can start adding images. The images I use , of course, can just be replaced by any image you wish. To use easeljs to show an image…

var sun= new Bitmap(“sun.png”);

Just create a new variable and make it a new Bitmap object, with the url of your image inside. Once you have your image you can adjust its x and y properties, and its scale properties…

tree1.scaleX = tree1.scaleY = 0.4;
tree1.x = 100;
tree1.y = 100;

again, this will be familiar to those of you who know ActionScript 3. To finally see the image we need to use addChild()…

stage.addChild(sun);

…this last is vital, as without it we have setup our image, position, size, etc, but we will not see it until we use addChild().

We can then repeat this as many times as we like for each image we wish. However, before we run this we need to do a couple more things. First we need to set the frame rate, and also we need to tell easeljs to update the canvas as we are moving objects.

This is done like so…

Ticker.setFPS(60);
Ticker.addListener(window);

The last line tells easeljs to look for a function called tick, and it is within this function that we update our canvas…

function tick()
{
stage.update();
carMan.x-=1;
}

I am not doing anything fancy with the animation, just changing x by 1 pixel, but it looks pretty good. In further posts I will discuss more advanced movement, easing, etc, but for now I think it works pretty well. You do not have to write too much code, and it all fits together very nicely. Here is the full code for the example…

easel_test

Have a play with the code and see what you can come up with!

JavaScript animation – using EaselJS

Alex — Wed, 21 Dec 2011 22:55:40 +0000

Animating with JavaScript is relatively easy, however if you are used to ActionScript 3 it can be particularly painful to go back to learn how JavaScript does things, compared to how AS3 does things. Enter EaselJS. This is a new JavaScript library that aims to make animating and controlling objects within a web page easy – particularly if you are used to AS3.

It is built by Grant Skinner and can be found here…

http://easeljs.com/

In this series of tutorials I aim to investigate JavaScript animation using EaselJS and see just exactly how easy it is to use and what it can do. At the moment my development environment is AptanaStudio3, but you can of course use DreamWeaver or any other IDE that you wish.

First download EaselJS and find the easel.js file (it should be in the lib folder) and install that in the directory of your choice. Then create a new html file and open it up. I will be creating html5 pages, and using the canvas tag, so all my animation and drawing will be done within a canvas tag with the id of canvas. For today’s post I will just create some text and insert it into my element, but in further posts I will bring in graphics and start to animate them. Bear in mend that EaselJS is built to deliberately mimic (loosely) ActionScript’s display list.

Within your html page link to the easel.js file…

Within your html add the following…

Now, when I first started playing around with this, I initially put a css rule like so…

#canvas
{
background-color: rgba(235,217,118,0.3);
width:1024px;
height:768px;
}

…and I left out the inline styling. This had the unfortunate effect of scaling all the canvas elements and making them look awful. So put your width and height inline and your objects will display fine.

Once you have set your html page you just have to write something like…

This function I called from the body using onload…

=“init();”>

…and here is the result…

easel test1

Nothing complicated, but very easy to create. Just a couple of points though…

1] We are creating pixels, not vectors
2] As a result this is not text, it is not selectable and they are not objects that we can control – it is just one block of pixels.

Looking at the JavaScript code you can see how similar it is to AS3. First we have to get the element that we are writing in using getElementById, and then we create a new Text object. Again the options are very straightforward. For the full documentation check here…

http://easeljs.com/docs/Text.html

As you can see the Text object has three [optional] arguments – the text to display, the font to display, and the colour to use. What is nice is that you can use standard CSS for the font and colour arguments. Once you have set up the Text object, just create a stage, and pass it the canvas id, telling EaselJS that the stage is the canvas element. Once all that is done you display the Text object by using addChild(). The stage before means add the child to the stage, and within the parentheses is the object to add, our text object. Obviously you can do this multiple times and you can also position the text object by using its x and y properties.

All-in-all I find this library very easy to use, particularly as I have a lot of AS3 experience and it quite often drives me nuts trying to find a way in JavaScript to do what I normally do in AS3. The library is easy to use, and, especially when we come to animation, fun. Later on in this series we will also cover SoundJS and TweenJS, two sister libraries for playing with sounds and tweening.

In the next post of this series I will show you how to load graphics into the canvas element and animate them.

Landscapes created in Blender

Alex — Sat, 15 Oct 2011 11:20:03 +0000

Just a quick post to show you some of the landscapes that I have been creating in Blender recently. I have been going through the Nature Academy series of courses (which you have to pay for, it is closed now but I believe it will re-open soon), created by Andrew Price (at blenderguru.com).

Andrew Price has created some fantastic tutorials, and I would heartily recommend that you check out his web site. His latest offering, the Nature Academy series, is all about creating natural landscapes – rocks, trees, grass, lakes, mountains, and so on. Each tutorial (and I am only half way through so far) is chock full of interesting techniques. I have found it invaluable going through the process several times in order to create landscapes in Blender – even though each landscape is different.

So here are some of my efforts so far…

Grass landscape

Rock landscape

Plant landscape

Tree example

The only downside is that I keep on tweaking and tweaking, and saying to myself just a little change here, add some more there – it takes a real effort for me to say Stop! – scene finished

Which web technologies?

Alex — Mon, 03 Oct 2011 10:00:58 +0000

In a flash class recently I was asked which technologies some one needs to be aware of and competent with when dealing with web design. In answer I quickly knocked a simple ideas chart to showcase which web technologies you need to know, and also some notes about where things are/were and where they are going…

Which web technologies

The big thing of course is html5 and Flash. As you can see from the diagram, everything Flash can do (broadly speaking) can be done in HTML5, with the caveat that HTML5 covers CSS3/JavaScript/HTML5 and things like WebGL.

The main sticking point at the moment is that Flash is a GUI and there really is no GUI that covers the things in HTML5, however, things are changing! The next year or so is going to be very interesting as regards HTML5 and web design I feel.

To show just how, here are some links to some of the newcomers that will help you animate and draw using HTML5 technologies…

Adobe Edge (beta) - http://labs.adobe.com/

Wallaby – for converting your Flash files into html – very basic, but interesting - http://labs.adobe.com/

The following are not HTML5 specific, but I think are well worth mention in their own right as they make life very easy for design and sketching out your web pages…

Balsamiq - http://balsamiq.com/

Napkee - http://www.napkee.com/

Do not forget of course that we are also talking about using HTML5 to creating some fantastic tablet and smartphone apps, so do not think of just web pages, but also iPad and iPhone apps as well. Have a look at these web-based apps…

scribd - http://www.scribd.com/

aviary - http://www.aviary.com/

google body - http://bodybrowser.googlelabs.com/

CSS3maker - http://www.css3maker.com/

…and so on. There are many apps out there, with more coming. Let me know if you have come across any interesting ones and I will add them to the list.

Learning three.js

Alex — Fri, 23 Sep 2011 17:01:45 +0000

In my foray into the world of WebGL, I came across three.js, a JavaScript library for doing 3D in a web browser, with no plug-ins needed. It can render in three types – WebGL, SVG, or directly into the canvas. So I thought I would go through Three.js and see how easy it is to create a 3D scene. So, in this my first post into learning Three.js I will just create a simple shape – a sphere.

In the first few examples I will stick to very simple code, so as to make it easy to concentrate on the actual important stuff – Three.js. So I will not be using JQuery, and I will not be using any other libraries - just Three.js. Eventually I will introduce some more libraries for particular purposes, but for now, all you need is to care a simple html page, and download the three.js library and link to it. You can download the library from here…

https://github.com/mrdoob/three.js

You will also need a WebGL enabled browser – basically the latest version of Chrome, Safari, or FireFox should do. If you are not sure if your browser can run WebGL, go to this website…

http://webglreport.sourceforge.net/

…this will tell if you can run WebGL. Once you have a browser that can run WebGL, load up a simple web page and get ready to code. This is what we are going to create…

simple sphere

Here is a simple html setup for this example…

=“en”>

Three js example 1
=“utf-8″>

=“myshape”>

…it is HTML5, but any simple html code will do. We have linked at the top to the Three.js library, and we will be writing our code in the script tag lower down the page. There are a lot of very good examples (much more advanced) at the Three.js site, so have a look and see exactly what it is capable of, but at the moment we will start very simply. I have adapted this example from various sources, and simplified it to make it more understandable. So, on to the JavaScript.

First we need to set up some variables…

var myworld;//this holds the element that we will use to draw in
//this sets the canvas size.
var WIDTH = 1200, HEIGHT = 500;

// camera attributes
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

These variables set the width and height of the drawing area (our world you might say), the camera details (viewing angle, aspect, etc) Next we populate the variable my world…

myworld = document.getElementById(“myshape”);

Now, if you look at the html, you will see that I had already created a div element with the id of myshape. It is this that we will draw into. However, you could also do this…

myworld =document.createElement(“div”);
document.body.appendChild(myworld);

This creates a brand new element and then appends it to the current document body. Both will work, however a word of warning. Create a div element, not a canvas element, as Three.js creates a new canvas element to draw into inside the created element. So if the created element is a canvas element, you then get another canvas element inside, and then nothing gets rendered.

Next we need to create a renderer, a camera, and a scene…

var renderer = new THREE.WebGLRenderer();
//I am choosing the WebGL renderer here, but you have others to choose from
var camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR);
//these variables have been set at the top of our script
var scene = new THREE.Scene(); //create a new scene
// the camera starts at 0,0,0 so we need to pull back
camera.position.z = 200;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);

Next we need to set up a material to use with our shape. I will use a MeshLambertMaterial, but check out what happens when you use a MeshBasicMaterial! Looks completely flat!

//create materials
var material = new THREE.MeshLambertMaterial({color: 0xCC0000});
//var material = new THREE.MeshBasicMaterial({color: 0xCC0000}); //gives you just a flat colour – ugly

Next we need a new mesh, and we will use a spherical geometry. In future posts I will try out the different geometries and eventually I will get on to load complete 3D scenes created in Blender.

// create a new mesh with sphere geometry
var radius = 50, segments = 16, rings = 16;
var mesh = new THREE.Mesh( new THREE.SphereGeometry( radius, segments, rings ), material );
scene.addChild(mesh);

Now we need to add our scene into our DOM element…

// attach the render-supplied DOM element
myworld.appendChild(renderer.domElement);

If you were to load this file now you wold see nothing. There is one more thing that we need and that is a light source.

var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 50;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.addLight(pointLight);
// render our scene
renderer.render(scene, camera);

All you see is a simple red and black sphere. Nothing terribly exciting, but now try changing the pointLight position, the radius, colour, and camera position. This will give you a good idea of how to setup a simple WebGL (or whatever renderer you use) scene.

In the next tutorial I plan to add more shapes, along with buttons to allow you to choose which shapes to draw.

threejs1

More JavaScript libraries

Alex — Fri, 16 Sep 2011 14:56:58 +0000

Just a quick update to my JavaScript libraries collection. Here are some more JavaScript libraries – things just seem to be getting better and better as far as JavaScript and HTML5 and the web are concerned!

three.js – A brilliant lightweight 3D engine (works with WebGL, amongst other things)

https://github.com/mrdoob/three.js/

newton.js – box2d plus raphael (does not seem to be released yet, but looks fantastic)

Dmitry Baranovskiy: newton.js: box2d + Raphael

Runtime: 5:48
Views: 2,809

paper.js - The Swiss Army Knife of Vector Graphics Scripting (looks like great fun)

http://paperjs.org/about/

processingjs - Processing.js is the sister project of the popular processing visual programming language, designed for the web – superb for data visualisations

http://processingjs.org/

box2d js - a JavaScript port of the box2d physics engine

http://box2d-js.sourceforge.net/

scene.js – a WebGL scene graph library – some lovely examples on the web site

http://scenejs.org/

Anyone got anymore?

What is WebGL?

Alex — Fri, 09 Sep 2011 09:16:18 +0000

I have recently been taking an interest in WebGL, so I thought I would post some information about WebGL here, and also add some links to some of the examples that I have found.

What is WebGL? WebGL is a graphics library that extends JavaScript to allow it to generate some truly spectacular 3D graphics, within the browser, with no plug-ins needed. It uses the computer’s GPU (Graphics Processing Unit), and as such is a fairly low-level language (read: complicated).

WebGL interactive water example / (http://madebyevan.com/webgl-water/)

WebGL Water Simulation

Runtime: 1:14
Views: 83,693

It uses the canvas element (html5) and the webgl context of that element (if you know anything about drawing with the canvas element, the context is how you access the particular api for drawing in either 2D or WebGL).

You can use WebGL now in Safari, Firefox, and Chrome. But not Opera or Internet Explorer, and not on smart phones or tablets yet.

Although the actual language looks daunting, not only can you create superb results, but there are various JavaScript libraries that will use WebGL to render their output…

scenejs (WebGL scene library) http://scenejs.org/
processingjs (An open programming language for creating animations etc without using Java or Flash) http://processingjs.org/
threejs (A lightweight 3D JavaScript engine that can render using the

Here are some examples of WebGL in action…

BioDigital Human

(http://www.biodigitalhuman.com/default.html)

HelloRacer (using three.js)

(http://helloracer.com/webgl/)

Interactive water example

(http://madebyevan.com/webgl-water/)

WebGL filters

(http://evanw.github.com/webgl-filter/)

There are many more (if you know of any please let me know).

You can even use Blender to create a scene and output it to something that can be used by scene.js and so basically create a 3D environment in Blender for use on a web page.

In future posts I am going to look into these topics and see what can be created and I will be posting the results here.

Animating with CSS and JavaScript using Adobe Edge

Alex — Wed, 31 Aug 2011 16:07:05 +0000

With the advent of HTML5 and CSS3, it is possible to create lovely animations using these technologies, along with JavaScript. The problem is though, you basically have to hand code everything. There is, as yet, no application that gives you a graphical interface (á la Flash) that allows you to drag and drop items, animate them just choosing options from a menu, and so on.

However, in the last year or so, new applications have been appearing, that are starting to give you a drag and drop environment that allows you to do just that. Adobe has recently released a new application called Edge (in beta from only) on their labs web site (labs.adobe.com). So now you can start animating with CSS and JavaScript using Adobe Edge, and using an interface that is drag and drop, guy etc.

It is a very simple application, and is still in beta stage, but it is definitely worth downloading to have a look and see what Adobe are up to.

To get started, just download the application, double-click to install it and open it up. It has a simple interface, you can import items easily, and each item that you import or create has its own layer in the timeline which is nice. Here is the interface…

Edge interface

Although the importing is basic (gif/png/jpg/svg), it covers the standard web formats, and the inclusion of svg is a very nice touch.

You can create items, but only rectangles and rectangles with round edges, and text. That is it.

edge tools

However animating is very easy – you can have keyframes for opacity, scaling, width, height, rotation, skewing, position, etc. And once you have added the keyframes, you can just click on the animation in the timeline and set it to one of 28 types of easing. All very easy to select and choose. You have a properties panel…

edge properties

edge properties2

…and from here you can choose to insert your keyframes for your various properties. Once you have done that, selecting an animation in the timeline then allows you to assign an easing to to it very simply…

edge easing

All in all I would recommend anyone with an interest in using CSS/JavaScript/HTML to animate things to download this application and take it for a spin.

Modelling a vehicle within Blender – final result

Alex — Wed, 22 Jun 2011 11:46:58 +0000

I am a big fan of the web site blendercookie.com, and they recently came out with a lovely tutorial series by Jonathan Williamson (using artwork from David Revoy), the Vehicle Modelling Series.

There are over 15 hours of movies, taking you through the process of modelling a Gyrocopter, from a series of pictures. It took we a while to go through all the videos, but it was well worth it. Here is a still of my final result…

Final gyrocoptor render

The series goes through a lot of modelling, and at the end of it I came away with a much better appreciation of Blender, its tools, and how to model. I would recommend this series to anyone who wishes to become a better modeller.

I now have a few more techniques to use when modelling, and also a better understanding of the steps I need to go through when modelling.

The model is far from perfect, I made loads of mistakes . But at least now I can see what the problems are and I can have a good go at fixing them. After going through this series it has me wanting go back to other series that I have bought and finish them to see just how well I do. In the ensuing months I will do just that and I will post the results. Here is the timelapse movie, along with the final render…

Modelling a Vehicle with Blender

Runtime: 0:33
Views: 300

All in all I am quite happy with the result.

Latest Blender 2.5 tutorials and DVDs

Alex — Sat, 11 Jun 2011 09:26:49 +0000

Here is a round-up of some of the latest Blender 2.5 tutorials and DVDs that I have come across. I am slowly going through them, and when I finish them I will upload the final renders and .blend files to share with you, but it will take me a while to get through them all.

In the meantime, here is the list, and below some of them is the current render that I have created after going through the tutorial.

Blenderella (http://www.blender3d.org/e-shop/product_info_n.php?products_id=133)

Creating realistic outdoor lighting (http://www.blenderguru.com/how-to-create-realistic-outdoor-lighting/)

Environment still 63

Blender Cookie Vehicle Modelling Series (http://cgcookie.com/vehicle-series/)

vehicle still 38

vehicle still 39

cgmasters.net – Rigging your ninja – (http://www.cgmasters.net/training-dvds/character-creation-rigging/) n.b. due out in July

cmifx.com – Rigging your mammoth (http://cmivfx.com/tutorials/view/302/Blender+Massive+Mammoth+Masterclass%3A+Rigging+V1)

Have fun!