Skip to content

Instantly share code, notes, and snippets.

@benzkji
Created January 17, 2019 12:50
Show Gist options
  • Save benzkji/c0c82569e120117fe3832ac9bc596ec4 to your computer and use it in GitHub Desktop.
Save benzkji/c0c82569e120117fe3832ac9bc596ec4 to your computer and use it in GitHub Desktop.
cargo pixelate
define("text", ["module"], function(t) {
"use strict";
var e, a, i = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP", "Msxml2.XMLHTTP.4.0"], o = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im, s = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im, r = "undefined" != typeof location && location.href, n = r && location.protocol && location.protocol.replace(/\:/, ""), d = r && location.hostname, h = r && (location.port || void 0), m = [], l = t.config && t.config() || {};
return e = {
version: "2.0.1",
strip: function(t) {
if (t) {
t = t.replace(o, "");
var e = t.match(s);
e && (t = e[1])
} else
t = "";
return t
},
jsEscape: function(t) {
return t.replace(/(['\\])/g, "\\$1").replace(/[\f]/g, "\\f").replace(/[\b]/g, "\\b").replace(/[\n]/g, "\\n").replace(/[\t]/g, "\\t").replace(/[\r]/g, "\\r").replace(/[\u2028]/g, "\\u2028").replace(/[\u2029]/g, "\\u2029")
},
createXhr: l.createXhr || function() {
var t, e, a;
if ("undefined" != typeof XMLHttpRequest)
return new XMLHttpRequest;
if ("undefined" != typeof ActiveXObject)
for (e = 0; e < 3; e += 1) {
a = i[e];
try {
t = new ActiveXObject(a)
} catch (t) {}
if (t) {
i = [a];
break
}
}
return t
}
,
parseName: function(t) {
var e = !1
, a = t.indexOf(".")
, i = t.substring(0, a)
, o = t.substring(a + 1, t.length);
return a = o.indexOf("!"),
-1 !== a && (e = o.substring(a + 1, o.length),
e = "strip" === e,
o = o.substring(0, a)),
{
moduleName: i,
ext: o,
strip: e
}
},
xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
useXhr: function(t, a, i, o) {
var s, r, n, d = e.xdRegExp.exec(t);
return !d || (s = d[2],
r = d[3],
r = r.split(":"),
n = r[1],
r = r[0],
!(s && s !== a || r && r.toLowerCase() !== i.toLowerCase() || (n || r) && n !== o))
},
finishLoad: function(t, a, i, o) {
i = a ? e.strip(i) : i,
l.isBuild && (m[t] = i),
o(i)
},
load: function(t, a, i, o) {
if (o.isBuild && !o.inlineText)
return void i();
l.isBuild = o.isBuild;
var s = e.parseName(t)
, m = s.moduleName + "." + s.ext
, u = a.toUrl(m)
, c = l.useXhr || e.useXhr;
!r || c(u, n, d, h) ? e.get(u, function(a) {
e.finishLoad(t, s.strip, a, i)
}, function(t) {
i.error && i.error(t)
}) : a([m], function(t) {
e.finishLoad(s.moduleName + "." + s.ext, s.strip, t, i)
})
},
write: function(t, a, i, o) {
if (m.hasOwnProperty(a)) {
var s = e.jsEscape(m[a]);
i.asModule(t + "!" + a, "define(function () { return '" + s + "';});\n")
}
},
writeFile: function(t, a, i, o, s) {
var r = e.parseName(a)
, n = r.moduleName + "." + r.ext
, d = i.toUrl(r.moduleName + "." + r.ext) + ".js";
e.load(n, i, function(a) {
var i = function(t) {
return o(d, t)
};
i.asModule = function(t, e) {
return o.asModule(t, d, e)
}
,
e.write(t, n, i, s)
}, s)
}
},
"undefined" != typeof process && process.versions && process.versions.node ? (a = require.nodeRequire("fs"),
e.get = function(t, e) {
var i = a.readFileSync(t, "utf8");
0 === i.indexOf("\ufeff") && (i = i.substring(1)),
e(i)
}
) : e.createXhr() ? e.get = function(t, a, i) {
var o = e.createXhr();
o.open("GET", t, !0),
l.onXhr && l.onXhr(o, t),
o.onreadystatechange = function(e) {
var s, r;
4 === o.readyState && (s = o.status,
s > 399 && s < 600 ? (r = new Error(t + " HTTP status: " + s),
r.xhr = o,
i(r)) : a(o.responseText))
}
,
o.send(null)
}
: "undefined" != typeof Packages && (e.get = function(t, e) {
var a, i, o = new java.io.File(t), s = java.lang.System.getProperty("line.separator"), r = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(o),"utf-8")), n = "";
try {
for (a = new java.lang.StringBuffer,
i = r.readLine(),
i && i.length() && 65279 === i.charAt(0) && (i = i.substring(1)),
a.append(i); null !== (i = r.readLine()); )
a.append(s),
a.append(i);
n = String(a.toString())
} finally {
r.close()
}
e(n)
}
),
e
}),
define("text!pixelation/template.html", [], function() {
return ""
}),
define("global_libs/require/normalize", [], function() {
function t(t, i, o) {
if (t.match(n) || t.match(r))
return t;
t = s(t);
var d = o.match(r)
, h = i.match(r);
return !h || d && d[1] == h[1] && d[2] == h[2] ? a(e(t, i), o) : e(t, i)
}
function e(t, e) {
if ("./" == t.substr(0, 2) && (t = t.substr(2)),
t.match(n) || t.match(r))
return t;
var a = e.split("/")
, i = t.split("/");
for (a.pop(); curPart = i.shift(); )
".." == curPart ? a.pop() : a.push(curPart);
return a.join("/")
}
function a(t, e) {
var a = e.split("/");
for (a.pop(),
e = a.join("/") + "/",
i = 0; e.substr(i, 1) == t.substr(i, 1); )
i++;
for (; "/" != e.substr(i, 1); )
i--;
e = e.substr(i + 1),
t = t.substr(i + 1),
a = e.split("/");
var o = t.split("/");
for (out = ""; a.shift(); )
out += "../";
for (; curPart = o.shift(); )
out += curPart + "/";
return out.substr(0, out.length - 1)
}
var o = /([^:])\/+/g
, s = function(t) {
return t.replace(o, "$1/")
}
, r = /[^\:\/]*:\/\/([^\/])*/
, n = /^(\/|data:)/
, d = function(e, a, i) {
a = s(a),
i = s(i);
for (var o, r, e, n = /@import\s*("([^"]*)"|'([^']*)')|url\s*\((?!#)\s*(\s*"([^"]*)"|'([^']*)'|[^\)]*\s*)\s*\)/gi; o = n.exec(e); ) {
r = o[3] || o[2] || o[5] || o[6] || o[4];
var d;
d = t(r, a, i);
var h = o[5] || o[6] ? 1 : 0;
e = e.substr(0, n.lastIndex - r.length - h - 1) + d + e.substr(n.lastIndex - h - 1),
n.lastIndex = n.lastIndex + (d.length - r.length)
}
return e
};
return d.convertURIBase = t,
d.absoluteURI = e,
d.relativeURI = a,
d
}),
define("css", [], function() {
if ("undefined" == typeof window)
return {
load: function(t, e, a) {
a()
}
};
var t = document.getElementsByTagName("head")[0]
, e = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/) || 0
, a = !1
, i = !0;
e[1] || e[7] ? a = parseInt(e[1]) < 6 || parseInt(e[7]) <= 9 : e[2] || e[8] ? i = !1 : e[4] && (a = parseInt(e[4]) < 18);
var o = {};
o.pluginBuilder = "global_libs/require/css-builder";
var s, r, n, d = function() {
s = document.createElement("style"),
t.appendChild(s),
r = s.styleSheet || s.sheet
}, h = 0, m = [], l = function(t) {
h++,
32 == h && (d(),
h = 0),
r.addImport(t),
s.onload = function() {
u()
}
}, u = function() {
n();
var t = m.shift();
return t ? (n = t[1],
void l(t[0])) : void (n = null)
}, c = function(t, e) {
if (r && r.addImport || d(),
r && r.addImport)
n ? m.push([t, e]) : (l(t),
n = e);
else {
s.textContent = '@import "' + t + '";';
var a = setInterval(function() {
try {
s.sheet.cssRules,
clearInterval(a),
e()
} catch (t) {}
}, 10)
}
}, _ = function(e, a) {
var o = document.createElement("link");
if (o.type = "text/css",
o.rel = "stylesheet",
i)
o.onload = function() {
o.onload = function() {}
,
setTimeout(a, 7)
}
;
else
var s = setInterval(function() {
for (var t = 0; t < document.styleSheets.length; t++) {
if (document.styleSheets[t].href == o.href)
return clearInterval(s),
a()
}
}, 10);
o.href = e,
t.appendChild(o)
};
return o.normalize = function(t, e) {
return ".css" == t.substr(t.length - 4, 4) && (t = t.substr(0, t.length - 4)),
e(t)
}
,
o.load = function(t, e, i) {
(a ? c : _)(e.toUrl(t + ".css"), i)
}
,
o
}),
define("pixelation/main", ["text!pixelation/template.html", "_libs/pixi.min", "css!/_jsapps/backdrop/pixelation/style"], function(t, e) {
return Backbone.View.extend({
template: _.template(t),
deferredLoadEventName: "pixelation-load-complete",
defaults: {
hex: "#000000",
alpha: 0,
mouse_interaction: !0,
mouse_sensitivity: 6,
image_url: "//static.cargocollective.com/assets/backdrop/default_1024.jpg",
image: "",
image_size: 1024,
requires_webgl: "true",
rows: 64,
columns: 64,
zoom: 100,
horiz_stretch: 100,
vert_stretch: 97,
layout_mode: "grid_mode",
grid_size: 44,
flip_it: !1,
elasticity: 35,
stir_freq: 74,
stir_strength: 4,
stir_disorder: 76,
tolerance: 86,
mouse_zoom: 0,
stir_grid: !0,
posterize: !1,
plugin_id: 23,
size: "cover"
},
drawFrameID: null,
initialize: function() {
this.image_load_queue = [],
this.data = {
renderer: null,
stage: null,
texture: null,
composition: null,
sprites_num: 0,
mouse_in: !1,
image_size: {
width: 100,
height: 100
},
row_num: 1,
col_num: 1,
mouse_vector: [{
x: 0,
y: 0
}, {
x: 0,
y: 0
}],
texture_size: {
width: 100,
height: 100
},
is_mobile: !1,
image_loaded: !1,
model_speed: {
x: 0,
y: 0
},
lastClientPos: {
x: 0,
y: 0
},
skip_delta: !1,
mouse_sensitivity: 0,
backdrop_size: {
w: 800,
h: 600,
top: 0,
left: 0,
resolution: 1
},
movement_offset: {
x: 0,
y: 0
},
mouse_prev: {
x: -1,
y: -1
},
mouse_cur: {
x: 0,
y: 0
},
mouse_cache: {
x: 0,
y: 0
},
mouse_delta: {
x: 0,
y: 0,
smooth_x: 0,
smooth_y: 0,
long_tail: 0
}
};
var t = _.defaults(this.model.get("data"), this.defaults);
this.model.set("data", t),
this.listenTo(this.model, "reset", this.Init),
this.scrollCallback = this.updateScroll.bind(this),
this.mouseCallback = this.updateMouseOffset.bind(this),
this.mouseEnterCallback = this.mouseEnter.bind(this),
this.mouseLeaveCallback = this.mouseLeave.bind(this)
},
render: function() {
var t = Cargo.Core.Handlebars.Render("{{>loading_animation}}", {});
return this.$el.html(t),
this
},
loadImage: function() {
$(".loading_animation", this.el).removeClass("hidden");
var t = this.model.get("data")
, a = this
, i = Cargo.Collection.Images.fetchWebGLImage(t.image, this.defaults.image_size);
i ? i.id = t.image : (i = {
w: 1500,
h: 1500,
url: this.defaults.image_url,
id: 0
},
t.image = 0,
this.model.set("data", t));
var o = new Image;
o.crossOrigin = "",
this.data.image_loaded = !1,
this.image_load_queue.push(i.id),
o.onload = function() {
if (!a.destroyed) {
var t = a.image_load_queue.pop();
if (a.model.get("data").image != t)
return void a.loadImage();
t == i.id && (a.image_load_queue = [],
a.data.image_size.width = parseInt(i.w),
a.data.image_size.height = parseInt(i.h),
a.data.texture_size = {
width: o.width,
height: o.height
},
a.data.texture = new e.Texture.fromImage(o.src),
a.data.image_loaded = !0,
a.updateWindow(!0),
a.makeSprites())
}
}
,
o.src = i.url
},
isPowerOfTwo: function(t) {
return 0 == (t & t - 1)
},
nextHighestPowerOfTwo: function(t) {
--t;
for (var e = 1; e < 32; e <<= 1)
t |= t >> e;
return Math.min(t + 1, 1024)
},
makeSprites: function() {
var t, a = this.model.get("data"), i = this.data.row_num = a.rows, o = this.data.col_num = a.columns, s = a.grid_size, r = a.layout_mode, n = 0;
"grid_mode" == r ? (this.data.row_num = i = s,
this.data.col_num = o = s) : "row_mode" == r ? this.data.col_num = o = 1 : "column_mode" == r && (this.data.row_num = i = 1);
var d = i * o
, h = this.data.composition.children.length
, m = d - h;
if (m < 0)
for (var l = h - 1; l > d - 1; l--)
this.data.composition.removeChildAt(l);
else if (m > 0)
for (var l = h; l < d; l++)
t = new e.Sprite,
this.data.composition.addChild(t);
for (var l = 0; l < o; l++)
for (var u = 0; u < i; u++)
t = this.data.composition.children[n],
t.anchor = {
x: .5,
y: .5
},
t.coords = {
x: l,
y: u
},
t.max_frame = {
x: 0,
y: 0,
w: 1,
h: 1
},
t.min_frame = {
x: 0,
y: 0,
w: 1,
h: 1
},
t.base_frame = {
x: 0,
y: 0,
w: 1,
h: 1
},
t.zoom_in_min_frame = {
x: 0,
y: 0,
w: 1,
h: 1
},
t.zoom_in_max_frame = {
x: 0,
y: 0,
w: 1,
h: 1
},
t.movement = {
x: 0,
y: 0
},
t.mouse_over = !1,
t.mouse_zoom = 0,
t.animating = !1,
t.speed = {
x: 0,
y: 0
},
t.interactive = !0,
n++;
this.setSpritePosition(),
this.resizeImage(),
$(".loading_animation", this.el).addClass("hidden"),
Cargo.Event.trigger(this.deferredLoadEventName),
this.paused && this.in_viewport && this.Resume()
},
spriteMouseMove: function() {
var t = this.model.get("data");
if (0 != this.data.composition.children.length && t.mouse_interaction) {
var e, a = this.data.row_num, i = this.data.col_num, o = this.data.backdrop_size.w, s = this.data.backdrop_size.h, r = this.data.composition.position.x, n = this.data.composition.position.y, d = this.data.mouse_sensitivity, h = [], m = .01 * t.tolerance, m = m * Math.max(a, i) * 2 + 1.5 * (1 - m);
e = this.data.composition.width / this.data.composition.height > o / s ? {
x: (this.data.mouse_cur.x - r) / this.data.composition.width * i,
y: (this.data.mouse_cur.y - n) / s * a
} : {
x: (this.data.mouse_cur.x - r) / o * i,
y: (this.data.mouse_cur.y - n) / this.data.composition.height * a
},
this.data.mouse_vector.unshift(e),
this.data.mouse_vector.pop();
var l = 0
, u = this.data.mouse_vector[0].x
, c = this.data.mouse_vector[1].x;
c < u && (l = u,
u = c,
c = l);
var _ = this.data.mouse_vector[0].y
, f = this.data.mouse_vector[1].y;
f < _ && (l = _,
_ = f,
f = l);
for (var p, x, g, v, y = Math.sqrt(m * m + m * m), w = Math.abs(m / y), b = this.data.mouse_in ? 1 : this.data.mouse_delta.long_tail, z = u + -.01; z < c; z++)
for (var M = _ + -.01; M < f; M++) {
h = this.data.composition.children.filter(function(t) {
return Math.floor(z) <= t.coords.x + m && Math.floor(z) >= t.coords.x - m && Math.floor(M) <= t.coords.y + m && Math.floor(M) >= t.coords.y - m
});
for (var k = 0; k < h.length; k++)
p = z + -.5 - h[k].coords.x,
x = M + -.5 - h[k].coords.y,
g = Math.sqrt(p * p + x * x),
v = Math.max(m * w - g, 0) / (.5 * y),
h[k].mouse_zoom = Math.min(Math.max(0, h[k].mouse_zoom * (1 - v) + (h[k].mouse_zoom + .1 * v) * v), 1) * b,
h[k].speed.x += Math.min(Math.max(-1, this.data.mouse_delta.smooth_x * v * d * .1), 1),
h[k].speed.y += Math.min(Math.max(-1, this.data.mouse_delta.smooth_y * v * d * .1), 1)
}
}
},
updateScroll: function() {
this.data.backdrop_size.top = this.el.getBoundingClientRect().top
},
mouseEnter: function() {
this.data.mouse_in = !0,
this.data.backdrop_size.left = this.el.getBoundingClientRect().left
},
mouseLeave: function() {
this.data.mouse_in = !1
},
stirPixels: function() {
var t = this.model.get("data");
if (0 != this.data.composition.children.length && t.stir_grid) {
var e, a = this.data.composition.children.length, i = (this.data.col_num,
this.data.row_num,
.05 * t.stir_freq), o = .1 * t.stir_disorder + 1, s = .001 * t.stir_strength * .25, r = Math.sin(.005 * i * this.counter), n = Math.cos(.005 * i * this.counter);
if ("grid_mode" == t.layout_mode)
for (var d = 0; d < a; d++)
e = this.data.composition.children[d],
n = Math.sin(n + (o - 1) * d * 10),
e.speed.x += (Math.sin(.003 * this.counter * i + .1 * (e.coords.x + n * e.coords.y * .5 * o)) * n + Math.cos(-.0031 * this.counter * i + -.1 * (e.coords.x - n * e.coords.y * .5 * o) + .7) * r) * s,
e.speed.y += (Math.sin(.0031 * this.counter * i + .1 * (e.coords.y - n * e.coords.x * .5 * o)) * n + Math.cos(-.003 * this.counter * i + -.1 * (e.coords.y - n * e.coords.x * .5 * o) + .7) * r) * s;
else
for (var d = 0; d < a; d++)
e = this.data.composition.children[d],
n = Math.sin(n + (o - 1) * d * 10),
e.speed.x += (Math.sin(.009 * this.counter * i + .1 * (e.coords.x + n * e.coords.y * .5 * o * 40)) * n + Math.cos(-.0091 * this.counter * i + -.1 * (e.coords.x - n * e.coords.y * .5 * o * 40) + .7) * r) * s * 2,
e.speed.y += (Math.sin(.0091 * this.counter * i + .1 * (e.coords.y - n * e.coords.x * .5 * o * 40)) * n + Math.cos(-.009 * this.counter * i + -.1 * (e.coords.y - n * e.coords.x * .5 * o * 40) + .7) * r) * s * 2
}
},
animateFrame: function() {
if (this.data.image_loaded && 0 != this.data.composition.children.length)
for (var t, a, i, o, s, r, n = .01 * this.model.get("data").mouse_zoom, d = this.data.composition.children.length, h = (this.data.col_num,
this.data.row_num), m = 0, l = {
x: 0,
y: 0
}, u = 0, c = 0, _ = 1 - .15 * this.data.elasticity / 100, f = .5 * (1 - this.data.elasticity / 100) + .49, p = 0; p < d; p++) {
t = this.data.composition.children[p],
t.speed.x = Math.min(1, Math.max(-1, t.speed.x * _)),
t.speed.y = Math.min(1, Math.max(-1, t.speed.y * _));
var x = p + h
, g = p - h
, v = p + 1
, y = p - 1;
m = 0,
l = {
x: 0,
y: 0
},
0 != Math.floor(v % h) && (l.x += this.data.composition.children[v].movement.x,
l.y += this.data.composition.children[v].movement.y,
m++),
Math.floor(y % h) != h - 1 && Math.floor(y % h) > -1 && (l.x += this.data.composition.children[y].movement.x,
l.y += this.data.composition.children[y].movement.y,
m++),
x < d && (l.x += this.data.composition.children[x].movement.x,
l.y += this.data.composition.children[x].movement.y,
m++),
g >= 0 && (l.x += this.data.composition.children[g].movement.x,
l.y += this.data.composition.children[g].movement.y,
m++),
m > 0 && (t.movement.x = l.x / m * f + t.speed.x * (1 - f),
t.movement.y = l.y / m * f + t.speed.y * (1 - f)),
u = Math.abs(t.movement.x),
c = Math.abs(t.movement.y);
var w, b, z = .5 * t.movement.x + .5, M = .5 * t.movement.y + .5;
i = (t.max_frame.x * (1 - z) + t.min_frame.x * z) * u + t.base_frame.x * (1 - u),
o = (t.max_frame.y * (1 - M) + t.min_frame.y * M) * c + t.base_frame.y * (1 - c),
t.movement.x > 0 ? (i = t.min_frame.x * u + t.base_frame.x * (1 - u),
w = t.zoom_in_min_frame.x * u + t.zoom_in_frame_base.x * (1 - u)) : (i = t.max_frame.x * u + t.base_frame.x * (1 - u),
w = t.zoom_in_max_frame.x * u + t.zoom_in_frame_base.x * (1 - u)),
t.movement.y > 0 ? (o = t.min_frame.y * c + t.base_frame.y * (1 - c),
b = t.zoom_in_min_frame.y * c + t.zoom_in_frame_base.y * (1 - c)) : (o = t.max_frame.y * c + t.base_frame.y * (1 - c),
b = t.zoom_in_max_frame.y * c + t.zoom_in_frame_base.y * (1 - c)),
s = t.base_frame.w,
r = t.base_frame.h;
var k = t.mouse_zoom * Math.abs(n)
, I = .5 * n + .5;
i = (1 - k) * i + k * ((1 - I) * t.zoom_out_frame.x + I * w),
o = (1 - k) * o + k * ((1 - I) * t.zoom_out_frame.y + I * b),
s = (1 - k) * s + k * ((1 - I) * t.zoom_out_frame.w + I * t.zoom_in_frame_base.w),
r = (1 - k) * r + k * ((1 - I) * t.zoom_out_frame.h + I * t.zoom_in_frame_base.h),
t.mouse_zoom = Math.max(.95 * t.mouse_zoom, 0),
(u > 1e-5 || c > 1e-5 || k > 1e-4) && (a = new e.Rectangle(i,o,s,r),
t.texture = new e.Texture(this.data.texture.baseTexture,a))
}
},
setSpritePosition: function() {
var t = this.model.get("data");
if (this.data.image_loaded && 0 != this.data.composition.children.length) {
var a, i, o, s, r, n, d, h, m, l, u, c, _, f, p, x, g, v, y, w, a, b = this.data.texture_size.width, z = this.data.texture_size.height, M = t.rows, k = t.columns, I = t.grid_size, C = t.layout_mode, L = 0, E = 0, P = .01 * t.zoom, T = t.flip_it, S = [];
T ? "grid_mode" == C ? S = [[-1, 1], [-1, 1]] : "row_mode" == C ? S = [[1, 1], [-1, 1]] : "column_mode" == C && (S = [[-1, 1], [1, 1]]) : S = [[1, 1], [1, 1]],
"grid_mode" == C ? (M = I,
k = I,
L = Math.max(1 - (I - 3) / 29 * 2, 0),
E = .5 * (1 - (I - 3) / 29) + .5,
P < 0 && (P *= E),
h_zoom = P,
v_zoom = P,
f = tex_cell_w = b / (k + 2),
p = tex_cell_h = z / (M + 2)) : "row_mode" == C ? (k = 1,
L = Math.max(1 - (M - 3) / 59 * 2, 0),
E = .5 * (1 - (M - 3) / 59) + .5,
P < 0 && (P *= E),
h_zoom = 0,
v_zoom = P,
tex_cell_w = b,
f = 0,
p = tex_cell_h = z / (M + 2),
tex_cell_h = z / (M + 2)) : "column_mode" == C && (M = 1,
L = Math.max(1 - (k - 3) / 59 * 2, 0),
E = .5 * (1 - (k - 3) / 59) + .5,
P < 0 && (P *= E),
h_zoom = P,
v_zoom = 0,
tex_cell_w = b / (k + 2),
f = tex_cell_w = b / (k + 2),
p = 0,
tex_cell_h = z);
for (var s = 1 / b, r = 1 / z, X = 0; X < M * k; X++)
w = this.data.composition.children[X],
x = 1 == k ? .5 : w.coords.x / (k - 1),
g = 1 == M ? .5 : w.coords.y / (M - 1),
v = Math.sin(x * Math.PI),
y = Math.sin(g * Math.PI),
h = f + 1 / b,
m = p + 1 / z,
n = f + w.coords.x * tex_cell_w,
d = p + w.coords.y * tex_cell_h,
i = n + tex_cell_w / 2 + .5 * -s,
o = d + tex_cell_h / 2 + .5 * -r,
h_zoom > 0 ? (l = h_zoom * i + (1 - h_zoom) * n,
c = h_zoom * s + (1 - h_zoom) * h) : (l = -h_zoom * tex_cell_w + (1 + h_zoom) * n,
c = -h_zoom * (b - 2 * tex_cell_w) + (1 + h_zoom) * h),
v_zoom > 0 ? (u = v_zoom * o + (1 - v_zoom) * d,
_ = v_zoom * r + (1 - v_zoom) * m) : (u = -v_zoom * tex_cell_h + (1 + v_zoom) * d,
_ = -v_zoom * (z - 2 * tex_cell_h) + (1 + v_zoom) * m),
"grid_mode" == C ? (w.min_frame = {
x: Math.max(0, (l - .5 * b * v) * (1 - L) + (l - .5 * b) * L),
y: Math.max(0, (u - .5 * z * y) * (1 - L) + (u - .5 * z) * L),
w: c,
h: _
},
w.max_frame = {
x: Math.min((l + .5 * b * v) * (1 - L) + (l + .5 * b) * L, b - c),
y: Math.min((u + .5 * z * y) * (1 - L) + (u + .5 * z) * L, z - _),
w: c,
h: _
},
w.base_frame = {
x: l,
y: u,
w: c,
h: _
},
w.zoom_in_frame_base = {
x: i,
y: o,
w: s,
h: r
},
w.zoom_in_min_frame = {
x: 0,
y: 0,
w: s,
h: r
},
w.zoom_in_max_frame = {
x: b - s,
y: z - o,
w: s,
h: r
},
w.zoom_out_frame = {
x: 0,
y: 0,
w: b,
h: z
}) : "row_mode" == C ? (w.min_frame = {
x: 0,
y: Math.max(0, (u - .5 * z * y) * (1 - L) + (u - .5 * z) * L),
w: b,
h: _
},
w.max_frame = {
x: 0,
y: Math.min((u + .5 * z * y) * (1 - L) + (u + .5 * z) * L, z - _),
w: b,
h: _
},
w.base_frame = {
x: 0,
y: u,
w: b,
h: _
},
w.zoom_in_frame_base = {
x: 0,
y: o,
w: b,
h: r
},
w.zoom_in_min_frame = {
x: 0,
y: 0,
w: b,
h: r
},
w.zoom_in_max_frame = {
x: 0,
y: z - o,
w: b,
h: r
},
w.zoom_out_frame = {
x: 0,
y: 0,
w: b,
h: z
}) : "column_mode" == C && (w.min_frame = {
x: Math.max(0, (l - .5 * b * v) * (1 - L) + (l - .5 * b) * L),
y: 0,
w: c,
h: z
},
w.max_frame = {
x: Math.min((l + .5 * b * v) * (1 - L) + (l + .5 * b) * L, b - c),
y: 0,
w: c,
h: z
},
w.base_frame = {
x: l,
y: 0,
w: c,
h: z
},
w.zoom_in_frame_base = {
x: i,
y: 0,
w: s,
h: z
},
w.zoom_in_min_frame = {
x: 0,
y: 0,
w: s,
h: z
},
w.zoom_in_max_frame = {
x: b - s,
y: 0,
w: s,
h: z
},
w.zoom_out_frame = {
x: 0,
y: 0,
w: b,
h: z
}),
a = new e.Rectangle(w.base_frame.x,w.base_frame.y,w.base_frame.w,w.base_frame.h),
w.texture = new e.Texture(this.data.texture.baseTexture,a),
w.width = this.data.backdrop_size.w / k * S[0][w.coords.x % 2],
w.height = this.data.backdrop_size.h / M * S[1][w.coords.y % 2],
w.position = {
x: Math.abs(w.width * w.coords.x) + .5 * Math.abs(w.width),
y: Math.abs(w.height * w.coords.y) + .5 * Math.abs(w.height)
}
}
},
resizeImage: function() {
if (this.data.image_loaded) {
var t = (this.data.image_size.height,
this.data.image_size.width,
0)
, e = 0
, a = 0
, i = 0
, o = null
, s = {
h: this.data.backdrop_size.h + 4,
w: this.data.backdrop_size.w + 4
}
, r = {
y: this.data.image_size.width / this.data.image_size.height,
x: this.data.image_size.height / this.data.image_size.width
};
o = s.w / s.h < r.y,
o ? (t = Math.ceil(s.h),
e = Math.ceil(s.h * r.y)) : (t = Math.ceil(s.w * r.x),
e = Math.ceil(s.w)),
a = Math.ceil((s.h - t) / 2 - 2),
i = Math.ceil((s.w - e) / 2 - 2),
this.data.composition.width = e,
this.data.composition.height = t,
this.data.composition.x = i,
this.data.composition.y = a
}
},
changeBGColor: function() {
var t = this.model.get("data");
this.data.renderer.backgroundColor = t.hex.replace("#", "0x"),
this.data.stage.alpha = 1 - t.alpha
},
updateMouseOffset: function(t) {
if (!this.mouse_calced && this.model.get("data").mouse_interaction) {
if (this.data.mouse_prev = {
x: this.data.mouse_cur.x,
y: this.data.mouse_cur.y
},
this.data.is_mobile && t)
t.target.classList.contains("canvas_pixelation") && t.preventDefault(),
this.data.mouse_cur = {
x: (t.layerX || t.touches[0].clientX) - this.data.backdrop_size.left,
y: (t.layerY || t.touches[0].clientY) - this.data.backdrop_size.top
};
else if (t) {
if (this.data.lastClientPos.x === t.clientX && this.data.lastClientPos.y === t.clientY)
return;
this.data.lastClientPos.x = t.clientX,
this.data.lastClientPos.y = t.clientY,
this.data.mouse_in = !0,
this.data.mouse_cur = {
x: t.clientX - this.data.backdrop_size.left,
y: t.clientY - this.data.backdrop_size.top
}
}
this.mouse_calced = !0
}
},
setMouseDelta: function() {
var t = {
x: this.data.mouse_cur.x - this.data.mouse_prev.x,
y: this.data.mouse_cur.y - this.data.mouse_prev.y
};
if (!(Math.abs(t.x) > .9 * this.data.backdrop_size.w || Math.abs(t.y) > .9 * this.data.backdrop_size.h))
if (this.data.mouse_cache.x == this.data.mouse_cur.x && (this.data.mouse_prev.x = this.data.mouse_cur.x,
t.x = 0),
this.data.mouse_cache.y == this.data.mouse_cur.y && (this.data.mouse_prev.y = this.data.mouse_cur.y,
t.y = 0),
this.data.mouse_cache.x = this.data.mouse_cur.x,
this.data.mouse_cache.y = this.data.mouse_cur.y,
-1 == this.data.mouse_prev.x)
this.data.mouse_delta = {
x: 0,
y: 0,
smooth_x: 0,
smooth_y: 0,
long_tail: 0
};
else {
var e = {
x: this.data.mouse_delta.smooth_x,
y: this.data.mouse_delta.smooth_y,
long_tail: this.data.mouse_delta.long_tail
};
this.data.mouse_delta = {
x: t.x,
y: t.y,
smooth_x: .1 * this.data.mouse_delta.x + .9 * e.x,
smooth_y: .1 * this.data.mouse_delta.y + .9 * e.y,
long_tail: 1
},
this.data.mouse_in ? this.data.mouse_delta.long_tail = 1 : this.data.mouse_delta.long_tail = Math.min(.008 * Math.max(Math.abs(this.data.mouse_delta.x), Math.abs(this.data.mouse_delta.y)) + .992 * e.long_tail, 1)
}
},
updateWindow: function(t) {
var e = this.$el.closest(".backdrop").get(0);
if (null !== e && void 0 !== e && null !== this.data.renderer) {
var a = Math.max(e.offsetWidth, 1)
, i = Math.max(e.offsetHeight, 1);
this.data.backdrop_size.w == a && this.data.backdrop_size.h == i && 2 == this.data.backdrop_size.resolution && 1 != t || (this.data.backdrop_size.w = a,
this.data.backdrop_size.h = i,
this.data.backdrop_size.left = e.offsetLeft,
this.data.backdrop_size.resolution = 2,
this.data.renderer.resize(a, i),
this.resizeImage())
}
},
Pause: function() {
window.cancelAnimationFrame(this.drawFrameID),
this.paused = !0
},
Resume: function() {
window.cancelAnimationFrame(this.drawFrameID),
this.inited && (this.draw(),
this.paused = !1)
},
counter: 0,
draw: function() {
var t = this;
this.drawFrameID = window.requestAnimationFrame(function() {
t.draw()
}),
this.updateWindow(),
this.setMouseDelta(),
this.stirPixels(),
this.spriteMouseMove(),
this.animateFrame(),
this.counter++,
this.data.renderer.render(this.data.stage),
this.mouse_calced = !1
},
Init: function() {
var t = document.getElementsByTagName("body")[0]
, a = this.model.get("data");
void 0 == a.image && (a.image = this.defaults.image,
this.model.set("data", a)),
this.data.renderer = e.autoDetectRenderer(800, 600, {
resolution: 2
}),
this.data.stage = new e.Container,
this.data.composition = new e.Container,
this.data.stage.addChild(this.data.composition),
this.loadImage(),
this.el.appendChild(this.data.renderer.view),
this.data.renderer.view.classList.add("canvas_pixelation"),
this.changeBGColor(),
Cargo.Helper.isMobile() ? (this.data.is_mobile = !0,
window.addEventListener("touchmove", this.mouseCallback),
this.data.mouse_in = !1) : (window.addEventListener("mousemove", this.mouseCallback),
t.addEventListener("mouseenter", this.mouseEnterCallback),
t.addEventListener("mouseleave", this.mouseLeaveCallback)),
window.addEventListener("scroll", this.scrollCallback),
this.data.elasticity = a.elasticity,
this.data.mouse_sensitivity = .05 * Math.pow(.01 * a.mouse_sensitivity, 2),
this.updateWindow(!0),
this.inited = !0,
this.in_viewport ? this.Resume() : this.Pause()
},
Update: function(t, e) {
var a = this.model.get("data");
if (e != a[t]) {
if (a[t] = e,
this.model.set("data", a),
"image" == t && (this.data.image_loaded = !1,
this.loadImage()),
"image_delete" == t && a.image == e && (a.image = "",
this.model.set("data", a),
this.loadImage()),
"rows" == t || "columns" == t || "grid_size" == t || "layout_mode" == t || "flip_it" == t) {
if (!this.data.image_loaded)
return;
this.makeSprites()
}
"zoom" == t && (this.setSpritePosition(),
this.resizeImage()),
"elasticity" == t && (this.data.elasticity = e),
"hex" != t && "alpha" != t || this.changeBGColor(),
"mouse_sensitivity" == t && (this.data.mouse_sensitivity = .05 * Math.pow(.01 * a.mouse_sensitivity, 2))
}
},
destroy: function() {
this.image_load_queue = [];
var t = document.getElementsByTagName("body")[0];
window.cancelAnimationFrame(this.drawFrameID),
window.removeEventListener("mousemove", this.mouseCallback),
window.removeEventListener("touchmove", this.mouseCallback),
t.removeEventListener("mouseenter", this.mouseEnterCallback),
t.removeEventListener("mouseleave", this.mouseLeaveCallback),
window.removeEventListener("scroll", this.scrollCallback),
this.data.stage = null,
this.data.renderer.destroy(),
this.loadImage = null,
this.data = null,
this.destroyed = !0
}
})
}),
Backdrop.Data.require_loaded = !0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment