From 208a20f06ff95f6fcd903f2a0c4029ec9fd6beff Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sat, 19 Jul 2014 22:42:43 -0400 Subject: [PATCH] Refactored and optimized magic --- _layouts/home.html | 1 + js/AnimationFrame.min.js | 8 ++ js/magic.js | 256 ++++++++++++++++++++------------------- 3 files changed, 143 insertions(+), 122 deletions(-) create mode 100644 js/AnimationFrame.min.js diff --git a/_layouts/home.html b/_layouts/home.html index 84e077d..123f176 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -24,6 +24,7 @@ + diff --git a/js/AnimationFrame.min.js b/js/AnimationFrame.min.js new file mode 100644 index 0000000..db09a24 --- /dev/null +++ b/js/AnimationFrame.min.js @@ -0,0 +1,8 @@ +/** + * An even better animation frame. + * + * @copyright Oleg Slobodskoi 2013 + * @website https://github.com/kof/animationFrame + * @license MIT + */ +(function(window){"use strict";var nativeRequestAnimationFrame,nativeCancelAnimationFrame;(function(){var i,vendors=["webkit","moz","ms","o"],top;try{window.top.name;top=window.top}catch(e){top=window}nativeRequestAnimationFrame=top.requestAnimationFrame;nativeCancelAnimationFrame=top.cancelAnimationFrame||top.cancelRequestAnimationFrame;for(i=0;i= 1) { - - var new_branches = createNewBranches(branches); - - // If over 10 branches, prune the branches - if (prune) { - if (sort) { - while (new_branches.length > 20) new_branches.pop(); - } else { - while (new_branches.length > prune_to) { - new_branches.splice(Math.floor(Math.random() * new_branches.length), 1); - } - } - } - - // Replace old branch array with new - branches = new_branches; - - // Restart drawing splines at t=0 - t = 0; - } - - // Count interations - iterations--; - if (iterations < 0) clearInterval(interval); - - }, 32); - - // Return interval - return interval; - } - - function canvasClickHandler(event) { - var x = event.pageX; - var y = event.pageY; - var duration = Math.floor(Math.random() * (600 - 50 + 1)) + 50; - var canvas = document.getElementById("magic"); - var context = canvas.getContext("2d"); - - var interval = drawTendrils(context, x, y, duration, false, true, 15); - } - - function draw() { - var interval_time = 2000; - var metaInterval; - - function cast() { - console.log(interval_time); - clearInterval(metaInterval); - - // Go slower once started - if (interval_time === 2000) { - interval_time = 4000; - } else if (interval_time > 20000) { - return; // stop drawing - } else { - interval_time = interval_time * 1.1; - } - + function animate(time) { // resize canvas if document size changed dimensions = getDocumentDimensions(); if ((dimensions.height !== canvas.height) || @@ -234,18 +175,89 @@ window.onload = function () { canvas.width = dimensions.width; } - // Find random position - var x = Math.floor(Math.random() * (canvas.width + 1)); - var y = Math.floor(Math.random() * (canvas.height + 1)); - var duration = Math.floor(Math.random() * (600 - 50 + 1)) + 50; - var interval = drawTendrils(context, x, y, duration, false, true, 15); + // if enough time has passed, cast another spell to draw + if ((timeCounter - lastCast) >= waitTime) { + if (waitTime > 500) { + return; // stop drawing + } else if (waitTime === 80){ + waitTime = 125; + } else { + waitTime = waitTime * 1.1; + } - metaInterval = setInterval(cast, interval_time); + console.log("cast: " + waitTime); + lastCast = timeCounter; + if (waitTime === 125) { + cast(5, 5, 270); // start position + } else { + cast(undefined, undefined, undefined); // random spell position + } + } + + // Draw branches + for (var i in spells) { + context.beginPath(); + context.strokeStyle = spells[i].color; + + if (spells[i].duration > 0) { + for (var j in spells[i].branches) { + drawSplineSegment(spells[i].branches[j], context); + + // When finished drawing splines, create a new set of branches + if (spells[i].branches[j].t >= 1) { + + var newBranches = splitBranch(spells[i].branches[j]); + + // Replace old branch with two new branches + spells[i].branches.splice(j, 1); + spells[i].branches = spells[i].branches.concat(newBranches); + } + } + + // If over 10 branches, prune the branches + if (prune) { + if (sort) { + while (spells[i].branches.length > prune_to) { + spells[i].branches.pop(); + } + } else { + while (spells[i].branches.length > prune_to) { + spells[i].branches.splice( + Math.floor(Math.random() * spells[i].branches.length), + 1); + } + } + } + + context.stroke(); + context.closePath(); + spells[i].duration--; + + } else { + spells.splice(i, 1); // spell is done now + } + } + + timeCounter++; + frameId = animationFrame.request(animate); } + // Drawing interval + var frameId = animationFrame.request(animate); + return frameId; + } + + function canvasClickHandler(event) { + var x = event.pageX; + var y = event.pageY; + + cast(x, y, undefined); + } + + function draw() { + var interval_time = 2000; + // Initialize canvas - console.log("draw"); - var canvas = document.getElementById("magic"); var dimensions = getDocumentDimensions(); console.log(dimensions.height); console.log(dimensions.width); @@ -259,7 +271,7 @@ window.onload = function () { var context = canvas.getContext("2d"); // Cast magic spells - metaInterval = setInterval(cast, interval_time); + var frameId = drawSpells(context, false, true, 30); } }