Skip to content

Instantly share code, notes, and snippets.

@Two9A
Created April 19, 2015 16:45
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Two9A/b21920ceda51dc9935b4 to your computer and use it in GitHub Desktop.
Save Two9A/b21920ceda51dc9935b4 to your computer and use it in GitHub Desktop.
The simplest star field you'll ever find
<title>Starfield</title>
<script>
addEventListener('load', function() {
var stars = [];
var ctx = field.getContext('2d');
var gen = function(z) {
return {
x: 0 | (Math.random() * 800 - 400),
y: 0 | (Math.random() * 600 - 300),
z: z || (0 | Math.random() * 15)
};
}
for (var i = 0; i < 200; stars.push(gen(i++)));
setInterval(function() {
ctx.clearRect(0, 0, 800, 600);
ctx.font = '20pt Arial';
for (var star in stars) {
ctx.fillStyle = '#' + Array(7).join((0 | stars[star].z).toString(16));
ctx.fillText(
'*',
stars[star].x / stars[star].z + 400,
stars[star].y / stars[star].z + 300
);
stars[star].z -= 0.25;
if (stars[star].z <= 0) {
stars[star] = gen(15);
}
}
}, 20);
});
</script>
<canvas id="field" width="800" height="600"></canvas>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment