Slow down magic, add click-initiated tendrils

This commit is contained in:
Tyler Hallada 2014-07-12 20:05:38 -04:00
parent 1a7fea9dc7
commit d3274a8be9

View File

@ -79,8 +79,7 @@ window.onload = function () {
var branches = []; var branches = [];
branches.push({ branches.push({
points:new Array({x:x, y:y}, {x:x, y:y}, {x:x, y:y}, {x:x, y:y}), points:new Array({x:x, y:y}, {x:x, y:y}, {x:x, y:y}, {x:x, y:y}),
angle:0, angle:(Math.random() * 360),
//distanceToLattice:1000
}); });
// Start drawing splines at t=0 // Start drawing splines at t=0
@ -115,15 +114,15 @@ window.onload = function () {
ay*Math.pow(t, 3) + by*Math.pow(t, 2) + cy*t + dy ay*Math.pow(t, 3) + by*Math.pow(t, 2) + cy*t + dy
); );
context.lineTo( context.lineTo(
ax*Math.pow(t+0.1, 3) + bx*Math.pow(t+0.1, 2) + cx*(t+0.1) + dx, ax*Math.pow(t+0.2, 3) + bx*Math.pow(t+0.2, 2) + cx*(t+0.2) + dx,
ay*Math.pow(t+0.1, 3) + by*Math.pow(t+0.1, 2) + cy*(t+0.1) + dy ay*Math.pow(t+0.2, 3) + by*Math.pow(t+0.2, 2) + cy*(t+0.2) + dy
); );
context.stroke(); context.stroke();
context.closePath(); context.closePath();
} }
// Advance t // Advance t
t += 0.1; t += 0.2;
// When finished drawing splines, create a new set of branches // When finished drawing splines, create a new set of branches
if (t >= 1) { if (t >= 1) {
@ -140,13 +139,6 @@ window.onload = function () {
// Generate random deviation from previous angle // Generate random deviation from previous angle
var angle = branches[j].angle - (Math.random() * 180 - 90); var angle = branches[j].angle - (Math.random() * 180 - 90);
// Determine closest lattice point
//var distanceToLattice = 100000
//for (var l in lattice) {
//var result = distancePointToLine(branches[j].points[3], lattice[l]);
//if (result < distanceToLattice) distanceToLattice = result;
//}
// Generate random length // Generate random length
var length = Math.random() * 15 + 4; var length = Math.random() * 15 + 4;
@ -163,17 +155,11 @@ window.onload = function () {
{x:x2, y:y2} {x:x2, y:y2}
), ),
angle:angle, angle:angle,
//distanceToLattice:distanceToLattice
}); });
} }
} }
// Sort branches by distance to lattice
//new_branches.sort(function(a, b) {
//return a.distanceToLattice - b.distanceToLattice;
//});
// If over 10 branches, prune the branches // If over 10 branches, prune the branches
if (prune) { if (prune) {
if (sort) { if (sort) {
@ -196,14 +182,56 @@ window.onload = function () {
interations--; interations--;
if (interations < 0) clearInterval(interval); if (interations < 0) clearInterval(interval);
}, 16.67); }, 32);
// Return interval // Return interval
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() { 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;
}
// resize canvas if document size changed
dimensions = getDocumentDimensions();
if ((dimensions.height !== canvas.height) ||
(dimensions.width !== canvas.width)) {
canvas.height = dimensions.height;
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);
metaInterval = setInterval(cast, interval_time);
}
// Initialize canvas // Initialize canvas
console.log("draw"); console.log("draw");
var canvas = document.getElementById("magic"); var canvas = document.getElementById("magic");
@ -213,28 +241,14 @@ window.onload = function () {
canvas.height = dimensions.height; canvas.height = dimensions.height;
canvas.width = dimensions.width; canvas.width = dimensions.width;
// Check for canvas support and get context // Check for canvas support, bind click event, and get context
if (canvas.getContext){ if (canvas.getContext){
canvas.addEventListener("click", canvasClickHandler);
var context = canvas.getContext("2d"); var context = canvas.getContext("2d");
// Cast magic spells // Cast magic spells
var metaInterval = setInterval(function () { metaInterval = setInterval(cast, interval_time);
// resize canvas if document size changed
dimensions = getDocumentDimensions();
if ((dimensions.height !== canvas.height) ||
(dimensions.width !== canvas.width)) {
console.log(dimensions.height);
console.log(dimensions.width);
canvas.height = dimensions.height;
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, 30);
}, 3000);
} }
} }