JS exercise 6 – Trail

In this exercise, we will create a colorful trail, based on a dot moving across the canvas in a random direction, bouncing off its edges. Everytime the page is refreshed, the direction changes.

This is the whole code:

<!DOCTYPE html>
<html>
<head>
	<title>Trail</title>
	<script type="text/javascript">
	var ctx, canvas;
	var counter;
	var x, y;
	var speedX, speedY;
	function setup(){
		canvas=document.getElementById("myCanvas");
		ctx=canvas.getContext("2d");
		setInterval(draw, 10);
		speedX=Math.random()*10-5;
		speedY=Math.random()*10-5;
		x = 200;
		y = 200;
		counter = 0;
	}
	function draw(){
		x+=speedX;
		y+=speedY;
		if(x<0||x>canvas.width){
			speedX*=-1;
		}
		if(y<0||y>canvas.height){
			speedY*=-1;
		}
		counter++;
		if(counter>255){
			counter=0;
		}
		ctx.fillStyle="rgba(255,"+counter+",0,0.5)";
		ctx.beginPath();
		ctx.arc(x,y,10,0,Math.PI*2,false);
		ctx.closePath();
		ctx.fill();
	}
	</script>
</head>
<!--body onload="setup()" style="margin:0px"-->
<body onload="setup()">
	<canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas>
</body>
</html>

In the setup() function, we define the initial random direction values. We would like to have random values between -5 and 5, for the horizontal and vertical axes. However, Math.random() outputs values between 0 and 1. Therefore, we need to execute interval operations. First, we will increase the length of the interval, from the initial one (1) to the desired length (10), by multiplication (*10). Then, we will move the left bound of the interval to the new desired value (-5), by subtraction. This direction value will be stored in two values, for example “speedX” for the horizontal one:

speedX=Math.random()*10-5;

In the setup, a counter variable is also created to change our color value over time. Its default value is 0.

In the draw() function, we will add the “speed” variables to the x and y variables that track the position of the circle. We will use shorthand for that:

		x+=speedX;

instead of:

		x = x+speedX

Both are equivalent, but first is shorter. These shorthand operators can also be used with “-“, “/”, “*” and “%”.

An if statement checks if the center of the circle is out of the bounds of the canvas. The left bound is 0 and right bound canvas.width; the top bound is 0 and bottom bound canvas.height. Taking the horizontal axis as an example, the if statement checks if the x variable is lesser than 0 or (represented by “||”) larger than canvas.width. If so, it inverts the direction by multiplying by -1:

		if(x<0||x>canvas.width){
			speedX*=-1;
		}

A similar limit is applied to the color counter, but if it reaches the limit of 255 it is reset to 0:

		if(counter>255){
			counter=0;
		}

This counter is used in this example as the green channel:

		ctx.fillStyle="rgba(255,"+counter+",0,0.5)";

The x and y variables are used inside the circle drawing method:

		ctx.arc(x,y,10,0,Math.PI*2,false);

More on JavaScript operators:

https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript#Operators

This is a screenshot of the resulting applet:

Link to the exercise: http://mlab.taik.fi/mediacode/coursefiles/course_2011_10/6-trail.html

Advertisements

One thought on “JS exercise 6 – Trail

  1. Pingback: HTML5 Canvas: Trails « Valeria's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s