Creating a simple animation with Processing.js
Публикувано: 2018-10-05 16:53:39
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 https://processingjs.org/download/.
1 2 3 4 5 6 7 |
<!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.
1 2 3 4 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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).
1 2 3 4 5 6 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//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.
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: https://www.dimoff.biz. facebook, twitter