Created
January 17, 2019 12:50
-
-
Save benzkji/c0c82569e120117fe3832ac9bc596ec4 to your computer and use it in GitHub Desktop.
cargo pixelate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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