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);
}
}