WIP adding a options panel to magic page
This commit is contained in:
parent
8470f696de
commit
759e202a38
106
js/magic.js
106
js/magic.js
@ -31,6 +31,8 @@ var Magic = function (options) {
|
||||
// Average length of new spline (branch)
|
||||
this.splineLength = options.splineLength || 15;
|
||||
|
||||
this.paused = false;
|
||||
|
||||
// Save this query here now that the page is loaded
|
||||
this.canvas = document.getElementById("magic");
|
||||
};
|
||||
@ -105,6 +107,10 @@ Magic.prototype.pickRandomColor = function() {
|
||||
"b": Math.floor(Math.random() * (255 + 1))};
|
||||
};
|
||||
|
||||
Magic.prototype.clear = function() {
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
|
||||
Magic.prototype.drawSplineSegment = function(branch, context) {
|
||||
var ax = (-branch.points[0].x + 3*branch.points[1].x - 3*branch.points[2].x + branch.points[3].x) / 6;
|
||||
var ay = (-branch.points[0].y + 3*branch.points[1].y - 3*branch.points[2].y + branch.points[3].y) / 6;
|
||||
@ -205,62 +211,64 @@ Magic.prototype.cast = function(x, y, angle, chain) {
|
||||
self.canvas.width = dimensions.width;
|
||||
}
|
||||
|
||||
// if enough time has passed, cast another spell to draw
|
||||
if (timeCounter >= self.waitTime && self.counting) {
|
||||
self.cast(undefined, undefined, undefined, chain); // start position
|
||||
self.counting = false;
|
||||
}
|
||||
if (!self.paused) {
|
||||
// if enough time has passed, cast another spell to draw
|
||||
if (timeCounter >= self.waitTime && self.counting) {
|
||||
self.cast(undefined, undefined, undefined, chain); // start position
|
||||
self.counting = false;
|
||||
}
|
||||
|
||||
// Draw branches
|
||||
for (var i in self.spells) {
|
||||
context.beginPath();
|
||||
context.strokeStyle = self.spells[i].color;
|
||||
// Draw branches
|
||||
for (var i in self.spells) {
|
||||
context.beginPath();
|
||||
context.strokeStyle = self.spells[i].color;
|
||||
|
||||
if (self.spells[i].duration > 0) {
|
||||
for (var j in self.spells[i].branches) {
|
||||
self.drawSplineSegment(self.spells[i].branches[j], context);
|
||||
if (self.spells[i].duration > 0) {
|
||||
for (var j in self.spells[i].branches) {
|
||||
self.drawSplineSegment(self.spells[i].branches[j], context);
|
||||
|
||||
// When finished drawing splines, create a new set of branches
|
||||
if (self.spells[i].branches[j].t >= 1) {
|
||||
// When finished drawing splines, create a new set of branches
|
||||
if (self.spells[i].branches[j].t >= 1) {
|
||||
|
||||
var newBranches = self.splitBranch(self.spells[i].branches[j]);
|
||||
var newBranches = self.splitBranch(self.spells[i].branches[j]);
|
||||
|
||||
// Replace old branch with two new branches
|
||||
self.spells[i].branches.splice(j, 1);
|
||||
self.spells[i].branches = self.spells[i].branches.concat(newBranches);
|
||||
}
|
||||
}
|
||||
// Replace old branch with two new branches
|
||||
self.spells[i].branches.splice(j, 1);
|
||||
self.spells[i].branches = self.spells[i].branches.concat(newBranches);
|
||||
}
|
||||
}
|
||||
|
||||
// If over 10 branches, prune the branches
|
||||
if (prune) {
|
||||
if (sort) {
|
||||
while (self.spells[i].branches.length > self.prune_to) {
|
||||
self.spells[i].branches.pop();
|
||||
}
|
||||
} else {
|
||||
while (self.spells[i].branches.length > self.prune_to) {
|
||||
self.spells[i].branches.splice(
|
||||
Math.floor(Math.random() * self.spells[i].branches.length),
|
||||
1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// If over 10 branches, prune the branches
|
||||
if (prune) {
|
||||
if (sort) {
|
||||
while (self.spells[i].branches.length > self.prune_to) {
|
||||
self.spells[i].branches.pop();
|
||||
}
|
||||
} else {
|
||||
while (self.spells[i].branches.length > self.prune_to) {
|
||||
self.spells[i].branches.splice(
|
||||
Math.floor(Math.random() * self.spells[i].branches.length),
|
||||
1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
self.spells[i].duration--;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
self.spells[i].duration--;
|
||||
|
||||
} else {
|
||||
// cast a new spell at random position
|
||||
if (self.spells[i].chain) {
|
||||
self.cast(undefined, undefined, undefined, true);
|
||||
}
|
||||
self.spells.splice(i, 1); // spell is done now
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// cast a new spell at random position
|
||||
if (self.spells[i].chain) {
|
||||
self.cast(undefined, undefined, undefined, true);
|
||||
}
|
||||
self.spells.splice(i, 1); // spell is done now
|
||||
}
|
||||
}
|
||||
|
||||
if (self.counting) {
|
||||
timeCounter++;
|
||||
if (self.counting) {
|
||||
timeCounter++;
|
||||
}
|
||||
}
|
||||
frameId = animationFrame.request(animate);
|
||||
}
|
||||
@ -290,9 +298,9 @@ Magic.prototype.draw = function() {
|
||||
var self = this;
|
||||
this.canvas.addEventListener("click", function () { self.canvasClickHandler.apply(self, arguments); });
|
||||
|
||||
var context = this.canvas.getContext("2d");
|
||||
this.context = this.canvas.getContext("2d");
|
||||
|
||||
// Cast magic spells
|
||||
var frameId = this.drawSpells(context, false, true, true);
|
||||
var frameId = this.drawSpells(this.context, false, true, true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -5,6 +5,94 @@ title: Tyler Hallada
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
new Magic({{ site.data.magic | jsonify }}).draw();
|
||||
window.magicObj = new Magic({{site.data.magic | jsonify}});
|
||||
magicObj.draw();
|
||||
document.getElementById("play-pause").addEventListener("click", togglePlay);
|
||||
document.getElementById("hide-show").addEventListener("click", togglePanel);
|
||||
document.getElementById("clear").addEventListener("click", clear);
|
||||
}
|
||||
|
||||
function updateMagic(key, value) {
|
||||
magicObj[key] = value;
|
||||
}
|
||||
|
||||
function togglePanel(event) {
|
||||
var options = document.getElementById("options");
|
||||
if (options.style.display === "none") { // hidden
|
||||
options.style.display = "block";
|
||||
event.target.innerHTML = "Hide";
|
||||
} else { // shown
|
||||
options.style.display = "none";
|
||||
event.target.innerHTML = "Show";
|
||||
}
|
||||
}
|
||||
|
||||
function togglePlay(event) {
|
||||
if (magicObj.paused) {
|
||||
magicObj.paused = false;
|
||||
event.target.innerHTML = "Pause";
|
||||
} else {
|
||||
magicObj.paused = true;
|
||||
event.target.innerHTML = "Play";
|
||||
}
|
||||
}
|
||||
|
||||
function clear(event) {
|
||||
magicObj.clear();
|
||||
}
|
||||
</script>
|
||||
<div class="options-panel">
|
||||
<div class="controls-tab">
|
||||
<div class="controls">
|
||||
<button id="play-pause">Pause</button>
|
||||
<button id="clear">Clear</button>
|
||||
<button id="hide-show">Hide</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="options" class="container-full" style="display:block;">
|
||||
<div class="row clearfix">
|
||||
<div class="column fourth">
|
||||
<form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">
|
||||
<label for="speed">Speed</label>
|
||||
<input type="range" min=0.01 max=2 value={{site.data.magic.step}} id="speed" step=0.01>
|
||||
<output name="output" for="speed">{{site.data.magic.step}}</output>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column fourth">
|
||||
<form oninput="output.value=minDuration.value;updateMagic('minDuration', parseInt(minDuration.value))">
|
||||
<label for="minDuration">Min Spell Duration</label>
|
||||
<input type="range" min=1 max=1000 value={{site.data.magic.minDuration}} id="minDuration" step=1>
|
||||
<output name="output" for="minDuration">{{site.data.magic.minDuration}}</output>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column fourth">
|
||||
<form oninput="output.value=maxDuration.value;updateMagic('maxDuration', parseInt(maxDuration.value))">
|
||||
<label for="maxDuration">Max Spell Duration</label>
|
||||
<input type="range" min=1 max=1000 value={{site.data.magic.maxDuration}} id="maxDuration" step=1>
|
||||
<output name="output" for="maxDuration">{{site.data.magic.maxDuration}}</output>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column fourth">
|
||||
<form oninput="output.value=splineLength.value;updateMagic('splineLength', parseInt(splineLength.value))">
|
||||
<label for="splineLength">Spline Length</label>
|
||||
<input type="range" min=1 max=500 value={{site.data.magic.splineLength}} id="splineLength" step=1>
|
||||
<output name="output" for="splineLength">{{site.data.magic.splineLength}}</output>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div class="column half">
|
||||
<form oninput="output.value=minAngleChange.value;updateMagic('minAngleChange', parseInt(minAngleChange.value))">
|
||||
<label for="minAngleChange">Min Angle</label>
|
||||
<input type="range" min=0 max=360 value={{site.data.magic.minAngleChange}} id="minAngleChange" step=1>
|
||||
<output name="output" for="minAngleChange">{{site.data.magic.minAngleChange}}</output>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column half">
|
||||
<form oninput="output.value=maxAngleChange.value;updateMagic('maxAngleChange', parseInt(maxAngleChange.value))">
|
||||
<label for="maxAngleChange">Max Angle</label>
|
||||
<input type="range" min=0 max=360 value={{site.data.magic.maxAngleChange}} id="maxAngleChange" step=1>
|
||||
<output name="output" for="maxAngleChange">{{site.data.magic.maxAngleChange}}</output>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user