Using Javascript and HTML canvas to make Animated Interactive Backgrounds

Sharing is caring!

What is a canvas?
A canvas is similar to a real life physical canvas used by painters. It is basically a space that can be used to draw on. Unlike a real canvas an HTML canvas can have the image data added and removed with ease. Canvases are usually used when you want to have some form of interaction with the user or you want the users computer to do all the computation instead of the server.
What is Javascript?
If you don’t know what Javascript is then I don’t even know why you’re here. Where do you live? where do you come from? is this your first time on this planet? All jokes aside Javascript is just a scripting language used a lot on websites that want some computation done on teh users computer instead of the server.
Create and Inject a canvas
The first thing we need is to create a canvas. We could create a canvas in HTMLthen just get a reference to it in javascript or we can create on in Javascript and inject it into the webpage. I will be showing you the inject method as this allows you to add this script to any HTML page without the need for the HTML to be edited. We add 4 variables for storing information used in other functions and then the setupCanvas function itself. The comments should explain what each part of the code does.

var w = window.innerWidth; // ge the width of the browser window
var h = window.innerHeight; // get the height of teh browser window
var bgcan // something to store our canvas
var ctx // something to store our canvas context

function setupCanvas(){
bgcan = document.createElement(‘canvas’); // make a new canvas object
bgcan.id = ‘bgcan’; // give it a name

// set the webpage body’s margin and padding to 0 (no gap between webpage contents and browser wall)
document.body.style.margin = “0”
document.body.style.padding = “0”
document.body.appendChild(bgcan); // adds the canvas to the webpage body

bgcan.width = w; // set width of canvas to window width
bgcan.height = h; // same as above for height
bgcan.style.position = “fixed” // set position (absolute,fixed)
bgcan.style.top = “0” // pixels from top
bgcan.style.left = “0” // pixels from left
bgcan.style.zIndex = “-99” // place behind
ctx = bgcan.getContext(“2d”); // set canvas to 2d mode
}

12345678910111213141516171819202122

var w = window.innerWidth; // ge the width of the browser windowvar h = window.innerHeight; // get the height of teh browser windowvar bgcan   // something to store our canvasvar ctx     // something to store our canvas context function setupCanvas(){    bgcan = document.createElement(‘canvas’); // make a new canvas object    bgcan.id = ‘bgcan’; // give it a name     // set the webpage body’s margin and padding to 0 (no gap between webpage contents and browser wall)    document.body.style.margin = “0”     document.body.style.padding = “0”    document.body.appendChild(bgcan); // adds the canvas to the webpage body     bgcan.width = w;    // set width of canvas to window width    bgcan.height = h;   // same as above for height    bgcan.style.position = “fixed”   // set position (absolute,fixed)    bgcan.style.top = “0”   // pixels from top    bgcan.style.left = “0”  // pixels from left    bgcan.style.zIndex = “-99”  // place behind     ctx = bgcan.getContext(“2d”);   // set canvas to 2d mode}

The code above will add a canvas the same height and width of the browser window to the web page when we call it with setupCanvas()
If the browser windo is resized the canvas will no longer be the correct size and this is not what we want. So we will add a resize finction for when this happens:

// if window is resized do canvas too
function resize(){
w = window.innerWidth;
h = window.innerHeight;
bgcan.width = w;
bgcan.height = h;
}

// if window is resized do canvas toofunction resize(){    w = window.innerWidth;    h = window.innerHeight;    bgcan.width = w;    bgcan.height = h;}

Handling Events
The setupCanvas function isnt going to run itself and needs some sort fo event to start it. We will want it to run once the page has finished loading so that the correct window width and height is captured. While were doing this will will set up the other events we want to capture for this example:

// MAIN //
// when page finishes loading
window.addEventListener(“load”, function(){
// create and add canvas
setupCanvas(“bgcanvas”);

// run 1 frame every 16 milliseconds
window.setInterval(update, 16);

// listen for resize event from browser
window.addEventListener(‘resize’, resize, false);

// when mouse moves
onmousemove = function(e){ storemp(e.x, e.y)}
});

// MAIN //// when page finishes loadingwindow.addEventListener(“load”, function(){    // create and add canvas    setupCanvas(“bgcanvas”);     // run 1 frame every 16 milliseconds    window.setInterval(update, 16);     // listen for resize event from browser    window.addEventListener(‘resize’, resize, false);     // when mouse  moves    onmousemove = function(e){ storemp(e.x, e.y)} });

The window.addEventListener(“load”… function will run once the page finishes loading. Here we create the canvas with setupCanvas, add a timer to run the update function once every 16 milliseconds, run the resize function when the resize event is fired and run the storemp function when the mouse is moved. Dont worry abuot the missing function we are going to add them now:

var x = 0 // store mouse pointer x
var y = 0; // store mouse pointer y

// store mouse pointer position
function storemp(mpx,mpy){
x = mpx;
y = mpy
}

function update(){

}

var x = 0   // store mouse pointer xvar y = 0;  // store mouse pointer y // store mouse pointer positionfunction storemp(mpx,mpy){    x = mpx;    y = mpy}  function update(){    }

We now have everything in place except the animation code that draws the images on the canvas.
Drawing on the Canvas
This is the meat of the project where we get to use cool maths..(yeah I said it..COOL MATHS) to draw lines and shapes to the canvas. But before we do that we will add a few variabls which we wil use in the code:

var initMS = 0 // store the milliseconds since page load
var pitwo = 2*Math.PI; // pi * 2 for drawing circles
var sndrop = [] // an array for storing each drawn object

var initMS = 0  // store the milliseconds since page loadvar pitwo = 2*Math.PI; // pi * 2 for drawing circlesvar sndrop = [] // an array for storing each drawn object

Now we add the drawing code inside our update function we already made:

function update(){
initMS=initMS+1 //increase our timer

//clear canvas
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0, 0, w,h);
ctx.beginPath()

// create new drop
if(initMS%4 == 0){ // once every 4 frames
// create new drop/snowflake at a random width and add to array
sndrop.push({posx:Math.random()*w,posy:-10,size:1+Math.floor(Math.abs(Math.sin(initMS*0.1))*10)})
}

ctx.fillStyle=”#f0f0f0″; // set drop colour

//draw drop falling/flowwing
sndrop.forEach(function(item,index){
ctx.beginPath(); // start a new drawing path
ctx.arc(item.posx,item.posy,item.size,0,pitwo); // draw a filled circle
item.posx += Math.sin(initMS*0.01) * item.size*0.15 ; //add hosrizontal motion
item.posy += item.size*0.15; //add vertical motion
ctx.fill(); // fill the drawn shape(works as endpath)

// if item is off screen
if(item.posy > ((item.size*2)+h)){
sndrop.splice( index, 1 ); // removes element at index position
}
});

// make drop avoid mouse
sndrop.forEach(function(item,index){
//is close to mp
var xdist = (item.posx – x) // x distance from mouse
var ydist = (item.posy – y) // y distance from mouse
var squaredDist = xdist * xdist + ydist * ydist // squared distance
var incircl = (squaredDist < 50000) // is less than roughly 707 squared var invertCircle = (50000 - squaredDist)/50000 //0-1 range ofr items in 707px range //if in range if(incircl){ item.posx +=xdist * invertCircle * 0.05 // move away from mouse item.posy +=ydist * invertCircle * 0.05 } }); } 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 function update(){    initMS=initMS+1 //increase our timer     //clear canvas    ctx.fillStyle ='#ffffff';    ctx.fillRect(0, 0, w,h);    ctx.beginPath()     // create new drop     if(initMS%4 == 0){ // once every 4 frames        // create new drop/snowflake at a random width and add to array        sndrop.push({posx:Math.random()*w,posy:-10,size:1+Math.floor(Math.abs(Math.sin(initMS*0.1))*10)})    }     ctx.fillStyle='#f0f0f0'; // set drop colour     //draw drop falling/flowwing    sndrop.forEach(function(item,index){        ctx.beginPath();    // start a new drawing path ctx.arc(item.posx,item.posy,item.size,0,pitwo);         // draw a filled circle item.posx += Math.sin(initMS*0.01) * item.size*0.15 ;   //add hosrizontal  motion item.posy += item.size*0.15;    //add vertical motion ctx.fill(); // fill the drawn shape(works as endpath)         // if item is off screen if(item.posy > ((item.size*2)+h)){            sndrop.splice( index, 1 ); // removes element at index position }    });     // make drop avoid mouse    sndrop.forEach(function(item,index){        //is close to mp        var xdist = (item.posx – x) // x distance from mouse        var ydist = (item.posy – y) // y distance from mouse        var squaredDist = xdist * xdist + ydist * ydist // squared distance        var incircl = (squaredDist < 50000) // is less than roughly 707 squared        var invertCircle = (50000 - squaredDist)/50000 //0-1 range ofr items in 707px range         //if in range        if(incircl){            item.posx +=xdist * invertCircle * 0.05 // move away from mouse            item.posy +=ydist * invertCircle * 0.05        }    });}   View it in action View Source Code or check out some other effects here with links to source code If you like javascript you could try JSMatter which is a physics engine for javascript Views: 8,383 Sharing is caring!


Source link