AnimApp = {
_appVersion: "BETA 001",
_testing: false,
_manifest: null,
_configJSON: [],
_p5_anims: [],
//_mode: "composer",
//_container: null,
_sketch: [],
_uisettings: [],
debug: function (message) {
if (this._testing) { console.log(message) };
},
somePublicFunction: function() {
// something
},
// init
init: function (manifest, testing) { // configJSON, testing
this._manifest = manifest;
//this._mode = mode;
this._testing = testing;
this.debug("App.init, waiting for Document load");
this.debug("Renderer Mode: " + this._mode);
// wait for load
this.wait();
},
wait: function () {
$(document).ready(function () {
AnimApp.debug("Document Loaded")
AnimApp.start();
});
},
// application runs here once doc loaded
start: function () {
this.debug("App Ver: " + this._appVersion);
// define sketches
this.defineSketches();
// init p5 anims
for (i = 0; i < AnimApp._manifest.length; i++) {
this.initAnim(i, AnimApp._manifest[i].container, JSON.parse(AnimApp._manifest[i].configJSON));
}
// ui
for (i = 0; i < AnimApp._manifest.length; i++) {
this.initUI(i, AnimApp._manifest[i].container, JSON.parse(AnimApp._manifest[i].configJSON));
}
},
// ui methods
initUI: function (id, container, configJSON) {
if (configJSON.params.mode == "composer") {
this._uisettings[id] = {
color_bg: configJSON.params.color_bg,
color_fg: configJSON.params.color_fg,
x: configJSON.params.x,
y: configJSON.params.y,
z: configJSON.params.z
};
settings = QuickSettings.create();
settings.setGlobalChangeHandler(function () { AnimApp.uiChange(id); });
settings.bindColor("color_bg", configJSON.params.color_bg, this._uisettings[id]);
settings.bindColor("color_fg", configJSON.params.color_fg, this._uisettings[id]);
settings.bindRange("x", 0, 1, configJSON.params.x, 0.01, this._uisettings[id]);
settings.bindRange("y", 0, 1, configJSON.params.y, 0.01, this._uisettings[id]);
settings.bindRange("z", 0, 1, configJSON.params.z, 0.01, this._uisettings[id]);
settings.addButton("Restart", function () {
AnimApp.uiRestart(id);
});
settings.setPosition((container.offset().left + 20), container.offset().top + 20);
AnimApp.uiCopySettings(id);
}
},
uiChange: function (id) {
AnimApp._p5_anims[id].updateParams();
AnimApp.uiCopySettings(id);
},
uiRestart: function (id) {
AnimApp._p5_anims[id].restart();
},
uiCopySettings: function (id) {
if (AnimApp._p5_anims[id].props.params.mode == "composer") {
if ((AnimApp._manifest[id].copyContainer != undefined) && (AnimApp._manifest[id].copyContainer != null)) {
// template param string
var paramString = '"animVariation": [animVariation], "color_bg": "[color_bg]", "color_fg": "[color_fg]", "toggle": "[toggle]", "x": "[x]", "y": "[y]", "z": "[z]", "i": "[i]", "mode": "renderer"';
// replace with param values
paramString = paramString.replace("[animVariation]", AnimApp._p5_anims[id].props.params.animVariation);
paramString = paramString.replace("[color_bg]", AnimApp._p5_anims[id].props.params.color_bg);
paramString = paramString.replace("[color_fg]", AnimApp._p5_anims[id].props.params.color_fg);
paramString = paramString.replace("[x]", AnimApp._p5_anims[id].props.params.x);
paramString = paramString.replace("[y]", AnimApp._p5_anims[id].props.params.y);
paramString = paramString.replace("[z]", AnimApp._p5_anims[id].props.params.z);
}
}
},
// p5
initAnim: function (id, container, configJSON) {
AnimApp._p5_anims[id] = new p5(this.getSketch(configJSON.params.animVariation), container.attr('id'));
AnimApp._p5_anims[id].initParams(id, configJSON.params, container.width(), container.height());
},
getSketch: function (id) {
return this._sketch[id];
},
defineSketches: function () {
// --------------------- sketch 3 (intersections) --------------------------
this._sketch[3] = function (p) {
p.props = [];
p.props.id = null;
p.props.hasParams = false;
p.props.hasInit = false;
p.props.params;
p.props.w;
p.props.h;
p.props.iconPath;
p.props.iconFiles = [];
p.props.fr = 60; // framerate
p.props.animFrames = 90;
p.props.animIncrement = 1 / p.props.animFrames;
p.props.animProgress = 0.0;
p.props.autorun = true;
p.props.minActive = 2;
p.props.maxActive = 20;
p.props.activeLines = p.props.maxActive;
p.props.minTotal = 5;
p.props.maxTotal = 20;
p.props.linesTotal = p.props.maxTotal;
p.props.minRadius = 5;
p.props.maxRadius = 60;
p.props.motionRange = 1;
p.props.pointVectors = [];
p.props.lines = [];
p.initParams = function (id, params, w, h) {
p.props.id = id;
p.props.params = params;
p.props.w = w;
p.props.h = h;
p.props.randomSeed = p.random(0, 100);
p.props.hasParams = true;
};
p.updateParams = function () {
p.props.params.color_bg = AnimApp._uisettings[p.props.id].color_bg;
p.props.params.color_fg = AnimApp._uisettings[p.props.id].color_fg;
p.props.params.x = p.float(AnimApp._uisettings[p.props.id].x);
p.props.params.y = p.float(AnimApp._uisettings[p.props.id].y);
p.props.params.z = p.float(AnimApp._uisettings[p.props.id].z);
// this sketch requires restart after param change
p.restart();
};
p.restart = function () {
p.props.animProgress = 0;
p.props.pointVectors = [];
p.props.lines = [];
};
p.initSketch = function () {
p.props.hasInit = true;
p.resizeCanvas(p.props.w, p.props.h);
};
p.setup = function () {
p.frameRate(p.props.fr)
p.imageMode(p.CENTER);
p.background(p.props.params.color_bg);
p.smooth();
};
p.draw = function () {
if (p.props.hasParams == true) { // have we got params passed in yet
if (p.props.hasInit == false) { // did we init sketch, size etc
p.initSketch();
} else {
p.drawState();
}
}
};
p.drawState = function () {
//bg
p.background(p.props.params.color_bg);
// make "random" deterministic every frame
p.randomSeed(p.props.randomSeed);
// update vars based on UI state
p.props.linesTotal = p.floor(p.map(p.props.params.x, 0, 1, p.props.minTotal, p.props.maxTotal));
p.props.activeLines = p.floor(p.map(p.props.params.y, 0, 1, p.props.minActive, p.props.maxActive));
if (p.props.autorun) {
if (p.props.animProgress < 1) {
p.props.animProgress += p.props.animIncrement;
}
}
if (p.props.lines.length < p.props.linesTotal) {
// count active
var active = 0;
for (var l = 0; l < p.props.lines.length; l++) {
if (p.props.lines[l].active == true) {
active++;
}
}
// make any new lines
for (var l = active; l < p.props.activeLines; l++) {
p.props.lines.push(p.newLine(p.props.lines.length));
}
}
// check state
for (var l = 0; l < p.props.lines.length; l++) {
var line = p.props.lines[l];
// check intersection with others
for (var o = l; o < p.props.lines.length; o++) {
if (o != l) {
var otherline = p.props.lines[o];
var intersection = p.segmentIntersect(line.p0, line.p1, otherline.p0, otherline.p1)
if (intersection) {
var ix = p.floor(intersection.x);
var iy = p.floor(intersection.y);
if (p.havePoint(ix, iy) == false) {
p.props.pointVectors.push(p.createVector(ix, iy, 0));
//line.active = false;
//otherline.active = false;
break;
}
}
}
}
// check out of bounds
if (line.active == true) {
if (p.outOfBounds(l) == true) {
line.active = false;
}
}
}
// draw the things based on progress
p.anim();
};
p.newLine = function (index) {
var origin = AnimApp.getRandomIntInclusive(0, 3); // t,r,b,l
var angleTighten = 0.1;
var angleRangeMin = (origin * 0.25) + angleTighten;
var angleRangeMax = (origin * 0.25) + (0.5 - angleTighten);
//
var x0, y0;
if (origin == 0) {
x0 = p.noise(index) * p.width;
y0 = 0;
} else if (origin == 1) {
x0 = p.width;
y0 = p.noise(index) * p.height;
} else if (origin == 2) {
x0 = p.noise(index) * p.width;
y0 = p.height;
} else if (origin == 3) {
x0 = 0;
y0 = p.noise(index) * p.height;
}
var angle = AnimApp.getRandomArbitrary(angleRangeMin, angleRangeMax) * p.TWO_PI,
length = 0,
x1 = x0 + Math.cos(angle) * length,
y1 = y0 + Math.sin(angle) * length,
line = { p0: { x: x0, y: y0 }, p1: { x: x1, y: y1 }, length: length, angle: angle, active: true };
return line;
}
p.havePoint = function (x, y) {
var pointLogged = false;
for (var i = 0; i < p.props.pointVectors.length; i++) {
if ((p.props.pointVectors[i].x == x) && (p.props.pointVectors[i].y == y)) {
pointLogged = true;
break;
}
}
return pointLogged;
}
p.outOfBounds = function (l) {
var isOut = false;
var margin = 20;
lx = p.props.lines[l].p1.x;
ly = p.props.lines[l].p1.y;
if ((lx > (p.width + margin)) || (lx < (0 - margin)) || (ly > (p.height + +margin)) || (ly < (0 - margin))) {
isOut = true;
}
return isOut;
}
p.anim = function () {
p.fill(p.props.params.color_fg);
p.stroke(p.props.params.color_fg);
p.strokeWeight(1 * AnimApp.easeInOutQuart(p.props.animProgress));
// grow lines
for (var l = 0; l < p.props.lines.length; l++) {
var line = p.props.lines[l];
if (line.active == true) {
line.length += 2;
line.p1.x = line.p0.x + Math.cos(line.angle) * line.length;
line.p1.y = line.p0.y + Math.sin(line.angle) * line.length;
}
}
// draw lines
for (var l = 0; l < p.props.lines.length; l++) {
var line = p.props.lines[l];
p.line(line.p0.x, line.p0.y, line.p1.x, line.p1.y);
// end ellipse
//pRadius = 10 * AnimApp.easeInOutQuart(p.props.animProgress);
//p.ellipse(line.p1.x, line.p1.y, pRadius, pRadius)
}
// draw points
for (var i = 0; i < p.props.pointVectors.length; i++) {
p.noStroke();
p.props.pointVectors[i].z = p.min(p.props.pointVectors[i].z + 0.005, 1);
pRadius = p.map(p.noise(p.props.pointVectors[i].x) * (AnimApp.easeOutQuart(p.props.pointVectors[i].z) * p.props.params.z), 0, 1, p.props.minRadius, p.props.maxRadius);
p.ellipse(p.props.pointVectors[i].x, p.props.pointVectors[i].y, pRadius, pRadius);
}
}
// utilities
// function by @bit101 : https://jsbin.com/kekusiv/1/edit?js,output
p.segmentIntersect = function (p0, p1, p2, p3) {
var A1 = p1.y - p0.y,
B1 = p0.x - p1.x,
C1 = A1 * p0.x + B1 * p0.y,
A2 = p3.y - p2.y,
B2 = p2.x - p3.x,
C2 = A2 * p2.x + B2 * p2.y,
denominator = A1 * B2 - A2 * B1;
if (denominator === 0) {
return null;
}
var intersectX = (B2 * C1 - B1 * C2) / denominator,
intersectY = (A1 * C2 - A2 * C1) / denominator,
rx0 = (intersectX - p0.x) / (p1.x - p0.x),
ry0 = (intersectY - p0.y) / (p1.y - p0.y),
rx1 = (intersectX - p2.x) / (p3.x - p2.x),
ry1 = (intersectY - p2.y) / (p3.y - p2.y);
if (((rx0 >= 0 && rx0 <= 1) || (ry0 >= 0 && ry0 <= 1)) &&
((rx1 >= 0 && rx1 <= 1) || (ry1 >= 0 && ry1 <= 1))) {
return {
x: intersectX,
y: intersectY
};
}
else {
return null;
}
}
p.wAlpha = function (c, a) {
var col = p.color(c);
return p.color('rgba(' + [p.red(col), p.green(col), p.blue(col), a].join(',') + ')');
}
};
},
// Shared Utilities
// Returns a random integer between min (included) and max (included)
// Using Math.round() will give you a non-uniform distribution!
getRandomIntInclusive: function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
// Returns a random number between min (inclusive) and max (exclusive)
getRandomArbitrary: function(min, max) {
return Math.random() * (max - min) + min;
},
// easing utility functions based on : https://gist.github.com/cocopon/1ec025bcffb3fd7995db
easeOutSine: function (t) {
return p.sin(t * (p.PI / 2));
},
easeInSine: function (t) {
return -p.cos(t * (p.PI / 2)) + 1.0;
},
easeOutQuart: function (t) {
--t;
return 1.0 - t * t * t * t;
},
easeInQuart: function (t) {
return t * t * t * t;
},
easeInOutQuart: function (t) {
t *= 2;
if (t < 1) {
return 0.5 * t * t * t * t;
}
t -= 2;
return -0.5 * (t * t * t * t - 2);
}
}
// page animations manifest
var animationsManifest = [
{ container: $("#animContanier_a"), copyContainer: $("#copyParams_a"), configJSON: '{ "params" : {"animVariation": 3, "color_bg": "#202020", "color_fg": "#ffffff", "toggle": "off", "x": "0.5", "y": "0.5", "z": "0.5", "mode": "composer" } }' }
];
// init
AnimApp.init(animationsManifest, false); // animations manifest, debug output
!
