<html>
<head><meta charset="utf-8"><title>Ø</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
margin: 0}
#log{
border: 1px solid red;
bottom: 0px;
height: 80px;
overflow-y: scroll}
#log p{
margin: .1em}
#map{
border: 1px solid blue;
overflow: hidden}
</style>
</head>
<body><div id="container">
<div id="map"><canvas></canvas></div>
<div id="log"></div>
</div>
<script>
/* TODO
*/
(function(window, document){'use strict';
window.addEventListener('DOMContentLoaded', function(){
try{main()}catch(e){log('[E]'+e)}
}, false);
/** helpers */
var $ = document.querySelectorAll.bind(document),
cE = document.createElement.bind(document),
eLog = $('#log')[0],
PI = Math.PI, PI2 = Math.PI * 2;
function time() {
var t = new Date();
return (t.toTimeString().slice(0,8)) +'.'+
('00'+ t.getMilliseconds()).slice(-3);
}
function log(msg) {
var m = time() +': '+ msg,
e = cE('p');
console.log(m);
e.textContent = m;
eLog.insertBefore(e, eLog.firstChild);
}
function rnd(max) {
if (max === undefined) max = 1;
return Math.random()*max;
}
function main(){
var ew = window.innerWidth-2,
eh = window.innerHeight - 84/*#log.height+borders*/,
ps/**pixelscale*/ = 1,
mspt/**ms/tick*/ = 20,
ticks = 0,
stopped = false,
ants = [], i,
cw = Math.max(ew, 640*ps),
ch = Math.max(eh, 480*ps),
w = cw/ps,
h = ch/ps,
eMap = $('#map')[0],
eCanvas = $('canvas')[0],
c = eCanvas.getContext('2d');
log('starting main...');
log('e:'+ew+'x'+eh+' c:'+cw+'x'+ch+' m:'+ w +'x'+ h);
eMap.style.width = ew +'px';
eMap.style.height = eh +'px';
if (cw > ew) eMap.style.overflowX = 'scroll';
if (ch > eh) eMap.style.overflowY = 'scroll';
eCanvas.width = cw;
eCanvas.height = ch;
for (i=0; i</*25*/64; ++i) {
ants.push(new Ant());
}
setTimeout(loop,0);
log('...done');
function loop() {
//log('looping');
if (!stopped && ticks < 100000) {
setTimeout(loop,mspt);
tick();
//draw();
} else log('stopped after '+ ticks +' ticks.');
}
function tick() {
var i, l = ants.length;
ticks += 1;
for (i=0; i<l; ++i) {
ants[i].act();
}
//c.closePath();
c.clearRect(0, 0, cw, ch);
c.beginPath();
for (i=0; i<l; ++i) {
ants[i].draw();
}
c.lineWidth = ps;
c.stroke();
}
function Ant() {
this.x = rnd(w);
this.y = rnd(h);
this.a = rnd(PI2);
this.s = rnd(4) + 6;
this.p = rnd(.4) + .5
this.v = 1;
}
Ant.prototype.draw = function draw() { // This function draws one of the bugs (they are called Ants in the code because that was the first version, which was gonna be about ants)
var x = this.x*ps,
y = this.y*ps,
r = this.s*ps,
a = this.a,
s = this.p;
c.moveTo(x + Math.cos(a)*r*.8, y + Math.sin(a)*r*.8); // move to the "head" of the bug
c.lineTo(x, y); // draw the line to the center
c.arc(x, y, r, a-PI*s, a+PI*s); // draw the "wings" (this will also draw one of the angled lines from the center out to the wings)
c.lineTo(x, y); // draw a line back to the center, this is the edge of the other wing
c.arc(x, y, r*.8, a+PI*s, a-PI*s); // draw the back of the bug (that's why the radius is a bit smaller here, 0.8 * the outer radius)
}
Ant.prototype.act = function act() {
if (rnd()>.9) {
this.a = (this.a + rnd(PI/4)-PI/8 + PI2) % PI2;
} else {
this.x = (this.x + Math.cos(this.a) * this.v + w) % w;
this.y = (this.y + Math.sin(this.a) * this.v + h) % h;
}
}
}//main
}(window, document)) // This code was written a long time ago, and it does not follow best practice in all places
</script>
</body>
</html>