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

Better shifting triangle

Browse Source
This commit is contained in:
Tyler Hallada 2017-02-20 04:42:55 -05:00
parent 54901dfbdc
commit 4dbff0f5cb
1 changed files with 79 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
tutorial.js
View File

@ -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)];
}
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);
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;
return newPoints;
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);
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;