Some cleaning up and organization, eslint
This commit is contained in:
parent
4dbff0f5cb
commit
7eac4894ed
12
.eslintrc.json
Normal file
12
.eslintrc.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"semi": "always"
|
||||
}
|
||||
}
|
||||
4
.eslintrc.yml
Normal file
4
.eslintrc.yml
Normal file
@ -0,0 +1,4 @@
|
||||
extends: standard
|
||||
plugins:
|
||||
- standard
|
||||
- promise
|
||||
@ -2,3 +2,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Pixi.js stuff</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Proximity Structures</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
|
||||
<script src="tutorial.js"></script>
|
||||
<script src="js/field.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
111
js/easingFunctions.js
Normal file
111
js/easingFunctions.js
Normal file
@ -0,0 +1,111 @@
|
||||
|
||||
// These functions are taken from: https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
|
||||
// (with slight modifications to the function signatures)
|
||||
|
||||
function linearTweening (t, b, c, d) {
|
||||
// t = current time
|
||||
// b = start value
|
||||
// c = change in value
|
||||
// d = duration
|
||||
return ((c * t) / d) + b
|
||||
}
|
||||
|
||||
function easeOutBounce (t, b, c, d) {
|
||||
if ((t /= d) < (1 / 2.75)) {
|
||||
return c * (7.5625 * t * t) + b
|
||||
} else if (t < (2 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
|
||||
} else if (t < (2.5 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
|
||||
} else {
|
||||
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
|
||||
}
|
||||
}
|
||||
|
||||
function easeInSine (t, b, c, d) {
|
||||
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
|
||||
}
|
||||
|
||||
function easeOutSine (t, b, c, d) {
|
||||
return c * Math.sin(t / d * (Math.PI / 2)) + b
|
||||
}
|
||||
|
||||
function easeInOutSine (t, b, c, d) {
|
||||
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
|
||||
}
|
||||
|
||||
function easeInQuad (t, b, c, d) {
|
||||
return c * (t /= d) * t + b
|
||||
}
|
||||
|
||||
function easeOutQuad (t, b, c, d) {
|
||||
return -c * (t /= d) * (t - 2) + b
|
||||
}
|
||||
|
||||
function easeInOutQuad (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return c / 2 * t * t + b
|
||||
return -c / 2 * ((--t) * (t - 2) - 1) + b
|
||||
}
|
||||
|
||||
function easeInCubic (t, b, c, d) {
|
||||
return c * (t /= d) * t * t + b
|
||||
}
|
||||
|
||||
function easeOutCubic (t, b, c, d) {
|
||||
return c * ((t = t / d - 1) * t * t + 1) + b
|
||||
}
|
||||
|
||||
function easeInOutCubic (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b
|
||||
return c / 2 * ((t -= 2) * t * t + 2) + b
|
||||
}
|
||||
|
||||
function easeInExpo (t, b, c, d) {
|
||||
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
|
||||
}
|
||||
|
||||
function easeOutExpo (t, b, c, d) {
|
||||
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
|
||||
}
|
||||
|
||||
function easeInOutExpo (t, b, c, d) {
|
||||
if (t == 0) return b
|
||||
if (t == d) return b + c
|
||||
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b
|
||||
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
|
||||
}
|
||||
|
||||
function easeInElastic (t, b, c, d) {
|
||||
var s = 1.70158; var p = 0; var a = c
|
||||
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * 0.3
|
||||
if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
||||
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
|
||||
}
|
||||
|
||||
function easeOutElastic (t, b, c, d) {
|
||||
var s = 1.70158; var p = 0; var a = c
|
||||
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * 0.3
|
||||
if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
||||
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
|
||||
}
|
||||
|
||||
function easeInOutElastic (t, b, c, d) {
|
||||
var s = 1.70158; var p = 0; var a = c
|
||||
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (0.3 * 1.5)
|
||||
if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
||||
if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
|
||||
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
|
||||
}
|
||||
|
||||
function easeInCirc (t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
|
||||
}
|
||||
|
||||
function easeOutCirc (t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
|
||||
}
|
||||
|
||||
function easeInOutCirc (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
|
||||
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
|
||||
}
|
||||
455
js/field.js
Normal file
455
js/field.js
Normal file
@ -0,0 +1,455 @@
|
||||
var renderer,
|
||||
stage,
|
||||
screenWidth,
|
||||
screenHeight,
|
||||
counter,
|
||||
totalScreenPixels,
|
||||
cycleDuration,
|
||||
connectionDistance,
|
||||
connectionLimit,
|
||||
pointShiftDistance,
|
||||
colorShiftAmt,
|
||||
disconnectedColorShiftAmt,
|
||||
polygon,
|
||||
startPoints,
|
||||
polygonPoints,
|
||||
tweeningFns,
|
||||
lastLoop,
|
||||
thisLoop,
|
||||
fps,
|
||||
fpsGraphic,
|
||||
scrollDelta,
|
||||
pointShiftBiasX,
|
||||
pointShiftBiasY
|
||||
|
||||
function randomInt (min, max) {
|
||||
// inclusive of min and max
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
function linearTweening (t, b, c, d) {
|
||||
// t = current time
|
||||
// b = start value
|
||||
// c = change in value
|
||||
// d = duration
|
||||
return ((c * t) / d) + b
|
||||
}
|
||||
|
||||
function easeOutBounce (t, b, c, d) {
|
||||
if ((t /= d) < (1 / 2.75)) {
|
||||
return c * (7.5625 * t * t) + b
|
||||
} else if (t < (2 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
|
||||
} else if (t < (2.5 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
|
||||
} else {
|
||||
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
|
||||
}
|
||||
}
|
||||
|
||||
function easeInSine (t, b, c, d) {
|
||||
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
|
||||
}
|
||||
|
||||
function easeOutSine (t, b, c, d) {
|
||||
return c * Math.sin(t / d * (Math.PI / 2)) + b
|
||||
}
|
||||
|
||||
function easeInOutSine (t, b, c, d) {
|
||||
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
|
||||
}
|
||||
|
||||
function easeInQuad (t, b, c, d) {
|
||||
return c * (t /= d) * t + b
|
||||
}
|
||||
|
||||
function easeOutQuad (t, b, c, d) {
|
||||
return -c * (t /= d) * (t - 2) + b
|
||||
}
|
||||
|
||||
function easeInOutQuad (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return c / 2 * t * t + b
|
||||
return -c / 2 * ((--t) * (t - 2) - 1) + b
|
||||
}
|
||||
|
||||
function easeInCubic (t, b, c, d) {
|
||||
return c * (t /= d) * t * t + b
|
||||
}
|
||||
|
||||
function easeOutCubic (t, b, c, d) {
|
||||
return c * ((t = t / d - 1) * t * t + 1) + b
|
||||
}
|
||||
|
||||
function easeInOutCubic (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b
|
||||
return c / 2 * ((t -= 2) * t * t + 2) + b
|
||||
}
|
||||
|
||||
function easeInExpo (t, b, c, d) {
|
||||
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
|
||||
}
|
||||
|
||||
function easeOutExpo (t, b, c, d) {
|
||||
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
|
||||
}
|
||||
|
||||
function easeInOutExpo (t, b, c, d) {
|
||||
if (t == 0) return b
|
||||
if (t == d) return b + c
|
||||
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b
|
||||
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
|
||||
}
|
||||
|
||||
function easeInElastic (t, b, c, d) {
|
||||
var s = 1.70158; var p = 0; var a = c
|
||||
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * 0.3
|
||||
if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
||||
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
|
||||
}
|
||||
|
||||
function easeOutElastic (t, b, c, d) {
|
||||
var s = 1.70158; var p = 0; var a = c
|
||||
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * 0.3
|
||||
if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
||||
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
|
||||
}
|
||||
|
||||
function easeInOutElastic (t, b, c, d) {
|
||||
var s = 1.70158; var p = 0; var a = c
|
||||
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (0.3 * 1.5)
|
||||
if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
||||
if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
|
||||
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
|
||||
}
|
||||
|
||||
function easeInCirc (t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
|
||||
}
|
||||
|
||||
function easeOutCirc (t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
|
||||
}
|
||||
|
||||
function easeInOutCirc (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
|
||||
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
|
||||
}
|
||||
|
||||
// from: http://stackoverflow.com/a/5624139
|
||||
// modified to return integer literal
|
||||
function rgbToHex (color) {
|
||||
return parseInt(((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1), 16)
|
||||
}
|
||||
|
||||
/* Choose a random RGB color */
|
||||
function randomColor () {
|
||||
return {
|
||||
r: Math.floor(Math.random() * (255 + 1)),
|
||||
g: Math.floor(Math.random() * (255 + 1)),
|
||||
b: Math.floor(Math.random() * (255 + 1))
|
||||
}
|
||||
}
|
||||
|
||||
/* Find the average of two RGB colors and return one RGB of that color */
|
||||
function averageColor (color1, color2) {
|
||||
return {
|
||||
r: Math.round((color1.r + color2.r) / 2),
|
||||
g: Math.round((color1.g + color2.g) / 2),
|
||||
b: Math.round((color1.b + color2.b) / 2)
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Find the average of two RGB colors where color1 is weighted against color2 by the given weight.
|
||||
* weight is a decimal between 0 and 1.
|
||||
*/
|
||||
function weightedAverageColor (color1, color2, weight) {
|
||||
return {
|
||||
r: Math.round(((color1.r * (2 * weight)) + (color2.r * (2 * (1 - weight)))) / 2),
|
||||
g: Math.round(((color1.g * (2 * weight)) + (color2.g * (2 * (1 - weight)))) / 2),
|
||||
b: Math.round(((color1.b * (2 * weight)) + (color2.b * (2 * (1 - weight)))) / 2)
|
||||
}
|
||||
}
|
||||
|
||||
/* Darken the color by a factor of 0 to 1, where 1 is black and 0 is white */
|
||||
function shadeColor (color, shadeFactor) {
|
||||
return {
|
||||
r: Math.round(color.r * (1 - shadeFactor)),
|
||||
g: Math.round(color.g * (1 - shadeFactor)),
|
||||
b: Math.round(color.b * (1 - shadeFactor))
|
||||
}
|
||||
}
|
||||
|
||||
/* Given a color component (red, green, or blue int), randomly shift by configurable amount */
|
||||
function shiftColorComponent (component, maxShiftAmt) {
|
||||
var shiftAmt = randomInt(maxShiftAmt * -1, maxShiftAmt),
|
||||
newComponent = component + shiftAmt
|
||||
if ((newComponent < 0) || (newComponent > 255)) {
|
||||
newComponent = component - shiftAmt
|
||||
}
|
||||
return newComponent
|
||||
}
|
||||
|
||||
/* Randomly shift a RGB color by a configurable amount and return new RGB color */
|
||||
function shiftColor (color, maxShiftAmt) {
|
||||
return {
|
||||
r: shiftColorComponent(color.r, maxShiftAmt),
|
||||
g: shiftColorComponent(color.g, maxShiftAmt),
|
||||
b: shiftColorComponent(color.b, maxShiftAmt)
|
||||
}
|
||||
}
|
||||
|
||||
function distance (point1, point2) {
|
||||
var a = point1[0] - point2[0]
|
||||
var b = point1[1] - point2[1]
|
||||
return Math.sqrt(a * a + b * b)
|
||||
}
|
||||
|
||||
function getRandomPoints (numPoints, maxX, maxY, tweeningFns) {
|
||||
var points = [],
|
||||
i, x, y, cycleStart, easingFn
|
||||
for (i = 0; i < numPoints; i++) {
|
||||
x = randomInt(0, maxX - 1)
|
||||
y = randomInt(0, maxY - 1)
|
||||
cycleStart = randomInt(0, cycleDuration - 1)
|
||||
color = randomColor()
|
||||
easingFn = randomInt(0, tweeningFns.length - 1)
|
||||
points[i] = [x, y, cycleStart, color, easingFn]
|
||||
}
|
||||
return points
|
||||
}
|
||||
|
||||
function shiftPointCounter (original, maxShiftAmt) {
|
||||
var shiftAmt = randomInt(maxShiftAmt * -1, 0),
|
||||
newCounter = original + shiftAmt
|
||||
if (newCounter < 0) {
|
||||
newCounter = cycleDuration + shiftAmt
|
||||
}
|
||||
return newCounter
|
||||
}
|
||||
|
||||
function shiftPoints (points, maxShiftAmt, counter, tweeningFns) {
|
||||
var i, shiftX, shiftY, candidateX, candidateY
|
||||
for (i = 0; i < points.original.length; i++) {
|
||||
if (points.target[i][2] >= cycleDuration) {
|
||||
// cycleDuration was reduced and now this point's cycle is out of bounds. Randomly pick a new valid one.
|
||||
points.target[i][2] = randomInt(0, cycleDuration - 1)
|
||||
}
|
||||
if (points.target[i][2] === counter) {
|
||||
points.original[i] = points.target[i].slice()
|
||||
shiftX = randomInt(maxShiftAmt * -1, maxShiftAmt)
|
||||
shiftY = randomInt(maxShiftAmt * -1, maxShiftAmt)
|
||||
if (((shiftX < 0) && (pointShiftBiasX === 1)) || ((shiftX > 0) && (pointShiftBiasX === -1))) {
|
||||
shiftX = shiftX * -1
|
||||
}
|
||||
if (((shiftY < 0) && (pointShiftBiasY === 1)) || ((shiftY > 0) && (pointShiftBiasY === -1))) {
|
||||
shiftY = shiftY * -1
|
||||
}
|
||||
candidateX = points.original[i][0] + shiftX
|
||||
candidateY = points.original[i][1] + shiftY
|
||||
if ((candidateX > screenWidth) || (candidateX < 0)) {
|
||||
candidateX = points.original[i][0] - shiftX
|
||||
}
|
||||
if ((candidateY > screenHeight) || (candidateY < 0)) {
|
||||
candidateY = points.original[i][1] - shiftY
|
||||
}
|
||||
points.target[i][0] = candidateX
|
||||
points.target[i][1] = candidateY
|
||||
points.target[i][4] = randomInt(0, tweeningFns.length - 1)
|
||||
// FIXME: buggy, makes points jump around too fast
|
||||
// points.target[i][2] = shiftPointCounter(points.original[i][2], maxShiftAmt);
|
||||
}
|
||||
}
|
||||
// clear pointShiftBiases now that they have been "used"
|
||||
pointShiftBiasX = 0
|
||||
pointShiftBiasY = 0
|
||||
|
||||
return points
|
||||
}
|
||||
|
||||
function redistributeCycles (points) {
|
||||
for (i = 0; i < points.original.length; i++) {
|
||||
points.target[i][2] = randomInt(0, cycleDuration - 1)
|
||||
}
|
||||
return points
|
||||
}
|
||||
|
||||
function relativeCounter (counter, targetStart) {
|
||||
var relCounter = counter - targetStart
|
||||
if (relCounter < 0) {
|
||||
return cycleDuration + relCounter
|
||||
}
|
||||
return relCounter
|
||||
}
|
||||
|
||||
function drawPolygon (polygon, points, counter, tweeningFns) {
|
||||
var i, j, easingFn, avgColor, connectionCount, dist, proximity
|
||||
// calculate vectors
|
||||
for (i = 0; i < points.original.length; i++) {
|
||||
easingFn = tweeningFns[points.target[i][4]]
|
||||
points.tweened[i][0] = easingFn(relativeCounter(counter, points.target[i][2]), points.original[i][0], points.target[i][0] - points.original[i][0], cycleDuration)
|
||||
points.tweened[i][1] = easingFn(relativeCounter(counter, points.target[i][2]), points.original[i][1], points.target[i][1] - points.original[i][1], cycleDuration)
|
||||
}
|
||||
// draw lines
|
||||
for (i = 0; i < points.original.length; i++) {
|
||||
connectionCount = 0
|
||||
for (j = i + 1; j < points.original.length; j++) {
|
||||
// TODO pick the N (connectionLimit) closest connections instead of the first N that occur sequentially.
|
||||
if (connectionCount >= connectionLimit) break
|
||||
dist = distance(points.tweened[i], points.tweened[j])
|
||||
connectivity = dist / connectionDistance
|
||||
if ((j !== i) && (dist <= connectionDistance)) {
|
||||
// find average color of both points
|
||||
if ((points.tweened[i][2] === counter) || (points.tweened[j][2] === counter)) {
|
||||
// avgColor = shiftColor(avgColor, Math.round(colorShiftAmt * (1 - connectivity)));
|
||||
points.tweened[i][3] = weightedAverageColor(points.tweened[i][3], points.tweened[j][3], connectivity)
|
||||
points.tweened[j][3] = weightedAverageColor(points.tweened[j][3], points.tweened[i][3], connectivity)
|
||||
}
|
||||
avgColor = averageColor(points.tweened[i][3], points.tweened[j][3])
|
||||
shadedColor = shadeColor(avgColor, connectivity)
|
||||
polygon.lineStyle(1, rgbToHex(shadedColor), 1)
|
||||
|
||||
polygon.moveTo(points.tweened[i][0], points.tweened[i][1])
|
||||
polygon.lineTo(points.tweened[j][0], points.tweened[j][1])
|
||||
connectionCount = connectionCount + 1
|
||||
}
|
||||
}
|
||||
|
||||
if (connectionCount === 0) {
|
||||
points.tweened[i][3] = shiftColor(points.tweened[i][3], disconnectedColorShiftAmt)
|
||||
}
|
||||
|
||||
// draw vectors
|
||||
polygon.lineStyle(1, rgbToHex(points.tweened[i][3]), 1)
|
||||
polygon.drawCircle(points.tweened[i][0], points.tweened[i][1], 1)
|
||||
}
|
||||
}
|
||||
|
||||
function loop () {
|
||||
screenWidth = document.documentElement.clientWidth
|
||||
screenHeight = document.documentElement.clientHeight
|
||||
renderer.resize(screenWidth, screenHeight)
|
||||
|
||||
polygon.clear()
|
||||
|
||||
drawPolygon(polygon, polygonPoints, counter, tweeningFns)
|
||||
|
||||
counter += 1
|
||||
counter = counter % cycleDuration
|
||||
|
||||
if (counter === 0) {
|
||||
thisLoop = new Date()
|
||||
fps = Math.round((1000 / (thisLoop - lastLoop)) * cycleDuration)
|
||||
fpsGraphic.setText(fps.toString())
|
||||
lastLoop = thisLoop
|
||||
}
|
||||
|
||||
polygonPoints = shiftPoints(polygonPoints, pointShiftDistance, counter, tweeningFns)
|
||||
|
||||
// var mousePosition = renderer.plugins.interaction.mouse.global;
|
||||
// triangle.x = mousePosition.x;
|
||||
// triangle.y = mousePosition.y;
|
||||
|
||||
// If user scrolled, modify cycleDuration by amount scrolled
|
||||
if (scrollDelta !== 0) {
|
||||
cycleDuration = cycleDuration + scrollDelta
|
||||
if (cycleDuration < 1) {
|
||||
cycleDuration = 1
|
||||
}
|
||||
scrollDelta = 0
|
||||
polygonPoints = redistributeCycles(polygonPoints)
|
||||
}
|
||||
|
||||
// Tell the `renderer` to `render` the `stage`
|
||||
renderer.render(stage)
|
||||
requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
function loopStart () {
|
||||
screenWidth = document.documentElement.clientWidth
|
||||
screenHeight = document.documentElement.clientHeight
|
||||
// Create the renderer
|
||||
renderer = PIXI.autoDetectRenderer(screenWidth, screenHeight, {antialias: true, resolution: 2})
|
||||
|
||||
// Add the canvas to the HTML document
|
||||
document.body.appendChild(renderer.view)
|
||||
|
||||
// Create a container object called the `stage`
|
||||
stage = new PIXI.Container()
|
||||
|
||||
renderer.view.style.position = 'absolute'
|
||||
renderer.view.style.display = 'block'
|
||||
renderer.autoResize = true
|
||||
|
||||
counter = 0
|
||||
totalScreenPixels = screenWidth + screenHeight
|
||||
cycleDuration = 60
|
||||
connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75)
|
||||
connectionLimit = 10
|
||||
pointShiftDistance = Math.round(totalScreenPixels / 45)
|
||||
colorShiftAmt = 80
|
||||
disconnectedColorShiftAmt = 10
|
||||
polygon = new PIXI.Graphics()
|
||||
tweeningFns = [
|
||||
linearTweening,
|
||||
easeInSine,
|
||||
easeOutSine,
|
||||
easeInOutSine,
|
||||
easeInQuad,
|
||||
easeOutQuad,
|
||||
easeInOutQuad,
|
||||
easeInCubic,
|
||||
easeOutCubic,
|
||||
easeInOutCubic
|
||||
// easeOutBounce,
|
||||
// easeInElastic,
|
||||
// easeOutElastic,
|
||||
// easeInOutElastic,
|
||||
// easeInExpo,
|
||||
// easeOutExpo,
|
||||
// easeInOutExpo,
|
||||
// easeInCirc,
|
||||
// easeOutCirc,
|
||||
// easeInOutCirc
|
||||
]
|
||||
startPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, tweeningFns)
|
||||
polygonPoints = {
|
||||
original: startPoints,
|
||||
target: JSON.parse(JSON.stringify(startPoints)),
|
||||
tweened: JSON.parse(JSON.stringify(startPoints))
|
||||
}
|
||||
stage.addChild(polygon)
|
||||
|
||||
fpsGraphic = new PIXI.Text('0', {font: '25px monospace', fill: 'yellow'})
|
||||
fpsGraphic.x = 0
|
||||
fpsGraphic.y = 0
|
||||
stage.addChild(fpsGraphic)
|
||||
|
||||
lastLoop = new Date()
|
||||
|
||||
scrollDelta = 0
|
||||
|
||||
requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
window.onload = loopStart
|
||||
|
||||
window.addEventListener('mousewheel', function (e) {
|
||||
scrollDelta = scrollDelta + ((e.deltaY / 100) * 3)
|
||||
})
|
||||
|
||||
// TODO: use jquery PEP to allow user to "pull" at a point elastically
|
||||
// window.addEventListener('click', function(e) {
|
||||
// });
|
||||
|
||||
window.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 37) { // left
|
||||
pointShiftBiasX = -1
|
||||
} else if (e.keyCode === 38) { // up
|
||||
pointShiftBiasY = -1
|
||||
} else if (e.keyCode === 39) { // right
|
||||
pointShiftBiasX = 1
|
||||
} else if (e.keyCode === 40) { // down
|
||||
pointShiftBiasY = 1
|
||||
}
|
||||
})
|
||||
129
js/tutorial.js
Normal file
129
js/tutorial.js
Normal file
@ -0,0 +1,129 @@
|
||||
// Create the renderer
|
||||
var renderer = PIXI.autoDetectRenderer(256, 256, {antialias: true})
|
||||
|
||||
// Add the canvas to the HTML document
|
||||
document.body.appendChild(renderer.view)
|
||||
|
||||
// Create a container object called the `stage`
|
||||
var stage = new PIXI.Container()
|
||||
|
||||
renderer.view.style.position = 'absolute'
|
||||
renderer.view.style.display = 'block'
|
||||
renderer.autoResize = true
|
||||
renderer.resize(window.innerWidth, window.innerHeight)
|
||||
|
||||
var counter = 0,
|
||||
cycleDuration = 60,
|
||||
tri = {
|
||||
original: [
|
||||
[0, 0],
|
||||
[-50, 50],
|
||||
[50, 50]
|
||||
],
|
||||
target: [
|
||||
[0, 0],
|
||||
[-50, 50],
|
||||
[50, 50]
|
||||
]
|
||||
},
|
||||
triangle = new PIXI.Graphics()
|
||||
|
||||
stage.addChild(triangle)
|
||||
|
||||
function randomInt (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
function linearTweening (t, b, c, d) {
|
||||
// t = current time
|
||||
// b = start value
|
||||
// c = change in value
|
||||
// d = duration
|
||||
return ((c * t) / d) + b
|
||||
}
|
||||
|
||||
function easeOutBounce (t, b, c, d) {
|
||||
if ((t /= d) < (1 / 2.75)) {
|
||||
return c * (7.5625 * t * t) + b
|
||||
} else if (t < (2 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
|
||||
} else if (t < (2.5 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
|
||||
} else {
|
||||
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
|
||||
}
|
||||
}
|
||||
|
||||
function easeInOutExpo (t, b, c, d) {
|
||||
if (t == 0) return b
|
||||
if (t == d) return b + c
|
||||
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b
|
||||
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
|
||||
}
|
||||
|
||||
function drawLine (x1, y1, x2, y2) {
|
||||
var line = new PIXI.Graphics()
|
||||
line.lineStyle(1, 0xFFFFFF, 1)
|
||||
line.moveTo(x1, y1)
|
||||
line.lineTo(x2, y2)
|
||||
line.x = x1
|
||||
line.y = y1
|
||||
stage.addChild(line)
|
||||
}
|
||||
|
||||
function drawShiftingTriangle (triangle, originalPoints, targetPoints, counter, easingFn) {
|
||||
var i = 0
|
||||
if (counter === 0) {
|
||||
// Given originalPoints, randomly shifts them by some amount, draws it, and returns new array of points
|
||||
var newPoints = []
|
||||
// Start new cycle. New original is old target. New target is newly generated newPoints.
|
||||
originalPoints = targetPoints
|
||||
|
||||
for (i = 0; i < originalPoints.length; i++) {
|
||||
newPoints[i] = [originalPoints[i][0] + randomInt(-10, 10),
|
||||
originalPoints[i][1] + randomInt(-10, 10)]
|
||||
}
|
||||
targetPoints = newPoints
|
||||
}
|
||||
triangle.lineStyle(1, 0xFAFAFA, 1)
|
||||
// triangle.beginFill(0x66FF33);
|
||||
for (i = 0; i < 4; i++) {
|
||||
if (i === 0) {
|
||||
triangle.moveTo(easingFn(counter, originalPoints[0][0], targetPoints[0][0] - originalPoints[0][0], cycleDuration),
|
||||
easingFn(counter, originalPoints[0][1], targetPoints[0][1] - originalPoints[0][1], cycleDuration))
|
||||
} else if (i === 3) {
|
||||
triangle.lineTo(easingFn(counter, originalPoints[0][0], targetPoints[0][0] - originalPoints[0][0], cycleDuration),
|
||||
easingFn(counter, originalPoints[0][1], targetPoints[0][1] - originalPoints[0][1], cycleDuration))
|
||||
} else {
|
||||
triangle.lineTo(easingFn(counter, originalPoints[i][0], targetPoints[i][0] - originalPoints[i][0], cycleDuration),
|
||||
easingFn(counter, originalPoints[i][1], targetPoints[i][1] - originalPoints[i][1], cycleDuration))
|
||||
}
|
||||
}
|
||||
// triangle.endFill();
|
||||
|
||||
return {
|
||||
original: originalPoints,
|
||||
target: targetPoints
|
||||
}
|
||||
}
|
||||
|
||||
function loop () {
|
||||
requestAnimationFrame(loop)
|
||||
|
||||
triangle.clear()
|
||||
|
||||
// drawLine(0, 0, counter, counter);
|
||||
tri = drawShiftingTriangle(triangle, tri.original, tri.target, counter, linearTweening)
|
||||
|
||||
counter += 1
|
||||
counter = counter % cycleDuration
|
||||
|
||||
var mousePosition = renderer.plugins.interaction.mouse.global
|
||||
triangle.x = mousePosition.x
|
||||
triangle.y = mousePosition.y
|
||||
|
||||
// Tell the `renderer` to `render` the `stage`
|
||||
renderer.render(stage)
|
||||
}
|
||||
|
||||
loop()
|
||||
5
notes.md
Normal file
5
notes.md
Normal file
@ -0,0 +1,5 @@
|
||||
Space the dots out more. Don't let them get close.
|
||||
|
||||
Rotate the dots around the page in a circular pattern.
|
||||
|
||||
|
||||
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "proximity-structures",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"eslint": "eslint",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@git.hallada.net:pixi.git"
|
||||
},
|
||||
"author": "Tyler Hallada",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"eslint": "^3.17.0",
|
||||
"eslint-config-airbnb-base": "^11.1.1",
|
||||
"eslint-config-standard": "^7.0.0",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-promise": "^3.5.0",
|
||||
"eslint-plugin-standard": "^2.1.1"
|
||||
}
|
||||
}
|
||||
129
tutorial.js
129
tutorial.js
@ -1,129 +0,0 @@
|
||||
//Create the renderer
|
||||
var renderer = PIXI.autoDetectRenderer(256, 256, {antialias: true});
|
||||
|
||||
//Add the canvas to the HTML document
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
//Create a container object called the `stage`
|
||||
var stage = new PIXI.Container();
|
||||
|
||||
renderer.view.style.position = "absolute";
|
||||
renderer.view.style.display = "block";
|
||||
renderer.autoResize = true;
|
||||
renderer.resize(window.innerWidth, window.innerHeight);
|
||||
|
||||
var counter = 0,
|
||||
cycleDuration = 60,
|
||||
tri = {
|
||||
original: [
|
||||
[0, 0],
|
||||
[-50, 50],
|
||||
[50, 50]
|
||||
],
|
||||
target: [
|
||||
[0, 0],
|
||||
[-50, 50],
|
||||
[50, 50]
|
||||
]
|
||||
},
|
||||
triangle = new PIXI.Graphics();
|
||||
|
||||
stage.addChild(triangle);
|
||||
|
||||
function randomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function linearTweening(t, b, c, d) {
|
||||
// t = current time
|
||||
// b = start value
|
||||
// c = change in value
|
||||
// d = duration
|
||||
return ((c * t) / d) + b;
|
||||
}
|
||||
|
||||
function easeOutBounce(t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
}
|
||||
|
||||
function easeInOutExpo(t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
}
|
||||
|
||||
function drawLine(x1, y1, x2, y2) {
|
||||
var line = new PIXI.Graphics();
|
||||
line.lineStyle(1, 0xFFFFFF, 1);
|
||||
line.moveTo(x1, y1);
|
||||
line.lineTo(x2, y2);
|
||||
line.x = x1;
|
||||
line.y = y1;
|
||||
stage.addChild(line);
|
||||
}
|
||||
|
||||
function drawShiftingTriangle(triangle, originalPoints, targetPoints, counter, easingFn) {
|
||||
var i = 0;
|
||||
if (counter === 0) {
|
||||
// Given originalPoints, randomly shifts them by some amount, draws it, and returns new array of points
|
||||
var newPoints = [];
|
||||
// Start new cycle. New original is old target. New target is newly generated newPoints.
|
||||
originalPoints = targetPoints;
|
||||
|
||||
for (i = 0; i < originalPoints.length; i++) {
|
||||
newPoints[i] = [originalPoints[i][0] + randomInt(-10, 10),
|
||||
originalPoints[i][1] + randomInt(-10, 10)];
|
||||
}
|
||||
targetPoints = newPoints;
|
||||
}
|
||||
triangle.lineStyle(1, 0xFAFAFA, 1);
|
||||
// triangle.beginFill(0x66FF33);
|
||||
for (i = 0; i < 4; i++) {
|
||||
if (i === 0) {
|
||||
triangle.moveTo(easingFn(counter, originalPoints[0][0], targetPoints[0][0] - originalPoints[0][0], cycleDuration),
|
||||
easingFn(counter, originalPoints[0][1], targetPoints[0][1] - originalPoints[0][1], cycleDuration));
|
||||
} else if (i === 3) {
|
||||
triangle.lineTo(easingFn(counter, originalPoints[0][0], targetPoints[0][0] - originalPoints[0][0], cycleDuration),
|
||||
easingFn(counter, originalPoints[0][1], targetPoints[0][1] - originalPoints[0][1], cycleDuration));
|
||||
} else {
|
||||
triangle.lineTo(easingFn(counter, originalPoints[i][0], targetPoints[i][0] - originalPoints[i][0], cycleDuration),
|
||||
easingFn(counter, originalPoints[i][1], targetPoints[i][1] - originalPoints[i][1], cycleDuration));
|
||||
}
|
||||
}
|
||||
// triangle.endFill();
|
||||
|
||||
return {
|
||||
original: originalPoints,
|
||||
target: targetPoints
|
||||
};
|
||||
}
|
||||
|
||||
function loop(){
|
||||
requestAnimationFrame(loop);
|
||||
|
||||
triangle.clear();
|
||||
|
||||
// drawLine(0, 0, counter, counter);
|
||||
tri = drawShiftingTriangle(triangle, tri.original, tri.target, counter, linearTweening);
|
||||
|
||||
counter += 1;
|
||||
counter = counter % cycleDuration;
|
||||
|
||||
var mousePosition = renderer.plugins.interaction.mouse.global;
|
||||
triangle.x = mousePosition.x;
|
||||
triangle.y = mousePosition.y;
|
||||
|
||||
//Tell the `renderer` to `render` the `stage`
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
loop();
|
||||
Loading…
Reference in New Issue
Block a user