HTML5 animation – patterns with loops

HTML5 animation – patterns with loops

1 10
HTML5 animation - patterns with loops

HTML5 animation – patterns with loops. I have prepared new HTML5 tutorial for you. This is not quite regular ‘html5 game development’ tutorial, but I like to show you another demonstration of html5 canvas animation. We will create patterns with loops and animate it. Today I have prepared nice demo with the sun and with three cars.

Here are our demo and downloadable package:

Live Demo

Ok, download the source files and lets start coding !


Step 1. HTML

Small code with canvas element (where we are going to experiment)

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 animation - patterns with loops | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header>
<h2>HTML5 animation - patterns with loops</h2>
<a href="https://www.script-tutorials.com/html5-animation-patterns-with-loops/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="contr">
<input type="radio" name="mode" onchange="bPlay = false" /><label>Pause</label>
<input type="radio" name="mode" onchange="bPlay = true" checked /><label>Play</label>
</div>
<canvas id="panel" width="800" height="600"></canvas>
</div>
</body>
</html>

Step 2. CSS

css/main.css

We are going to skip of publishing styles today again (no need).

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var bPlay = true;
var theSun;
var theCar1, theCar2, theCar3;
// define Sun constructor
function Sun(iCenterX, iCenterY, iRad, iRaysCnt, sRayColor, sSunColor){
this.iCenterX = iCenterX;
this.iCenterY = iCenterY;
this.iRad = iRad;
this.iRaysCnt = iRaysCnt;
this.sRayColor = sRayColor;
this.sSunColor = sSunColor;
this.iExAngle = 0;
this.bDir = true;
}
// Define Sun draw method
Sun.prototype.draw = function(){
// change angle
if (this.bDir) {
this.iExAngle += 0.05;
} else {
this.iExAngle -= 0.05;
}
if (this.iExAngle > 3 || this.iExAngle < -3) {
this.bDir = ! this.bDir;
}
// draw rays
ctx.beginPath();
for (var n = 0; n < this.iRaysCnt; n++) {
var iAng1 = ((Math.PI * 2) / this.iRaysCnt) * (n + 1);
var iAng2 = ((Math.PI * 2) / this.iRaysCnt) * (n);
var iAng3 = ((Math.PI * 2) / this.iRaysCnt) * (n+0.5);
var x1 = (this.iRad * Math.sin(iAng1 + this.iExAngle)) + this.iCenterX;
var y1 = (this.iRad * Math.cos(iAng1 + this.iExAngle)) + this.iCenterY;
var x2 = (this.iRad * Math.sin(iAng2 + this.iExAngle)) + this.iCenterX;
var y2 = (this.iRad * Math.cos(iAng2 + this.iExAngle)) + this.iCenterY;
var x3 = (2 * this.iRad * Math.sin(iAng3 + this.iExAngle)) + this.iCenterX;
var y3 = (2 * this.iRad * Math.cos(iAng3 + this.iExAngle)) + this.iCenterY;
ctx.moveTo(x1, y1);
ctx.lineTo(x3, y3);
ctx.lineTo(x2, y2);
}
ctx.closePath();
// fill rays with color
ctx.fillStyle = this.sRayColor;
ctx.fill();
// draw sun center
ctx.beginPath();
ctx.arc(this.iCenterX, this.iCenterY, this.iRad, 0, 2 * Math.PI, false);
ctx.fillStyle = this.sSunColor;
ctx.fill();
};
// define CarWheel constructor
function CarWheel(iCenterX, iCenterY, iRad, iCnt, iSpeed, sColor1, sColor2, sColor3){
this.iCenterX = iCenterX;
this.iCenterY = iCenterY;
this.iRad = iRad;
this.iCnt = iCnt;
this.iSpeed = iSpeed;
this.sColor1 = sColor1;
this.sColor2 = sColor2;
this.sColor3 = sColor3;
this.iAngle = 0;
}
// Define CarWheel draw method
CarWheel.prototype.draw = function(){
this.iAngle += 0.1 * this.iSpeed / 2;
this.iCenterX += this.iSpeed;
// draw wheel details
ctx.beginPath();
for (var n = 0; n < this.iCnt; n++) {
var theta1 = ((Math.PI * 2) / this.iCnt) * (n + 1);
var theta2 = ((Math.PI * 2) / this.iCnt) * (n);
var x1 = (this.iRad * Math.sin(theta1-this.iAngle)) + this.iCenterX;
var y1 = (this.iRad * Math.cos(theta1-this.iAngle)) + this.iCenterY;
var x2 = (this.iRad * Math.sin(theta2-this.iAngle)) + this.iCenterX;
var y2 = (this.iRad * Math.cos(theta2-this.iAngle)) + this.iCenterY;
ctx.moveTo(this.iCenterX, this.iCenterY);
ctx.bezierCurveTo(x1, y1, x2, y2, this.iCenterX, this.iCenterY);
}
ctx.closePath();
// fill
ctx.fillStyle = this.sColor2;
ctx.fill();
// stroke
ctx.lineWidth = 1;
ctx.strokeStyle = this.sColor1;
ctx.stroke();
// draw center
ctx.beginPath();
ctx.arc(this.iCenterX, this.iCenterY, this.iRad/2.5, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = this.sColor3;
ctx.fill();
};
// define Car constructor
function Car(iPosX, iPosY, iSpeed, iWidth, iHeight){
this.iPosX = iPosX;
this.iPosY = iPosY;
this.iSpeed = iSpeed;
this.iWidth = iWidth;
this.iHeight = iHeight;
this.theWheel1 = new CarWheel(this.iPosX + 41, this.iPosY + 52, 30, 8, this.iSpeed, 'black', 'brown', '#5e5e5e');
this.theWheel2 = new CarWheel(this.iPosX + 191, this.iPosY + 52, 30, 8, this.iSpeed, 'black', 'brown', '#5e5e5e');
// load image for car
this.imageObj = new Image();
this.imageObj.onload = function(){};
this.imageObj.src = 'images/car.png';
}
// Define Car draw method
Car.prototype.draw = function(){
this.iPosX += this.iSpeed;
if (this.iPosX > ctx.canvas.width /*+ this.iWidth*/) {
this.iPosX = -this.iWidth;
this.theWheel1.iCenterX = this.iPosX + 41;
this.theWheel2.iCenterX = this.iPosX + 191;
this.theWheel1.iAngle = 0;
this.theWheel2.iAngle = 0;
}
// draw car image
ctx.drawImage(this.imageObj, this.iPosX, this.iPosY, this.iWidth, this.iHeight);
// and animated wheels
this.theWheel1.draw();
this.theWheel2.draw();
};
// drawing functions
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
if (bPlay == 1) {
clear(); // clear canvas
// draw animated objects
theSun.draw();
theCar1.draw();
theCar2.draw();
theCar3.draw();
}
}
function getRand(x, y) {
return Math.floor(Math.random()*y)+x;
}
// binding onload event
if (window.attachEvent) {
window.attachEvent('onload', main_init);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
main_init();
};
window.onload = newonload;
} else {
window.onload = main_init;
}
}
function main_init() {
// create canvas and context objects
canvas = document.getElementById('panel');
ctx = canvas.getContext('2d');
// initialization of animated objects
theSun = new Sun(725, 100, 25, 10, 'red', 'yellow');
theCar1 = new Car(0, 300, 4, 226, 66);
theCar2 = new Car(100, 400, 3, 226, 66);
theCar3 = new Car(200, 500, 2, 226, 66);
setInterval(drawScene, 40); // loop drawScene
}

Exactly 200 lines of code :-) Here you can see three kind of objects (classes): Sun, Car and CarWheel. Each type have own constructor, own set of properties and Draw function. Sun rays we will draw as triangles. Car itself, consist of image and two wheels. Sun and Wheels uses patterns with loops. To create the sun (as example) we can create a loop with X iterations (where X is amount of rays or sectors). And, we will draw each ray separately (in loop).


Live Demo

Conclusion

Welcome back to read something new and interesting about HTML5. Good luck in your projects.

SIMILAR ARTICLES

Bootstrap Forms

0 10
jQuery Mobile Lesson 6

0 5

1 COMMENT

  1. The only word is – awesome!!! I love animation and have worked a lot in jQuery. I have recently started learning HTML5. I saw ur work. They are really simple yet so effective. Keep posting good stuff.

Leave a Reply