March 10, 2015 5:35 pm

Creating a simple animation with Processing.js

This tutorial aims to give you an overview of how to create animations in Processing.js which you could incorporate in JavaScript animations and games. We are going to create an animation of a Chinese dragon who moves and bounces off the sides of the screen and shoots stars all the time on a cosmic background. Here is an image:

Creating a simple animation with Processing.js

We only have to download Processing.js and include the script in our page and then we can use it anywhere we want. You can download it from http://processingjs.org/download/.

Here is how we add it. Then, to use it you add a script with type attribute set to “application/processing” and you give the canvas element you which processing.js to be applied to.

Afterwards, all the processing.js code in the script tag will be applied to the canvas with an id of myAnimation.

Inside the script tag, we set the size of the canvas:

We define some global variables. Notice that varimg= loadImage(“IMAGE PATH”) is used to load an image and later we display it using image(img, x,y, width, height).

Then we create the draw function (the function named draw() would be called iteratively all the time).

We set the background to black using background(r,g,b) and add the static planet image near the middle.

We check if the dragon has reached any of the edges of the canvas and if so – we reverse the direction and add new random speeds, otherwise we just add the x/y Factors to the current X and Y positions of the dragon (move it in whatever direction it is moving now and with whatever speed it was moving before). We then redraw the image of the dragon at the new X and Y coordinates.

Finally we make the dragon shoot stars. If the starX or Y is above 250 we set it to initial position otherwise we just create anew the stars with new coordinates and sizes dependent on the sum of the starX/Y coordinates,the dragon’s X/Y positions and a random number between 0 and 100.

We will create another tutorial on Processing.js soon that will cover animation of shapes and text.

 

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:
  • AS3

    terrible animation… this is what js can do whit the “famous” html5 your are patetic

    • Ivan

      It is just an introduction of Processing.js, it is not meant to be something really cool and flashy

    • Ivan

      This can be done with HTML5’s canvas but Processing.js provides a high-level drawing API when compared to the more low-level HTML5 canvas. Of course that it could be done with HTML5 since processing.js is a JavaScript library.

  • Hannah

    but if I wanted to take that java script code to a separate js file, what do I do with the attributes type=”application/processing” data-processing-target=”pjs”?