thallada/proximity-structures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reposition fps graphic, randomize cycles button

Browse Source
This commit is contained in:
Tyler Hallada 2017-08-12 22:41:13 -04:00
parent 1b5c8261cf
commit 329b211d1c
3 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/style.css
View File

@ -7,6 +7,11 @@ html {
background-color: #1e1e1e; background-color: #1e1e1e;
} }
html, button {
font-family: "Arial", sans-serif;
font-size: 10pt;
}
button { button {
background-color: #2e2e2e; background-color: #2e2e2e;
border-color: #4a4a4a; border-color: #4a4a4a;
@ -18,6 +23,10 @@ td, th {
padding: 2px 5px; padding: 2px 5px;
} }
form input, form button {
margin: 5px;
}
input { input {
color: white; color: white;
background-color: #2e2e2e; background-color: #2e2e2e;

6
index.html
View File

@ -107,11 +107,11 @@
</div> </div>
<div id="controls" class="panel" style="display: none;"> <div id="controls" class="panel" style="display: none;">
<form action=""> <form action="">
<label>Time: <label>Cycle Duration:
<input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" /> <input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" />
<input type="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" /> <input type="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" />
</label><br /> </label>
<button name="randomizeCyclesButton">Randomize Point Cycles</button><br /> <button type="button" id="randomize-cycles">Randomize Point Cycles</button><br />
<label>Point tweening: <label>Point tweening:
<label><input type="radio" name="tweening" value="linear" /> Linear</label> <label><input type="radio" name="tweening" value="linear" /> Linear</label>
<label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label> <label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label>

16
js/proximity.js
View File

@ -513,6 +513,14 @@ function redistributeCycles (points, oldCycleDuration, cycleDuration) {
return points; return points;
} }
function randomizeCycles (points, cycleDuration) {
/* Assigns every point a new random cycle start */
for (var i = 0; i < points.original.length; i++) {
points.target[i][3] = randomInt(0, cycleDuration - 1);
}
return points;
}
/* DRAW FUNCTIONS */ /* DRAW FUNCTIONS */
function drawPolygon (polygon, points, counter, tweeningFns) { function drawPolygon (polygon, points, counter, tweeningFns) {
@ -721,7 +729,8 @@ function loopStart () {
}; };
fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'}); fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'});
fpsGraphic.x = 0; fpsGraphic.anchor = new window.PIXI.Point(1, 0);
fpsGraphic.x = screenWidth - 1;
fpsGraphic.y = 0; fpsGraphic.y = 0;
if (fpsEnabled) { if (fpsEnabled) {
@ -899,6 +908,11 @@ window.onload = function () {
toggleControls(); toggleControls();
}, false); }, false);
document.getElementById('randomize-cycles').addEventListener('click', function () {
randomizeCycles(polygonPoints, cycleDuration);
return false;
}, false);
var timeRange, timeInput; var timeRange, timeInput;
timeRange = document.getElementsByName('timeRange')[0]; timeRange = document.getElementsByName('timeRange')[0];
timeRange.value = cycleDuration; timeRange.value = cycleDuration;