HTML5 animation – patterns with loops

Dec 3, 2011

1 28580

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

[sociallocker]

download in package

[/sociallocker]

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).