diff --git a/js/easingFunctions.js b/js/easingFunctions.js deleted file mode 100644 index e5b262e..0000000 --- a/js/easingFunctions.js +++ /dev/null @@ -1,111 +0,0 @@ - -// 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 -} diff --git a/js/tutorial.js b/js/tutorial.js deleted file mode 100644 index 110303b..0000000 --- a/js/tutorial.js +++ /dev/null @@ -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 + 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()