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:
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/.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Animation with Processing.js</title> <script src="processing.min.js"></script> </head>
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.
<script type="application/processing" data-processing-target="myAnimation"> //PROCESSING.JS CODE HERE </script> <canvasid="myAnimation"></canvas>
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:
size(500,500); // size(width,height);
var xPos = 200;
var yPos = 200;
var dinoX = 140;
var dinoY = 120;
var xFactor = 1;
var yFactor = 5;
var starX = 0;
var starY = 0;
var star = loadImage("img/star.png");
var dino = loadImage("img/dragon.png");
var planet= loadImage("img/planet.png");
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).
draw = function() {
background(1, 0, 0.5);
// add planet and path
image(planet, 150,150, 200, 200);
We set the background to black using background(r,g,b) and add the static planet image near the middle.
//set the dino moving around the screen
if (dinoX> 350) {
xFactor = Math.random() * -5;
}
if (dinoX< 0){
xFactor =Math.random()*5;
}
if(dinoY> 300) {
yFactor = Math.random() * -3 ;
}
if (dinoY< 0){
yFactor =Math.random()*3;
}
dinoX+=xFactor;
dinoY+=yFactor;
image(dino,dinoX,dinoY,125,125);
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.
//dino shoots stars
for (vari = 0; i<Math.random()*10;i++){
if(starX> 250) {
starX = 0;
}
if (starY> 250) {
starY = 0;
}
starX++;
starY++;
fill(212, 120, 40);
image(star, starX+dinoX + Math.random() * 100, dinoY + Math.random() * 100, starX % 100, starX % 100);
}
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.
Tutorial Categories:
terrible animation… this is what js can do whit the “famous” html5 your are patetic
It is just an introduction of Processing.js, it is not meant to be something really cool and flashy
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.
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”?