AnimApp = {
_appVersion: "BITE 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));
}
},
// 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 0 (connected neighbours) ----------------
this._sketch[0] = 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.fr = 60; // framerate
p.props.animFrames_target = 250;//250;
p.props.animFrames = p.props.animFrames_target;
p.props.animIncrement = 1 / p.props.animFrames;
p.props.animProgress = 0.0;
p.props.autorun = true;
p.props.mediaQueryMobile = 768;
p.props.mediaQueryTablet = 1024;
p.props.mediaType = "desktop" // desktop/tablet/mobile
p.props.mediaTypeFactorMobile = 0.5; // usage: reduce number of points for mobile etc
p.props.mediaTypeFactorTablet = 0.75;
p.props.mediaTypeFactorDesktop = 1;
p.props.mediaTypeFactor = 1;
p.props.criticalDimension;
p.props.animCenterX;
p.props.animCenterY;
p.props.blurBGScreenRatio = 0.8;
p.props.blurBGW;
p.props.blurBGH;
p.props.logoScreenRatio = 0.25;
p.props.logoW;
p.props.logoH;
p.props.logoDiameter;
p.props.logoDiameterMax = 0;
p.props.logoDiameterMin = 0.95;
p.props.logoCircleLineWeight = 0.04; // % of logoDiameter
p.props.pointMinDiameter = 0.01; // % of logoDiameter
p.props.pointMaxDiameter = 0.12; // % of logoDiameter
p.props.pointColours = [];
p.props.pointColourCount = 0;
p.props.logoTypePad = 0.16;
p.props.logoCenter = null;
p.props.minPoints = 3;
p.props.maxPoints = 500;
p.props.maxFrameOffset = 130;
p.props.pointVectors = [];
p.logoB = null;
p.tintLogoType = null;
p.blurBGImage = null;
p.bgs = [];
p.showFPS = false;
p.currentFPS = 0;
p.initParams = function (id, params, w, h) {
p.props.id = id;
p.props.params = params;
p.props.w = w;
p.props.h = h;
// crit dimensions
if (w >= h) {
p.props.criticalDimension = h;
} else {
p.props.criticalDimension = w;
}
// mediaQuery
if (p.props.w < p.props.mediaQueryMobile) {
p.props.mediaType = "mobile"
p.props.mediaTypeFactor = p.props.mediaTypeFactorMobile;
} else if ((p.props.w >= p.props.mediaQueryMobile) && (p.props.w <= p.props.mediaQueryTablet)) {
p.props.mediaType = "tablet"
p.props.mediaTypeFactor = p.props.mediaTypeFactorTablet;
} else {
p.props.mediaType = "desktop"
p.props.mediaTypeFactor = p.props.mediaTypeFactorDesktop;
}
// anim position
p.props.animCenterX = p.props.w * 0.5;
p.props.animCenterY = p.props.h * 0.5;
// B Logo size
p.props.logoW = p.props.criticalDimension * p.props.logoScreenRatio;
p.props.logoH = p.props.logoW;
// blur BG size
p.props.blurBGW = p.props.criticalDimension * p.props.blurBGScreenRatio;
p.props.blurBGH = p.props.blurBGW;
// calc logo size
p.props.logoDiameter = p.props.criticalDimension * p.props.logoDiameterMax;
// define colours
p.props.pointColours[0] = "#ed1c24";
p.props.pointColours[1] = "#1b75bc";
p.props.pointColours[2] = "#ec008c";
p.props.pointColours[3] = "#8dc63f";
p.props.pointColours[4] = "#48acc6";
p.props.pointColours[5] = "#8065a3";
p.props.pointColourCount = p.props.pointColours.length;
p.props.hasParams = true;
};
p.restart = function () {
p.props.animProgress = 0;
};
p.initSketch = function () {
p.props.hasInit = true;
p.resizeCanvas(p.props.w, p.props.h);
};
p.preload = function () {
// logotype
p.logoB = p.loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/312799/bite_spalsh-bite-b.png');
//blured bg
p.blurBGImage = p.loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/312799/bite_logo-blur-bg.jpg');
// bgs
if (p.props.params.bg_image != "none") {
p.bgs[0] = p.loadImage(p.props.params.bg_image);
}
};
p.setup = function () {
p.randomSeed(1);
p.frameRate(p.props.fr)
p.imageMode(p.CENTER);
p.smooth(8);
};
p.windowResized = function () {
p.props.w = p.windowWidth;
p.props.h = p.windowHeight;
// mediaQuery
if (p.props.w < p.props.mediaQueryMobile) {
p.props.mediaType = "mobile"
p.props.mediaTypeFactor = p.props.mediaTypeFactorMobile;
} else if ((p.props.w >= p.props.mediaQueryMobile) && (p.props.w <= p.props.mediaQueryTablet)) {
p.props.mediaType = "tablet"
p.props.mediaTypeFactor = p.props.mediaTypeFactorTablet;
} else {
p.props.mediaType = "desktop"
p.props.mediaTypeFactor = p.props.mediaTypeFactorDesktop;
}
// crit dimensions
if (p.props.w >= p.props.h) {
p.props.criticalDimension = p.props.h;
} else {
p.props.criticalDimension = p.props.w;
}
// anim position
p.props.animCenterX = p.props.w * 0.5;
p.props.animCenterY = p.props.h * 0.5;
// B Logo size
p.props.logoW = p.props.criticalDimension * p.props.logoScreenRatio;
p.props.logoH = p.props.logoW;
// blur BG size
p.props.blurBGW = p.props.criticalDimension * p.props.blurBGScreenRatio;
p.props.blurBGH = p.props.blurBGW;
p.resizeCanvas(p.props.w, p.props.h);
}
p.draw = function () {
p.randomSeed(1);
//p.smooth(0);
//recalc anim length etc based on ongoing performance
p.adjustForPerformance();
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.clear();
//p.background(p.props.params.color_bg);
p.drawBGImage();
if (p.props.autorun) {
if (p.props.animProgress < 1) {
p.props.animIncrement = 1 / p.props.animFrames;
p.props.animProgress = p.min((p.props.animProgress + p.props.animIncrement),1);
}
}
// BG blur
p.drawBGBlur();
// draw the things based on progress
p.anim();
// logo B
p.drawFGBlogo();
// fps output
p.displayFPS();
};
p.adjustForPerformance = function () {
if (p.frameRate() > 0) {
var perf = p.frameRate() / p.props.fr;
//adjust anim lengths smoothly from target to adjusted
var adjustedTarget = p.floor(p.props.animFrames_target * perf);
p.props.animFrames = p.floor(p.props.animFrames + ((adjustedTarget - p.props.animFrames) / 10));
}
}
p.anim = function () {
generatePoints(); // generate points centered around logo ellipse center
drawPoints();
function generatePoints() {
// calc logo size
var startLogoDiameter = (p.props.criticalDimension * p.props.logoDiameterMax);
var endLogoDiameter = (p.props.h * p.props.logoDiameterMin);
p.props.logoDiameter = p.map(AnimApp.easeOutQuart(p.props.animProgress), 0, 1, startLogoDiameter, endLogoDiameter);
var centerX = p.props.animCenterX;
var centerY = p.props.animCenterY;
var maxOrbitRadius = (p.props.logoDiameter / 2) - ((p.props.logoDiameter * p.props.pointMaxDiameter) / 1);
var elements = p.floor((p.map(p.props.params.x, 0, 1, p.props.minPoints, p.props.maxPoints) * p.props.mediaTypeFactor));
var elsFrameOffset = elements;
var speed =Number(p.props.params.s);
// clear lats points array
p.props.pointVectors = [];
// calculate points
for (var e = 0; e < elements; e++) {
var elFrameOffset = elsFrameOffset * e;
var angle = p.HALF_PI + (p.PI * p.random()) * (p.PI * p.noise((e * 0.15) + (p.frameCount * 0.0005)));
var pointOrbitRadius = maxOrbitRadius * p.random();
var pointRadius = (p.map(p.noise(e), 0, 1, (p.props.pointMinDiameter * p.props.logoDiameter), (p.props.pointMaxDiameter * p.props.logoDiameter)) * p.props.params.y) * AnimApp.easeOutQuart(p.max(0.1,p.props.animProgress)) * p.sin(p.HALF_PI + ((p.frameCount * speed) + elFrameOffset) * 0.025) * p.map(p.cos(angle), -1, 1, -1, 0);
var pointX = centerX + ((pointOrbitRadius) * p.cos(angle)) * p.sin(((p.frameCount * speed) + elFrameOffset) * 0.05);
var pointY = centerY + ((pointOrbitRadius) * p.sin(angle)) * p.sin(((p.frameCount * speed) + elFrameOffset) * 0.05);
// store vector
p.props.pointVectors[e] = p.createVector(pointX, pointY, pointRadius);
}
}
function drawPoints() {
// draw points
p.noStroke();
for (var i = 0; i < p.props.pointVectors.length; i++) {
p.fill(p.getBrandColour());
p.ellipse(p.props.pointVectors[i].x, p.props.pointVectors[i].y, p.props.pointVectors[i].z, p.props.pointVectors[i].z);
}
}
}
p.drawBGImage = function () {
if (p.props.params.bg_image != "none") {
p.image(p.bgs[0], p.width / 2, p.height / 2, p.width, p.height);
}
}
p.drawBGBlur = function () {
p.blendMode(p.SCREEN);
p.imageMode(p.CENTER);
p.image(p.blurBGImage, p.props.animCenterX, p.props.animCenterY, p.props.blurBGW, p.props.blurBGH);
p.blendMode(p.BLEND);
}
p.drawFGBlogo = function () {
p.imageMode(p.CENTER);
p.image(p.logoB, p.props.animCenterX, p.props.animCenterY, p.props.logoW, p.props.logoH);
}
// 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(',') + ')');
}
p.displayFPS = function () {
if (p.showFPS) {
//if (p.frameCount % 30 == 0) { // ony update every 30 frms
p.currentFPS = p.int(p.frameRate());
//}
var unit = p.height / 10
p.fill(255)
p.strokeWeight(0)
p.textSize(20);
p.textAlign(p.LEFT, p.TOP);
p.text(p.props.mediaType + " | FPS " + p.currentFPS + " | " + p.props.animFrames + " | " + p.props.checkNeighbourEvery, unit, unit);
}
}
p.getSprite = function (s) {
var spriteID = 0;
var useIcon = p.random();
if (useIcon >= p.props.params.i) {
spriteID = p.floor(p.map(useIcon, 0, 1, 1, p.sprites.length));
}
return p.colSprites[spriteID];
}
p.sprite = function (img, x, y, w, h, r) {
p.translate(x, y);
p.rotate(r);
//p.tint(p.wAlpha(p.props.params.color_fg, 1));
p.image(img, 0, 0, w, h);
p.rotate(-r);
p.translate(-x, -y);
}
p.getBrandColour = function () {
return (p.props.pointColours[p.getPRandomIntInclusive(0, p.props.pointColourCount - 1)]);
}
p.getPRandomIntInclusive = function (min, max) {
return p.floor(p.random() * (max - min + 1)) + min;
}
};
// -------------- end sketches -----------------------------------
},
// easing utility functions based on : https://gist.github.com/cocopon/1ec025bcffb3fd7995db
easeOutSine: function (t) {
return Math.sin(t * (Math.PI / 2));
},
easeInSine: function (t) {
return -Math.cos(t * (Math.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: $("#home"), configJSON: '{ "params" : { "animVariation": 0, "bg_image": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/312799/bite_splashSimple.jpg", "color_bg": "#e3e7ef", "color_fg": "#ffffff", "x": "1", "y": "1", "z": "1.0", "s": "0.05", "r": "0.4", "mode": "composer" } }' }
];
// init
AnimApp.init(animationsManifest, false); // animations manifest, debug output
!
