Explore Generating Visualisations Using JavaScript in HTML5

Generating visualizations

In HTML5 we will learn a wide variety of advanced functionality over what HTML was originally capable of. The most powerful aspect of HTML5 is the HTML5 canvas. The canvas element is a drawable region defined in HTML code with height and width attributes. JavaScript code can access the canvas through a full set of drawing functions allowing for dynamically generated graphics. The first thing to do is to check that the browser fully supports this.

Step 1: Open any HTML editor (ex. Visual Studio, Notepad, etc) and in the source code page (the page where you want to write the HTML code) type the following lines.

<head>
<meta charset=utf-8>
<title>Liquid Particles canvas experiment </title>
<meta name="description" content="HTML5/canvas demo." />
<meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" />
<script type="text/javascript" src="liquid-particles.js"></script>
<link rel="stylesheet" type="text/css" href="experiment-pages.css" />
</head>

Step 2: In this example there are some functions we have to use, which are given below.

function init() : This JavaScript function is used to initialize the canvas application.

function init() {
canvas = document.getElementById("mainCanvas");
if (canvas.getContext) {
setup();
setInterval(run, 33);
trace('Move your mouse around the page to have the particles follow the cursor, click the mouse button to send the particles flying in the other direction.<br>More here: <a href="/">/C-sharpcorner</a> |; <
a href = "/"
target = "_blank" > Arjun < /a>');
}
else {
trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");
}
}

function setup() : Here we have to setup the mouse direction on canvasDiv.

function setup() {
outerDiv = document.getElementById("outer");
canvasDiv = document.getElementById("canvasContainer");
ctx = canvas.getContext("2d");
var i = numMovers;
while (i--) {
var m = new Mover();
m.x = canvasW * 0.5;
m.y = canvasH * 0.5;
m.vX = Math.cos(i) * Math.random() * 34;
m.vY = Math.sin(i) * Math.random() * 34;
movers[i] = m;
}
mouseX = prevMouseX = canvasW * 0.5;
mouseY = prevMouseY = canvasH * 0.5;
document.onmousedown = onDocMouseDown;
document.onmouseup = onDocMouseUp;
document.onmousemove = onDocMouseMove;
}
function run(): Run the mouse.
function run() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,0.65)";
ctx.fillRect(0, 0, canvasW, canvasH);
ctx.globalCompositeOperation = "lighter";
mouseVX = mouseX - prevMouseX;
mouseVY = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;

function OnDocMouseMove() : It is used to move the mouse direction.

function onDocMouseMove(e) {
var ev = e ? e : window.event;
mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;
}
function OnDocMouseDown(): It is used to set the mouse direction to down.function onDocMouseDown(e) {
isMouseDown = true;
return false;
}
function OnDocMouseUp(): It is used to set the mouse direction to up.function onDocMouseUp(e) {
isMouseDown = false;
return false;
}
function Mover(): Used to set the mouse movement randomly.function Mover() {
this.color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
this.y = 0;
this.x = 0;
this.vX = 0;
this.vY = 0;
this.size = 1;
}

function rect() : Chooses the rectangular context.

function rect(context, x, y, w, h) {
context.beginPath();
context.rect(x, y, w, h);
context.closePath();
context.fill();
}

function trace() : Set the doucment output.

function trace(str) {
document.getElementById("output").innerHTML = str;
}

Step 3: Here, we have to use the try and catch to handle the error in JavaScript.

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11054609-1");
pageTracker._trackPageview();
} catch (err) { }
</script>

Step 4: Now before previewing the output in the browser you need to check whether the format that you include for multiple format files in your browser support all the tags. See the source code below to know which format is supported by which browser.

This is the complete source code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Liquid Particles canvas experiment </title>
<meta name="description" content="HTML5/canvas demo." />
<meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" />
<script type="text/javascript" src="liquid-particles.js"></script>
<link rel="stylesheet" type="text/css" href="experiment-pages.css" />
</head>
<body>
<div id="outer">
<div id="canvasContainer">
<canvas id="mainCanvas" width="1000" height="560"></canvas>
<div id="output"></div>
</div>
</div>
<script type="text/javascript">
/**
* Liquid particles canvas experiment
* ?2010 spielzeugz.de
*/
(function () {
var PI_2 = Math.PI * 2;
var canvasW = 1000;
var canvasH = 560;
var numMovers = 600;
var friction = 0.96;
var movers = [];
var canvas;
var ctx;
var canvasDiv;
var outerDiv;
var mouseX;
var mouseY;
var mouseVX;
var mouseVY;
var prevMouseX;
var prevMouseY;
var isMouseDown;
function init() {
canvas = document.getElementById("mainCanvas");
if (canvas.getContext) {
setup();
setInterval(run, 33);
trace('Move your mouse around the page to have the particles follow the cursor, click the mouse button to send the particles flying in the other direction.
<br>More here:
<a href="/">/Csharpcorner</a> |;
<a href="/" target="_blank">Arjun</a>');
}
else {
trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");
}
}
function setup() {
outerDiv = document.getElementById("outer");
canvasDiv = document.getElementById("canvasContainer");
ctx = canvas.getContext("2d");
var i = numMovers;
while (i--) {
var m = new Mover();
m.x = canvasW * 0.5;
m.y = canvasH * 0.5;
m.vX = Math.cos(i) * Math.random() * 34;
m.vY = Math.sin(i) * Math.random() * 34;
movers[i] = m;
}
mouseX = prevMouseX = canvasW * 0.5;
mouseY = prevMouseY = canvasH * 0.5;
document.onmousedown = onDocMouseDown;
document.onmouseup = onDocMouseUp;
document.onmousemove = onDocMouseMove;
}
function run() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,0.65)";
ctx.fillRect(0, 0, canvasW, canvasH);
ctx.globalCompositeOperation = "lighter";
mouseVX = mouseX - prevMouseX;
mouseVY = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;
var toDist = canvasW * 0.86;
var stirDist = canvasW * 0.125;
var blowDist = canvasW * 0.5;
var Mrnd = Math.random;
var Mabs = Math.abs;
var i = numMovers;
while (i--) {
var m = movers[i];
var x = m.x;
var y = m.y;
var vX = m.vX;
var vY = m.vY;
var dX = x - mouseX;
var dY = y - mouseY;
var d = Math.sqrt(dX * dX + dY * dY) || 0.001;
dX /= d;
dY /= d;
if (isMouseDown) {
if (d < blowDist) {
var blowAcc = (1 - (d / blowDist)) * 14;
vX += dX * blowAcc + 0.5 - Mrnd();
vY += dY * blowAcc + 0.5 - Mrnd();
}
}
if (d < toDist) {
var toAcc = (1 - (d / toDist)) * canvasW * 0.0014;
vX -= dX * toAcc;
vY -= dY * toAcc;
}
if (d < stirDist) {
var mAcc = (1 - (d / stirDist)) * canvasW * 0.00026;
vX += mouseVX * mAcc;
vY += mouseVY * mAcc;
}
vX *= friction;
vY *= friction;
var avgVX = Mabs(vX);
var avgVY = Mabs(vY);
var avgV = (avgVX + avgVY) * 0.5;
if (avgVX < .1) vX *= Mrnd() * 3;
if (avgVY < .1) vY *= Mrnd() * 3;
var sc = avgV * 0.45;
sc = Math.max(Math.min(sc, 3.5), 0.4);
var nextX = x + vX;
var nextY = y + vY;
if (nextX > canvasW) {
nextX = canvasW;
vX *= -1;
}
else if (nextX < 0) {
nextX = 0;
vX *= -1;
}
if (nextY > canvasH) {
nextY = canvasH;
vY *= -1;
}
else if (nextY < 0) {
nextY = 0;
vY *= -1;
}
m.vX = vX;
m.vY = vY;
m.x = nextX;
m.y = nextY;
ctx.fillStyle = m.color;
ctx.beginPath();
ctx.arc(nextX, nextY, sc, 0, PI_2, true);
ctx.closePath();
ctx.fill();
}
}
function onDocMouseMove(e) {
var ev = e ? e : window.event;
mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;
}
function onDocMouseDown(e) {
isMouseDown = true;
return false;
}
function onDocMouseUp(e) {
isMouseDown = false;
return false;
}
function Mover() {
this.color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
this.y = 0;
this.x = 0;
this.vX = 0;
this.vY = 0;
this.size = 1;
}
function rect(context, x, y, w, h) {
context.beginPath();
context.rect(x, y, w, h);
context.closePath();
context.fill();
}
function trace(str) {
document.getElementById("output").innerHTML = str;
}
window.onload = init;
})();
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11054609-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
</body>
</html>

Output :

Resources

Here are some useful resources:

3 Comments

Join the conversation! Your thoughts help the community grow.

Gabriela14y ago
Hi. Is it possible to have the background white instead of black? I tried but the particles disappear completely. Obviously I'm doing something wrong. Could you please help?
Krishna Garad14y ago
Very nice arjun. Thanks for sharing
Sam Hobbs14y ago
Ooooh, that looks like so much fun. I am jealous; I wish I had time to play with it.