diff --git a/tutorial.js b/tutorial.js index 0c261dc..0d6d040 100644 --- a/tutorial.js +++ b/tutorial.js @@ -1,5 +1,5 @@ //Create the renderer -var renderer = PIXI.autoDetectRenderer(256, 256); +var renderer = PIXI.autoDetectRenderer(256, 256, {antialias: true}); //Add the canvas to the HTML document document.body.appendChild(renderer.view); @@ -13,17 +13,54 @@ renderer.autoResize = true; renderer.resize(window.innerWidth, window.innerHeight); var counter = 0, - triPoints = [ - [0, 0], - [-50, 50], - [50, 50] - ], + 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); @@ -34,35 +71,52 @@ function drawLine(x1, y1, x2, y2) { stage.addChild(line); } -function drawShiftingTriangle(triangle, arrayOfPoints) { - // Given arrayOfPoints, randomly shifts them by some amount, draws it, and returns new arrayOfPoints - var newPoints = []; - for (var i = 0; i < arrayOfPoints.length; i++) { - newPoints[i] = [arrayOfPoints[i][0] + randomInt(-10, 10), - arrayOfPoints[i][1] + randomInt(-10, 10)]; +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(4, 0xFF3300, 1); - triangle.beginFill(0x66FF33); - triangle.moveTo(newPoints[0][0], newPoints[0][1]); - triangle.lineTo(newPoints[1][0], newPoints[1][1]); - triangle.lineTo(newPoints[2][0], newPoints[2][1]); - triangle.lineTo(newPoints[0][0], newPoints[0][1]); - triangle.endFill(); - stage.addChild(triangle); + 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 newPoints; + return { + original: originalPoints, + target: targetPoints + }; } function loop(){ requestAnimationFrame(loop); - counter += 1; - counter = counter % 60; - triangle.clear(); // drawLine(0, 0, counter, counter); - triPoints = drawShiftingTriangle(triangle, triPoints); + 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;