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:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/script.js
Conclusion

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

Live Demo

Conclusion

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