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 2 (pairs/many-to-many)--------------------------
this._sketch[2] = 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.minPoints = 4;
p.props.maxPoints = 30;
p.props.minRadius = 0;
p.props.maxRadius = 60;
p.props.motionRange = 1;
p.props.pointVectors = [];
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.margin = p.props.w * 0.01;
p.props.xMin = p.props.margin;
p.props.xMax = p.props.w - p.props.margin;
p.props.yMin = p.props.margin;
p.props.yMax = p.props.h - p.props.margin;
p.props.randomSeed = p.random(0, 100);
p.props.manyJoins = true;
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);
};
p.restart = function () {
p.props.animProgress = 0;
};
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.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);
if (p.props.autorun) {
if (p.props.animProgress < 1) {
p.props.animProgress += p.props.animIncrement;
}
}
// how many points?
var points = p.floor(p.map(p.props.params.x, 0, 1, p.props.minPoints, p.props.maxPoints));
// even only
if (points % 2 != 0) {
points -= 1;
}
p.props.pointVectors = [];
// make "random" deterministic every frame
p.randomSeed(p.props.randomSeed);
// set starting to XY
for (var i = 0; i < points; i++) {
var pX = p.random(p.props.xMin, p.props.xMax);
var pY = p.random(p.props.yMin, p.props.yMax);
p.props.pointVectors[i] = p.createVector(pX, pY);
}
// draw the things based on progress
p.anim();
};
p.anim = function () {
//p.props.pointVectors
var rangeX = p.props.w * (p.props.motionRange * p.props.params.z);
var rangeY = p.props.h * (p.props.motionRange * p.props.params.z);
p.noStroke();
p.fill(p.props.params.color_fg);
for (var i = 0; i < p.props.pointVectors.length; i++) {
var xMotion = p.map(p.noise(i + (p.frameCount * 0.005)), 0, 1, -rangeX, rangeX);
var yMotion = p.map(p.noise(i + (p.frameCount * 0.0025)), 0, 1, -rangeY, rangeY);
p.props.pointVectors[i].x = p.constrain(p.props.pointVectors[i].x + xMotion, p.props.xMin, p.props.xMax);
p.props.pointVectors[i].y = p.constrain(p.props.pointVectors[i].y + yMotion, p.props.yMin, p.props.yMax);
}
// lines
p.stroke(p.wAlpha(p.props.params.color_fg,1));
if (p.props.manyJoins == false) {
p.strokeWeight(1 * AnimApp.easeInOutQuart(p.props.animProgress));
for (var i = 0; i < p.props.pointVectors.length - 1; i += 2) {
p.line(p.props.pointVectors[i].x, p.props.pointVectors[i].y, p.props.pointVectors[i + 1].x, p.props.pointVectors[i + 1].y)
}
} else if (p.props.manyJoins == true) {
p.strokeWeight(1 * AnimApp.easeInOutQuart(p.props.animProgress));
for (var i = 0; i < p.props.pointVectors.length; i++) {
for (var j = i; j < p.props.pointVectors.length; j++) {
p.line(p.props.pointVectors[i].x, p.props.pointVectors[i].y, p.props.pointVectors[j].x, p.props.pointVectors[j].y)
}
}
}
// nodes
for (var i = 0; i < p.props.pointVectors.length; i++) {
var pRadius = p.map(p.sin(i + p.frameCount * 0.01) * p.props.params.y, 0, 1, p.props.minRadius, p.props.maxRadius) * AnimApp.easeInOutQuart(p.props.animProgress);
p.ellipse(p.props.pointVectors[i].x, p.props.pointVectors[i].y, pRadius, pRadius);
}
}
// utilities
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": 2, "color_bg": "#202020", "color_fg": "#ffffff", "toggle": "off", "x": "0.1", "y": "0.5", "z": "0.5", "mode": "composer" } }' }
];
// init
AnimApp.init(animationsManifest, false); // animations manifest, debug output
!
