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

Allow smaller pixel points, notes

Browse Source
This commit is contained in:
Tyler Hallada 2017-08-13 03:20:53 -04:00
parent 52b275cd0d
commit dd47eef459
3 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -135,8 +135,8 @@
<button type="button" id="randomize-cycles">Randomize Point Cycles</button>
</label><br />
<label><strong>Point Size:</strong>
<input type="range" name="pointSizeRange" min="0" max="50" value="0" oninput="this.form.pointSizeInput.value=this.value" />
<input type="number" name="pointSizeInput" min="0" max="50" value="0" oninput="this.form.pointSizeRange.value=this.value" />
<input type="range" name="pointSizeRange" min="0" max="50" value="3" oninput="this.form.pointSizeInput.value=this.value" />
<input type="number" name="pointSizeInput" min="0" max="50" value="3" oninput="this.form.pointSizeRange.value=this.value" />
</label><br />
<label><strong>Line Size:</strong>
<input type="range" name="lineSizeRange" min="1" max="50" value="1" oninput="this.form.lineSizeInput.value=this.value" />

6
js/proximity.js
View File

@ -103,8 +103,8 @@ var hoverTweeningFn = 5; // specific tweening function to assign to points in e
var zRange = 50; // maximum value for the range of possible z coords for a point
var nodeImg = 'img/node.png'; // image file location for representing every point
var nodeImgRes = 100; // resolution of nodeImg file in pixels (aspect ratio should be square)
var minNodeDiameter = 3; // minimum pixel size of point on canvas when z coord is 0, maximum is this value plus zRange
var nodeSize = 0; // with z coord ignored, this value is used for scaling the drawing for each node
// var minNodeDiameter = 3; // minimum pixel size of point on canvas when z coord is 0, maximum is this value plus zRange
var nodeSize = 3; // with z coord ignored, this value is used for scaling the drawing for each node
var drawNodes = true; // whether to display circles at each point's current position
var drawLines = true; // whether to display lines connecting points if they are in connection distance
var lineSize = 1; // thickness in pixels of drawn lines between points
@ -665,7 +665,7 @@ function drawPolygon (polygon, points, counter, tweeningFns) {
if (drawNodes) {
// draw nodes
nodeDiameter = (nodeSize + minNodeDiameter);
nodeDiameter = nodeSize;
scale = nodeDiameter / nodeImgRes;
sprites[i].scale.x = scale;
sprites[i].scale.y = scale;

7
notes.md
View File

@ -12,7 +12,14 @@ larger the polygon) the more dark the color is shaded.
Add a bunch of dials and switches to the UI to tweak the different configurable
values.
* Mostly implemented, need to add dials for click and hover vars
* Make point count slider add/remove points dynamically without having to
reset.
* Make increasing cycleDuration auto randomize point cycles?
* Save config to local storage and add a reset config to defaults button
* Allow sharing configs
Crazy idea: add a 3rd dimension. Points with a z-index closer to zero will be
closer to the screen. I can simulate that by scaling the points and lines and
applying a blur filter to the points scaled down and further away.
* Gave up on this