huljas/fork-me-sun.html

## fork-me-sun.html
<html>
<head>
<title>ForkMeSun</title>
<link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
</head>
<body>

<a href="http://huljas.github.com">
<canvas id="forkMe" width="150" height="150">
</canvas>
</a>

<script>
var ctx;
var canvasObj;
var fps = 12;
var stars = [];

var Animation = {

  init : function(id) {
    canvasObj = document.getElementById(id);
    if (canvasObj.getContext) {
        ctx = canvasObj.getContext("2d");
    }
    if (ctx) {
		var speed = 0.5;
		var outer = new Star(30, 75, 75, 0, 70, 62, 0, 0, speed, "#443", "#eea", 1);
		stars.push(outer);
		var inner = new Star(30, 75, 75, 0, 60, 54, 0, 0, -speed, "#ddb", "#ffd", 2);
		stars.push(inner);
		img = new Image()
		img.addEventListener('load', function(e) {
			Animation.draw();
			setInterval(Animation.draw, 1000/fps);
		}, true);
		img.src="bg-page-2.png"
    }
  },

  draw: function() {
	ctx.fillStyle = ctx.createPattern(img, 'repeat')
	ctx.fillRect(0, 0, canvasObj.width, canvasObj.height);

    ctx.strokeStyle = "#b0b0ff";
    ctx.lineWidth = 1;
    ctx.fillStyle = "#ccccff";

    for (i in stars) {
	  stars[i].draw(ctx);
    }

	ctx.save();

	ctx.lineWidth = 1;
	ctx.fillStyle = '#fff';
	ctx.strokeStyle = "#000";
	ctx.font = "32px 'Dorsa'";
	ctx.textBaseline = 'middle';
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur = 2;
	ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
	ctx.rotate(-Math.PI*2/8);
	ctx.fillStyle = '#26d';
	ctx.fillText('Fork me on GitHub', -48, 103);
	ctx.restore();
  },

  drawStar : function(ctx, points, x, y, outR, inR, rotation) {
    ctx.beginPath();
    for (var i = 0; i < points*2; i++) {
        var radians = rotation + i * Math.PI/points;

        var radius = i % 2 == 0 ? outR : inR;

        var _x = x + Math.cos(radians) * radius;
        var _y = y + Math.sin(radians) * radius;

        if (i == 0) {
            ctx.moveTo(_x, _y);
        } else {
            ctx.lineTo(_x, _y);
        }
    }

    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
};

function Star(points,x,y,rotation,outR,inR,vx,vy,vr,stroke,fill,lineWidth) {
  this.points = points;
  this.x = x;
  this.y = y;
  this.outR = outR;
  this.inR = inR;
  this.rotation = rotation;
  this.vx = vx;
  this.vy = vy;
  this.vr = vr;
  if (stroke) this.stroke = stroke;
  else this.stroke = "#000000";
  if (fill) this.fill = fill;
  else  this.fill = "#ffffff";
  if (lineWidth) this.lineWidth = lineWidth;
  else this.lineWidth = 1;


  this.draw = function(ctx) {
    ctx.strokeStyle = this.stroke;
    ctx.lineWidth = this.lineWidth;
    ctx.fillStyle = this.fill;

	this.x += this.vx / fps;
    this.y += this.vy / fps;
    this.rotation += this.vr / fps;
    if (this.x - this.outR > canvasObj.width) this.x = 0 - this.outR;
    if (this.x + this.outR < 0) this.x = canvasObj.width + this.outR;
    if (this.y - this.outR > canvasObj.height) this.y = 0 - this.outR;
    if (this.y + this.outR < 0) this.y = canvasObj.height + this.outR;
    Animation.drawStar(ctx, points, this.x, this.y, this.outR, this.inR, this.rotation);
  };
}
</script>

<script>
Animation.init("forkMe");
</script>

</body>
</html>
	<html>
	<head>
	<title>ForkMeSun</title>
	<link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
	</head>
	<body>

	<a href="http://huljas.github.com">
	<canvas id="forkMe" width="150" height="150">
	</canvas>
	</a>

	<script>
	var ctx;
	var canvasObj;
	var fps = 12;
	var stars = [];

	var Animation = {

	init : function(id) {
	canvasObj = document.getElementById(id);
	if (canvasObj.getContext) {
	ctx = canvasObj.getContext("2d");
	}
	if (ctx) {
	var speed = 0.5;
	var outer = new Star(30, 75, 75, 0, 70, 62, 0, 0, speed, "#443", "#eea", 1);
	stars.push(outer);
	var inner = new Star(30, 75, 75, 0, 60, 54, 0, 0, -speed, "#ddb", "#ffd", 2);
	stars.push(inner);
	img = new Image()
	img.addEventListener('load', function(e) {
	Animation.draw();
	setInterval(Animation.draw, 1000/fps);
	}, true);
	img.src="bg-page-2.png"
	}
	},

	draw: function() {
	ctx.fillStyle = ctx.createPattern(img, 'repeat')
	ctx.fillRect(0, 0, canvasObj.width, canvasObj.height);

	ctx.strokeStyle = "#b0b0ff";
	ctx.lineWidth = 1;
	ctx.fillStyle = "#ccccff";

	for (i in stars) {
	stars[i].draw(ctx);
	}

	ctx.save();

	ctx.lineWidth = 1;
	ctx.fillStyle = '#fff';
	ctx.strokeStyle = "#000";
	ctx.font = "32px 'Dorsa'";
	ctx.textBaseline = 'middle';
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur = 2;
	ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
	ctx.rotate(-Math.PI*2/8);
	ctx.fillStyle = '#26d';
	ctx.fillText('Fork me on GitHub', -48, 103);
	ctx.restore();
	},

	drawStar : function(ctx, points, x, y, outR, inR, rotation) {
	ctx.beginPath();
	for (var i = 0; i < points*2; i++) {
	var radians = rotation + i * Math.PI/points;

	var radius = i % 2 == 0 ? outR : inR;

	var _x = x + Math.cos(radians) * radius;
	var _y = y + Math.sin(radians) * radius;

	if (i == 0) {
	ctx.moveTo(_x, _y);
	} else {
	ctx.lineTo(_x, _y);
	}
	}

	ctx.closePath();
	ctx.fill();
	ctx.stroke();
	}
	};

	function Star(points,x,y,rotation,outR,inR,vx,vy,vr,stroke,fill,lineWidth) {
	this.points = points;
	this.x = x;
	this.y = y;
	this.outR = outR;
	this.inR = inR;
	this.rotation = rotation;
	this.vx = vx;
	this.vy = vy;
	this.vr = vr;
	if (stroke) this.stroke = stroke;
	else this.stroke = "#000000";
	if (fill) this.fill = fill;
	else this.fill = "#ffffff";
	if (lineWidth) this.lineWidth = lineWidth;
	else this.lineWidth = 1;


	this.draw = function(ctx) {
	ctx.strokeStyle = this.stroke;
	ctx.lineWidth = this.lineWidth;
	ctx.fillStyle = this.fill;

	this.x += this.vx / fps;
	this.y += this.vy / fps;
	this.rotation += this.vr / fps;
	if (this.x - this.outR > canvasObj.width) this.x = 0 - this.outR;
	if (this.x + this.outR < 0) this.x = canvasObj.width + this.outR;
	if (this.y - this.outR > canvasObj.height) this.y = 0 - this.outR;
	if (this.y + this.outR < 0) this.y = canvasObj.height + this.outR;
	Animation.drawStar(ctx, points, this.x, this.y, this.outR, this.inR, this.rotation);
	};
	}
	</script>

	<script>
	Animation.init("forkMe");
	</script>

	</body>
	</html>