Skip to content

Instantly share code, notes, and snippets.

@bouk

bouk/cool.html

Created November 12, 2014 01:09
Show Gist options
  • Save bouk/6bd2a4cbfdf8b3be501b to your computer and use it in GitHub Desktop.
Save bouk/6bd2a4cbfdf8b3be501b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cool.html
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<canvas id="screen" width=640 height=640></canvas>
<script>
var step = 0;
function render(x, y, t) {
var m = parseInt((Math.cos((x%4)/16.0*Math.PI)+(60-t%60.0)/60.0)*8)
var n = parseInt((Math.cos((y%4)/16.0*Math.PI)+(60-t%60.0)/60.0)*8)
// (t/30.0)
xyes = m == parseInt(y/1.5) || m == parseInt((y+8)/1.5) || m == parseInt((y+16)/1.5) || m == parseInt((y-8)/1.5)
yyes = n == parseInt(x/1.5) || n == parseInt((x+8)/1.5) || n == parseInt((x+16)/1.5) || n == parseInt((x-8)/1.5)
return [xyes?255:0, yyes?0:255, 255, (xyes||yyes)?0.5:0.01];
}
var c=document.getElementById("screen");
var ctx=c.getContext("2d");
ctx.fillStyle="#000000";
ctx.fillRect(0, 0, 640, 640);
var blocksize=8;
function drawScreen() {
step += 1
for (x = 0; x < 640/blocksize; x++) {
for (y = 0; y < 640/blocksize; y++) {
posX = x * blocksize;
posY = y * blocksize;
color = render(x%8, y%8, step);
ctx.fillStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")";
ctx.fillRect(posX, posY, blocksize, blocksize);
}
}
}
$(function() {
setInterval(drawScreen, 33);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment