From a21f444af51e1a862e3446ea006c0e715197b87c Mon Sep 17 00:00:00 2001 From: inga-lovinde <52715130+inga-lovinde@users.noreply.github.com> Date: Wed, 22 Dec 2010 12:04:03 +0000 Subject: [PATCH] FractalSnow on background machichara (from http://blogs.msdn.com/b/giorgio/archive/2010/12/13/html5-snow-falling-on-my-blog.aspx) --- .../machichara/fractalsnow-bg-preview.gif | Bin 0 -> 4476 bytes .../js/machichara/fractalsnow-bg-specific.js | 147 ++++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 static/images/machichara/fractalsnow-bg-preview.gif create mode 100644 static/js/machichara/fractalsnow-bg-specific.js diff --git a/static/images/machichara/fractalsnow-bg-preview.gif b/static/images/machichara/fractalsnow-bg-preview.gif new file mode 100644 index 0000000000000000000000000000000000000000..499c0c81117015fdfaf9b0291cdbc90a0d635b6e GIT binary patch literal 4476 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 element dynamically +* injected in the background of the page. +* +* The code is not optimized, feel free to make your own edits! +* +* Copyright 2010 by David Flanagan +* http://creativecommons.org/licenses/by-nc-sa/3.0/ +* +* Modified by Giorgio Sardo +* http://blogs.msdn.com/Giorgio +*/ +(function () { + + // Start Animation only if browser support + if (document.createElement('canvas').getContext) { + if (document.readyState === 'complete') + Snow(); + else + window.addEventListener('DOMContentLoaded', Snow, false); + } + + var deg = Math.PI / 180; // For converting degrees to radians + var sqrt3_2 = Math.sqrt(3) / 2; // Height of an equilateral triangle + var flakes = []; // Things that are dropping + var scrollspeed = 64; // How often we animate things + var snowspeed = 500; // How often we add a new snowflake + var maxflakes = 20; // Max number of flakes to be added at the same time + var rand = function (n) { return Math.floor(n * Math.random()); } + + var canvas, sky; + var snowingTimer; + var invalidateMeasure = false; + + function Snow() { + canvas = document.createElement('canvas'); + canvas.style.position = 'fixed'; + canvas.style.top = '0px'; + canvas.style.left = '0px'; + canvas.style.zIndex = '0'; + document.body.insertBefore(canvas, document.body.firstChild); + sky = canvas.getContext('2d'); + + ResetCanvas(); + + snowingTimer = setInterval(createSnowflake, snowspeed); + setInterval(moveSnowflakes, scrollspeed); + + window.addEventListener('resize', ResetCanvas, false); + } + + function ResetCanvas() { + invalidateMeasure = true; + canvas.width = document.body.offsetWidth; + canvas.height = window.innerHeight; + sky.strokeStyle = '#0066CC'; + sky.fillStyle = 'white'; + } + + function drawFlake(x, y, size, order) { + sky.save(); + sky.translate(x, y); + snowflake(order, 0, Math.floor(sqrt3_2 * y), size); + sky.fill(); + sky.stroke(); + sky.restore(); + } + + function snowflake(n, x, y, len) { + sky.save(); // Save current transformation + sky.beginPath(); + sky.translate(x, y); // Translate to starting point + sky.moveTo(0, 0); // Begin a new subpath there + leg(n); // Draw the first leg of the fractal + sky.rotate(-120 * deg); // Rotate 120 degrees anticlockwise + leg(n); // Draw the second leg + sky.rotate(-120 * deg); // Rotate again. + leg(n); // Draw the final leg + sky.closePath(); // Close the subpath + sky.restore(); // Restore original transformation + + // Draw a single leg of a level-n Koch snowflake. + // This function leaves the current point at the end of + // the leg it has drawn and translates the coordinate + // system so the current point is (0,0). This means you + // can easily call rotate() after drawing a leg. + function leg(n) { + sky.save(); // Save current transform + if (n == 0) { // Non-recursive case: + sky.lineTo(len, 0); // Just a horizontal line + } + else { // Recursive case: _ _ + // draw 4 sub-legs like: \/ + sky.scale(1 / 3, 1 / 3); // Sub-legs are 1/3rd size + leg(n - 1); // Draw the first sub-leg + sky.rotate(60 * deg); // Turn 60 degrees clockwise + leg(n - 1); // Draw the second sub-leg + sky.rotate(-120 * deg); // Rotate 120 degrees back + leg(n - 1); // Third sub-leg + sky.rotate(60 * deg); // Back to original heading + leg(n - 1); // Final sub-leg + } + sky.restore(); // Restore the transform + sky.translate(len, 0); // Translate to end of leg + } + } + + function createSnowflake() { + var order = 2; + var size = 10 + rand(90); + var t = (document.body.offsetWidth - 964) / 2; + var x = (rand(2) == 0) ? rand(t) : t + 964 + rand(t); // Make it fit with my blog + var y = window.pageYOffset; + + flakes.push({ x: x, y: y, vx: 0, vy: 3 + rand(3), size: size, order: order }); + + if (flakes.length > maxflakes) clearInterval(snowingTimer); + } + + function moveSnowflakes() { + sky.clearRect(0, 0, canvas.width, canvas.height); + + var maxy = canvas.height; + + for (var i = 0; i < flakes.length; i++) { + var flake = flakes[i]; + + flake.y += flake.vy; + flake.x += flake.vx; + + if (flake.y > maxy) flake.y = 0; + if (invalidateMeasure) { + var t = (canvas.width - 964) / 2; + flake.x = (rand(2) == 0) ? rand(t) : t + 964 + rand(t); + } + + drawFlake(flake.x, flake.y, flake.size, flake.order); + + // Sometimes change the sideways velocity + if (rand(4) == 1) flake.vx += (rand(11) - 5) / 10; + if (flake.vx > 2) flake.vx = 2; + if (flake.vx < -2) flake.vx = -2; + } + if (invalidateMeasure) invalidateMeasure = false; + } + +} ()); \ No newline at end of file