responsive2

<html>
<head>
	<title>Responsive Art</title>
<script>
	var selector = 0;
	var canvas;
	var context;
	var triangles = [];
	var diamonds = [];
	var NinjaStars = [];

	function init() {
		canvas = document.getElementById('canvas');
		context = canvas.getContext("2d");
		//resize canvas fit the window
		resizeCanvas();
		window.addEventListener('resize', resizeCanvas, false);
		window.addEventListener('orientationchange', resizeCanvas, false);
		//add a trangle where the user clicks
		canvas.onclick = function(event) {
			handleClick(event.clientX, event.clientY);

		};
		this.addEventListener( "keydown", doKeyDown, true);
		//add a timer that redraws the canvas (function) --remember to move the triangles
		return setInterval(draw, 15);
	}
	function Diamond(x,y, color){
	this.x = x;
	this.y = y;
	this.color = color;
	this.vx = Math.random() * 20 - 5;
	this.vy = Math.random() * 20 - 5;
	}
	function NinjaStar(x,y,color){
	this.x = x;
	this.y = y;
	this.color = color;
	this.vx = Math.random() * 20 - 5;
	this.vy = Math.random() * 20 - 5;
	}
	function Triangle(x,y,color){
		this.x = x;
		this.y = y;
		this.color = color;
		//give them velocities
		this.vx = Math.random() * 20 - 5;
		this.vy = Math.random() * 20 - 5;
	}
	function doKeyDown( letter ){
		alert( letter.keyCode )
		//68 is d diamond
		if ( letter.keyCode == 68 ) {
		selector = 0;
		}
		//78 is n for ninjaStar
		if ( letter.keyCode == 78 ) {
		selector = 1;
		}
		//83 is s for star
		if ( letter.keyCode == 83 ) {
		selector = 2;
		}
		//76 is l for lightning bolt
		if ( letter.keyCode == 76 ) {
		selector = 3;
		}
		//84 is t for triangle
		if ( letter.keyCode == 84 ) {
		selector = 4;
		}
	}
	function handleClick(x,y) {
		var colors = ['orange','red','yellow',];
		var color = colors[Math.floor(Math.random()*colors.length)];
		if (selector == 0) {
			diamonds.push(new Diamond(x,y,color));
			for (var i=0; i<diamonds.length; i++) {
				drawDiamond(diamonds[i]);
			}
		}

		if (selector == 1) {
			NinjaStars.push(new NinjaStar(x,y,color));
			for (var i=0; i< NinjaStars.length; i++) {
				drawNinjaStar(NinjaStars[i]);
			}
		}

		triangles.push(new Triangle(x,y,color));
		for (var i=0; i<triangles.length; i++) {
			drawTriangle(triangles[i]);
		}
	}
	function drawDiamond(diamond) {
			context.beginPath();

			//Store the diamonds CURRENT x and y position, into local variables
			var xPos = diamond.x;
			var yPos = diamond.y;

			//Set the "start point" of our pen, to the current x and y position. (this is the LEFT POINT OF THE DIAMOND)
			context.moveTo(xPos,yPos);
			//From start position, draw > 20 pixels, and ^ 25 pixels (this is the TOP point of the diamond)
			context.lineTo(xPos+20,yPos+25);
			//From start position, draw > 20 pixels, and v 25 pixels (this is the BOTTOM point of the diamond)
			context.lineTo(xPos+20,yPos-25);

			//Move our "pen" coordinates 40 pixels >
			xPos += 40;

			//Set the "start point" of our pen, to the new x and y position. (this is the RIGHT POINT OF THE DIAMOND)
			context.moveTo(xPos, yPos);
			//From new position, draw < 20 pixels and ^ 25 pixels (this is the TOP point of the diamond)
			context.lineTo(xPos-20,yPos+25);
			//From new position, draw < 20 pixels and v 25 pixels (this is the BOTTOM point of the diamond)
			context.lineTo(xPos-20,yPos-25);


			context.fillStyle = diamond.color;
			context.fill();
	}
	function drawNinjaStar(Ninjastar) {
			context.beginPath();

			//Store the diamonds CURRENT x and y position, into local variables
			var xPos = NinjaStar.x;
			var yPos = NinjaStar.y;

			//Set the "start point" of our pen, to the current x and y position. (this is the LEFT POINT OF THE DIAMOND)
			context.moveTo(xPos,yPos);
			//From start position, draw > 20 pixels, and ^ 25 pixels (this is the TOP point of the diamond)
			context.lineTo(xPos+40,yPos+45);
			//From start position, draw > 20 pixels, and v 25 pixels (this is the BOTTOM point of the diamond)


			//Move our "pen" coordinates 40 pixels >
			xPos += 40;

			//Set the "start point" of our pen, to the new x and y position. (this is the RIGHT POINT OF THE DIAMOND)
			context.moveTo(xPos, yPos);
			//From new position, draw < 20 pixels and ^ 25 pixels (this is the TOP point of the diamond)
			context.lineTo(xPos-40,yPos+45);
			//From new position, draw < 20 pixels and v 25 pixels (this is the BOTTOM point of the diamond)
			context.lineTo(xPos-40,yPos-45);


			context.fillStyle = NinjaStar.color;
			context.fill();
	}
	function drawTriangle(triangle) {
			context.beginPath();
			context.moveTo(triangle.x,triangle.y); //assumes x is 75, y is 50
			context.lineTo(triangle.x+25,triangle.y+25);
			context.lineTo(triangle.x+25,triangle.y-25);
			context.fillStyle = triangle.color;
			context.fill();
	}


	function draw(){
		context.clearRect(0,0, canvas.width, canvas.height);
		context.fillStyle = "black";
		resizeCanvas();

		for (var i=0; i<diamonds.length; i++) {
				drawDiamond(diamonds[i]);
			}
		for (var i=0; i<NinjaStars.length; i++) {
				drawNinjaStar(NinjaStars[i]);
			}

		for (var i=0; i < triangles.length; i++) {
			var t = triangles[i];
			drawTriangle(t);
			//move the triangle

			if (t.x + t.vx > canvas.width || t.x + t.vx < 0)
				t.vx = -t.vx
			if (t.y + t.vy > canvas.height || t.y + t.vy < 0)
				t.vy = -t.vy

			t.x += t.vx;
			t.y += t.vy;
		}
	}

	function resizeCanvas() {
		canvas.width = window.innerWidth-10;
		canvas.height = window.innerHeight-10;
		fillBackgroundColor();
		for (var i=0; i<triangles.length; i++) {
		drawTriangle(triangles[i]);
		}
	}
	function fillBackgroundColor() {
		//make the background black
		context.fillStyle = "black";
		context.fillRect(0,0,canvas.width,canvas.height);
	}
	window.onload = init;
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>