function Starfield() { var stars = []; var offset = { x: 0, y: 0 }; var targetOffset = { x: 0, y: 0 }; var velocity = { x: -1, y: -1 }; var size = { width: 300, height: 300 }; var debug = false; var depth = 0; this.init = function (canvas, fieldDepth, fieldVelocity) { size.width = canvas.width; size.height = canvas.height; depth = fieldDepth; offset.x = (size.width / 2) / depth; offset.y = (size.height / 2) / depth; targetOffset.x = (size.width / 2) / depth; targetOffset.y = (size.height / 2) / depth; velocity.x = fieldVelocity.x; velocity.y = fieldVelocity.y; var starDensity = Math.floor((size.width * size.height) / 10000); for (var i = 0; i < starDensity; i++) { stars.push(new Star()); } for (var i = 0, star = stars[0]; star = stars[i]; i++) { star.init(canvas); } }; this.update = function (canvas) { offset.x += (0.01 / (depth + 1)) * (targetOffset.x - offset.x) offset.y += (0.01 / (depth + 1)) * (targetOffset.y - offset.y) if (offset.x > size.width) { offset.x -= size.width; targetOffset.x = offset.x; } if (offset.y > size.height) { offset.y -= size.height; targetOffset.y = offset.y; } if (offset.x < 0) { offset.x += 2 * size.width; targetOffset.x = offset.x; } if (offset.y < 0) { offset.y += 2 * size.height; targetOffset.y = offset.y; } for (var i = 0, star = stars[0]; star = stars[i]; i++) { star.update(canvas); } }; this.draw = function (context) { var xoffset = { x: offset.x - size.width, y: offset.y }; var yoffset = { x: offset.x, y: offset.y - size.height }; var fulloffset = { x: xoffset.x, y: yoffset.y }; if (debug) { context.strokeStyle = "#00FF00"; context.beginPath(); context.rect(offset.x, offset.y, size.width, size.height); context.rect(xoffset.x, xoffset.y, size.width, size.height); context.rect(yoffset.x, yoffset.y, size.width, size.height); context.rect(fulloffset.x, fulloffset.y, size.width, size.height); context.stroke(); } context.fillStyle = "#FFFFFF"; for (var i = 0, star = stars[0]; star = stars[i]; i++) { star.draw(context, offset); star.draw(context, xoffset); star.draw(context, yoffset); star.draw(context, fulloffset); } }; this.mouseMove = function (canvas, x, y) { if (depth != 0) { targetOffset.x = x / depth; targetOffset.y = y / depth; } }; }