Source description for demo by Viktor Kelemen.
/** * I was always inspired by things hidden under my bed. * Yesterday I did a research and here is the result. */ var x = y = 100, sc = r = 0, M = Math, cos = M.cos, sin = M.sin, rnd = M.random, ro = M.round, dx = cos(r), dy = sin(r), PI = M.PI, canvas = document.getElementById('c'), ctx = canvas.getContext('2d'), w = canvas.width = innerWidth, h = canvas.height = innerHeight, as = 0.15, GA = "globalAlpha", BP = "beginPath", dt, result, colors = ['ADAA63','B87C4B','A14747','454545','2C8A79']; // palette function forward(units) { // a color from the palette ctx.strokeStyle = "#" + colors[ro(sc/40)%5]; ctx[BP](); ctx.moveTo(x, y); ctx.lineTo(x = ro(x + units * dx), y = ro(y + units * dy)); ctx.stroke(); } function left(degree) { dx = cos(r += degree / 180 * PI), dy = sin(r); } // rules for the fractal generation var iter = 'fx', rules = { 'x': 'x+yf', 'y': 'fx-y' }; // based on the rules we create the DNA of the monster while (iter.length < 2500) { result = ""; for (i = 0; i < iter.length; i++) result += rules[iter[i]] || iter[i]; iter = result; } // here comes the message ctx[GA] = as; ctx.font = '40px serif'; ctx.fillText('monster under my bed', 40, h/2); ctx.translate(w/2, 100); // eyes and mouth function drawShape(x,y,r,b) { ctx[BP](); ctx.arc(x, y, r, b, PI * 2, false); ctx.fill(); } dt = setInterval( function draw() { if (sc < 150) { ctx[GA]= 0.02; ctx.fillStyle = '#fff'; drawShape(100, 100, 8, 0); drawShape(200, 100, 8, 0); ctx.fillStyle = '#000'; drawShape(100, 100, 2, 0); drawShape(200, 100, 2, 0); drawShape(150, 150, 10, PI); ctx[GA] = as /= 1.003; ctx.save(); ctx.scale(1 + sc/90,1 + sc/90); sc++; x = 90; y = 90; r = 0; for (i = 0; i < iter.length; i++) { // based on the DNA we move differently if (iter[i] == 'f') { forward(rnd() * 6); dx = cos(r -= 0.17), dy = sin(r); } if (iter[i] == '+') { left(90); forward(5); } if (iter[i] == '-') left(90); } ctx.restore(); } }, 50);