Tag Archives: html5

Count down to Earth Hour

So this week was the 60 day count down to Earth Hour and to celebrate WWF produced a list of 60 things to do in the dark.

To remind visitors about the campaign we booked in a homepage take over of the main WWF site focusing on Earth Hour and in particular the count down… which gave me an opportunity to play with some simple js and do something a little fun.

Earth Hour on the WWF homepage
Earth Hour on the WWF homepage

The code (if you’re interested) is below – for your enjoyment. The stats – so far – are looking good.

Homepages are funny things – and I plan to write a blog post on them soon – but in short we sometimes put a lot of focus on them and forget that visitors usually arrive at our sites for a reason… and that reason is rarely to see what random offering is being featured on the HP.

Anything we can do to draw attention toward valuable calls to action – including the occasional bit of movement – should always be considered (if only to be dismissed). But it is also important not let that get in the way of the user’s journey toward the reason for their visit. This can only lead to a ruined online relationship… so when you’re monitoring look for the impact elsewhere also (negative or positive).

Anyhow – the code:

$(document).ready(function(){
	var countMe = 0,
		countSpeed = 40;
	$(".subLine").fadeOut(0);
	$(".count").empty();
	setInterval(countUp,countSpeed);

	function countUp(){
		$(".count").empty();
		if(countMe<10){ $(".count").append("0" + countMe); }
		else { $(".count").append(countMe); }
		
		if(countMe<60){
			countMe = countMe+1;
		} else {
			$(".subLine").fadeIn(1000);
		}
	}
})

Let it snow… let it snow (the return)

Last year I published a post on html5 canvas snow generated with some JS.

To be honest it was a little sh*te… so this year I created some better snow and thought I’d share it with you all to use.

This is an example of what you’re aiming to create:

As you can (hopefully) see it produces snow flakes of varying size and weight that float at random speeds and directions (all whilst spinning in at a random speed and direction).

As if that weren’t enough – thanks to @kgu the JS now measures the CPU impact and alters the amount of snow that is generated so that it is produced at a rate the viewer’s computer can handle.

In this version the background of the canvas element is red but this can be altered in the CSS. I’ve  used this with a transparent background and a absolute position to overlay it above some graphics in the background before.

Play about… have fun… and let me know if it’s worked for you in the comments below.

The HTML:

<canvas id="snowSpace" width="500" height="300"></canvas>

The JS:

var a_canvas = document.getElementById("snowSpace"),
		c = a_canvas.getContext('2d'),
		particles = [],
		j = 0,
		canvasWidth = document.getElementById("snowSpace").width,
		canvasHeight = document.getElementById("snowSpace").height,
		snowColour = "white";
	//LET'S INPUT SOME CODE HERE:
	setInterval(draw, 1000/60);
	var t,t1
	t=new Date();
	t1=new Date();
	function draw(){
		c.clearRect(0,0,canvasWidth,canvasHeight);
		var p = new Particle();
	    if (j%10==0 &&t1.getTime()- t.getTime()<1){
				particles.push(p);
	    }
	t=new Date();
		//RUN THROUGH AN ARRAY OF SNOW FLAKES:
		for(var i = 0; i<particles.length; i++) {
 			p = particles[i];
 			c.save();
 			c.translate(p.xPos,p.yPos);
 			c.rotate(p.ang);
 			c.scale(p.size,p.size);
 			drawFlake(p.thickness);
 			c.restore();
 			p.xPos += p.xVel;
 			p.yPos += p.yVel;
 			p.ang += p.spin;
 			if(p.yPos>canvasHeight*2){
				particles.shift();
			}
		}
		particles.xVel += random(-0.4, 0.4);
		j+=1;
		t1=new Date();
	}
	function Particle(){
		this.size = random(0.05,0.15);
		this.xPos = random(-30, canvasWidth + 30);
		this.yPos = -80;
		this.xVel = random(-0.7, 0.7);
		this.yVel = random(1, 2);
		this.ang = random (-0.5,0.5);
		this.spin = random (-0.05,0.05);
	    this.thickness = random(2,20);
	}
	function drawCross(thickness){
	    c.beginPath();
		c.moveTo(-40, -40);
	    c.lineTo(40,40);
	    c.moveTo(-40, 40)
	    c.lineTo(40, -40)
	    c.lineWidth=thickness ;
		c.strokeStyle = snowColour;
		c.stroke();
	}
	function drawFlake(thickness) {
		c.save();
			drawCross(thickness);
		c.rotate(Math.PI / 4);
			drawCross(thickness);
		c.restore();
	}
	//CREATE RANDOM FUNCTION
	function random(min, max) {
		return Math.random() * (max - min) + min;
	}

The CSS

#snowSpace {
	background: #b80333;
	margin:0;
	overflow:hidden;
}

JavaScript Asteroids (with Creative JS)

Earlier this week I went on Seb Lee’s Creative JS course (which I would highly recommend). The course covered the bascis and early advanced aspects of the HTML5 Canvas element and the JS to accompany it.

During the course we started to build the classics Asteroids game in JS. Since then I have finalised my version (completed with a couple of easter eggs – see if you can discover them).

Check out the iframe below (although some OSs wont accept the key depressions via iframe) or click here to be taken directly to my full screen version the JavaScaript Canvas Asteroids.

I would put together a tutorial for this but instead feel that anyone actually interested in learning this kind of stuff would be stupid not to attend one of Seb Lees workshop days.