ruslanas · September 12, 2012 13:58
diff --git a/stars.html b/stars.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>256</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script>
            var canvas = null;
            var ctx = null;
            var stars = [
                [200,185,"rgb(255,0,0)", 0, 0.1],
                [200,185,"rgb(0,255,0)", 0, 0.2],
                [200,185,"rgb(255,255,0)", 0, 0.3],
            ];
            var origin = new Point(200, 200);
            function init() {
                canvas = document.getElementById('canvas');
                if(canvas.getContext) {
                    ctx = canvas.getContext('2d');
                } else {
                    alert('Oops! Canvas not supported in your browser.');
                    return;
                }
                setInterval(draw, 100);
            }
            function draw() {
                ctx.clearRect(0,0,400,400);
                for(var i=0;i<stars.length;i++) {
                    ctx.fillStyle = stars[i][2];
                    drawStar(stars[i][0], stars[i][1], stars[i][3]);
                    randX = Math.floor((Math.random()*11)-5);
                    randY = Math.floor((Math.random()*11)-5);
                    
                    //stars[i][0] += randX;
                    stars[i][1] += randY;
                    stars[i][3] += stars[i][4];
                    //stars[i][0] = Math.min(Math.max(stars[i][0], 30), 370);
                    stars[i][1] = Math.min(Math.max(stars[i][1], 30), 370);
                    
                }
            }
            function drawStar(baseX, baseY, angle) {
                var p1 = new Point(baseX, baseY);
                var p2 = new Point(baseX + 5, baseY + 10);
                var p3 = new Point(baseX+15, baseY+15);
                var p4 = new Point(baseX+5, baseY+20);
                var p5 = new Point(baseX, baseY+30);
                var p6 = new Point(baseX-5, baseY+20);
                var p7 = new Point(baseX-15, baseY+15);
                var p8 = new Point(baseX-5, baseY+10);
                
                //origin.X = baseX; origin.Y = baseY + 15;
                
                ctx.beginPath();
                p1.rotate(angle);
                p2.rotate(angle);
                p3.rotate(angle);
                p4.rotate(angle);
                p5.rotate(angle);
                p6.rotate(angle);
                p7.rotate(angle);
                p8.rotate(angle);
                
                ctx.moveTo(p1.X, p1.Y);
                ctx.lineTo(p2.X, p2.Y);
                ctx.lineTo(p3.X, p3.Y);
                ctx.lineTo(p4.X, p4.Y);
                ctx.lineTo(p5.X, p5.Y);
                ctx.lineTo(p6.X, p6.Y);
                ctx.lineTo(p7.X, p7.Y);
                ctx.lineTo(p8.X, p8.Y);
                ctx.fill();
            }
            function Point(x, y) {
                this.X = x;
                this.Y = y;
                this.rotate = function(angle) {
                    x = this.X - origin.X;
                    y = this.Y - origin.Y;
                    this.X = Math.cos(angle) * x - Math.sin(angle) * y;
                    this.Y = Math.sin(angle) * x + Math.cos(angle) * y;
                    this.X += origin.X;
                    this.Y += origin.Y;
                    return this;
                }
            }
        </script>
        <style>
            .container {
                text-align: center;
            }
        </style>
    </head>
    <body onload="init()">
        
        <div class="container">
            <h1>Happy Programmer Day!</h1>
            <canvas id="canvas" width="400" height="400"></canvas>
        </div>
        
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>256</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script>
	var canvas = null;
	var ctx = null;
	var stars = [
	[200,185,"rgb(255,0,0)", 0, 0.1],
	[200,185,"rgb(0,255,0)", 0, 0.2],
	[200,185,"rgb(255,255,0)", 0, 0.3],
	];
	var origin = new Point(200, 200);
	function init() {
	canvas = document.getElementById('canvas');
	if(canvas.getContext) {
	ctx = canvas.getContext('2d');
	} else {
	alert('Oops! Canvas not supported in your browser.');
	return;
	}
	setInterval(draw, 100);
	}
	function draw() {
	ctx.clearRect(0,0,400,400);
	for(var i=0;i<stars.length;i++) {
	ctx.fillStyle = stars[i][2];
	drawStar(stars[i][0], stars[i][1], stars[i][3]);
	randX = Math.floor((Math.random()*11)-5);
	randY = Math.floor((Math.random()*11)-5);

	//stars[i][0] += randX;
	stars[i][1] += randY;
	stars[i][3] += stars[i][4];
	//stars[i][0] = Math.min(Math.max(stars[i][0], 30), 370);
	stars[i][1] = Math.min(Math.max(stars[i][1], 30), 370);

	}
	}
	function drawStar(baseX, baseY, angle) {
	var p1 = new Point(baseX, baseY);
	var p2 = new Point(baseX + 5, baseY + 10);
	var p3 = new Point(baseX+15, baseY+15);
	var p4 = new Point(baseX+5, baseY+20);
	var p5 = new Point(baseX, baseY+30);
	var p6 = new Point(baseX-5, baseY+20);
	var p7 = new Point(baseX-15, baseY+15);
	var p8 = new Point(baseX-5, baseY+10);

	//origin.X = baseX; origin.Y = baseY + 15;

	ctx.beginPath();
	p1.rotate(angle);
	p2.rotate(angle);
	p3.rotate(angle);
	p4.rotate(angle);
	p5.rotate(angle);
	p6.rotate(angle);
	p7.rotate(angle);
	p8.rotate(angle);

	ctx.moveTo(p1.X, p1.Y);
	ctx.lineTo(p2.X, p2.Y);
	ctx.lineTo(p3.X, p3.Y);
	ctx.lineTo(p4.X, p4.Y);
	ctx.lineTo(p5.X, p5.Y);
	ctx.lineTo(p6.X, p6.Y);
	ctx.lineTo(p7.X, p7.Y);
	ctx.lineTo(p8.X, p8.Y);
	ctx.fill();
	}
	function Point(x, y) {
	this.X = x;
	this.Y = y;
	this.rotate = function(angle) {
	x = this.X - origin.X;
	y = this.Y - origin.Y;
	this.X = Math.cos(angle) * x - Math.sin(angle) * y;
	this.Y = Math.sin(angle) * x + Math.cos(angle) * y;
	this.X += origin.X;
	this.Y += origin.Y;
	return this;
	}
	}
	</script>
	<style>
	.container {
	text-align: center;
	}
	</style>
	</head>
	<body onload="init()">

	<div class="container">
	<h1>Happy Programmer Day!</h1>
	<canvas id="canvas" width="400" height="400"></canvas>
	</div>

	</body>
	</html>