(function () { var assets = ["bird.gif", "unicorn.gif", "fire.gif"]; var currentGifIndex = 0; var theta = 0; var polarized = false; var frames = []; var gifWidth = 1; var gifHeight = 1; var renderToken = 0; var frameEl = document.getElementById("frame"); var polarizerEl = document.getElementById("polarizer"); var canvasLayerEl = document.getElementById("canvas-layer"); var loadingEl = document.getElementById("loading"); var anglePanelEl = document.getElementById("angle-panel"); var angleLabelEl = document.getElementById("angle-label"); var thetaInputEl = document.getElementById("theta"); var polarizeButtonEl = document.getElementById("polarize"); var nextButtonEl = document.getElementById("next"); if (!window.fil) { window.fil = { url: function (name) { return "assets/" + encodeURIComponent(name); } }; } function buildStream(uint8Data) { return { data: uint8Data, pos: 0 }; } function readByte() { return function (stream) { return stream.data[stream.pos++]; }; } function peekByte(offset) { return function (stream) { return stream.data[stream.pos + (offset || 0)]; }; } function readBytes(length) { return function (stream) { return stream.data.subarray(stream.pos, stream.pos += length); }; } function peekBytes(length) { return function (stream) { return stream.data.subarray(stream.pos, stream.pos + length); }; } function readString(length) { return function (stream) { return Array.prototype.map.call(readBytes(length)(stream), function (value) { return String.fromCharCode(value); }).join(""); }; } function readUnsigned(littleEndian) { return function (stream) { var bytes = readBytes(2)(stream); return littleEndian ? (bytes[1] << 8) + bytes[0] : (bytes[0] << 8) + bytes[1]; }; } function readArray(byteSize, totalOrFunc) { return function (stream, result, parent) { var total = typeof totalOrFunc === "function" ? totalOrFunc(stream, result, parent) : totalOrFunc; var parser = readBytes(byteSize); var arr = new Array(total); for (var i = 0; i < total; i++) arr[i] = parser(stream); return arr; }; } function subBitsTotal(bits, startIndex, length) { var result = 0; for (var i = 0; i < length; i++) { result += bits[startIndex + i] && Math.pow(2, length - i - 1); } return result; } function readBits(schema) { return function (stream) { var byte = readByte()(stream); var bits = new Array(8); for (var i = 0; i < 8; i++) bits[7 - i] = !!(byte & (1 << i)); return Object.keys(schema).reduce(function (res, key) { var def = schema[key]; res[key] = def.length ? subBitsTotal(bits, def.index, def.length) : bits[def.index]; return res; }, {}); }; } function parse(stream, schema, result, parent) { result = result || {}; parent = parent || result; if (Array.isArray(schema)) { schema.forEach(function (partSchema) { parse(stream, partSchema, result, parent); }); } else if (typeof schema === "function") { schema(stream, result, parent, parse); } else { var key = Object.keys(schema)[0]; if (Array.isArray(schema[key])) { parent[key] = {}; parse(stream, schema[key], result, parent[key]); } else { parent[key] = schema[key](stream, result, parent, parse); } } return result; } function conditional(schema, conditionFunc) { return function (stream, result, parent, parser) { if (conditionFunc(stream, result, parent)) parser(stream, schema, result, parent); }; } function loop(schema, continueFunc) { return function (stream, result, parent, parser) { var arr = []; var lastStreamPos = stream.pos; while (continueFunc(stream, result, parent)) { var newParent = {}; parser(stream, schema, result, newParent); if (stream.pos === lastStreamPos) break; lastStreamPos = stream.pos; arr.push(newParent); } return arr; }; } function subBlocksSchema() { return { blocks: function (stream) { var terminator = 0x00; var chunks = []; var streamSize = stream.data.length; var total = 0; for (var size = readByte()(stream); size !== terminator; size = readByte()(stream)) { if (!size) break; if (stream.pos + size >= streamSize) { var availableSize = streamSize - stream.pos; chunks.push(readBytes(availableSize)(stream)); total += availableSize; break; } chunks.push(readBytes(size)(stream)); total += size; } var result = new Uint8Array(total); var offset = 0; for (var i = 0; i < chunks.length; i++) { result.set(chunks[i], offset); offset += chunks[i].length; } return result; } }; } function gifSchema() { var gceSchema = conditional({ gce: [ { codes: readBytes(2) }, { byteSize: readByte() }, { extras: readBits({ future: { index: 0, length: 3 }, disposal: { index: 3, length: 3 }, userInput: { index: 6 }, transparentColorGiven: { index: 7 } }) }, { delay: readUnsigned(true) }, { transparentColorIndex: readByte() }, { terminator: readByte() } ] }, function (stream) { var codes = peekBytes(2)(stream); return codes[0] === 0x21 && codes[1] === 0xf9; }); var imageSchema = conditional({ image: [ { code: readByte() }, { descriptor: [ { left: readUnsigned(true) }, { top: readUnsigned(true) }, { width: readUnsigned(true) }, { height: readUnsigned(true) }, { lct: readBits({ exists: { index: 0 }, interlaced: { index: 1 }, sort: { index: 2 }, future: { index: 3, length: 2 }, size: { index: 5, length: 3 } }) } ] }, conditional({ lct: readArray(3, function (stream, result, parent) { return Math.pow(2, parent.descriptor.lct.size + 1); }) }, function (stream, result, parent) { return parent.descriptor.lct.exists; }), { data: [ { minCodeSize: readByte() }, subBlocksSchema() ] } ] }, function (stream) { return peekByte()(stream) === 0x2c; }); var textSchema = conditional({ text: [ { codes: readBytes(2) }, { blockSize: readByte() }, { preData: function (stream, result, parent) { return readBytes(parent.text.blockSize)(stream); } }, subBlocksSchema() ] }, function (stream) { var codes = peekBytes(2)(stream); return codes[0] === 0x21 && codes[1] === 0x01; }); var applicationSchema = conditional({ application: [ { codes: readBytes(2) }, { blockSize: readByte() }, { id: function (stream, result, parent) { return readString(parent.blockSize)(stream); } }, subBlocksSchema() ] }, function (stream) { var codes = peekBytes(2)(stream); return codes[0] === 0x21 && codes[1] === 0xff; }); var commentSchema = conditional({ comment: [ { codes: readBytes(2) }, subBlocksSchema() ] }, function (stream) { var codes = peekBytes(2)(stream); return codes[0] === 0x21 && codes[1] === 0xfe; }); return [ { header: [ { signature: readString(3) }, { version: readString(3) } ] }, { lsd: [ { width: readUnsigned(true) }, { height: readUnsigned(true) }, { gct: readBits({ exists: { index: 0 }, resolution: { index: 1, length: 3 }, sort: { index: 4 }, size: { index: 5, length: 3 } }) }, { backgroundColorIndex: readByte() }, { pixelAspectRatio: readByte() } ] }, conditional({ gct: readArray(3, function (stream, result) { return Math.pow(2, result.lsd.gct.size + 1); }) }, function (stream, result) { return result.lsd.gct.exists; }), { frames: loop([gceSchema, applicationSchema, commentSchema, imageSchema, textSchema], function (stream) { var nextCode = peekByte()(stream); return nextCode === 0x21 || nextCode === 0x2c; }) } ]; } function parseGIF(arrayBuffer) { return parse(buildStream(new Uint8Array(arrayBuffer)), gifSchema()); } function deinterlace(pixels, width) { var newPixels = new Array(pixels.length); var rows = pixels.length / width; var offsets = [0, 4, 2, 1]; var steps = [8, 8, 4, 2]; var fromRow = 0; for (var pass = 0; pass < 4; pass++) { for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) { var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width); newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels)); fromRow++; } } return newPixels; } function lzw(minCodeSize, data, pixelCount) { var maxStackSize = 4096; var nullCode = -1; var dstPixels = new Array(pixelCount); var prefix = new Array(maxStackSize); var suffix = new Array(maxStackSize); var pixelStack = new Array(maxStackSize + 1); var dataSize = minCodeSize; var clear = 1 << dataSize; var endOfInformation = clear + 1; var available = clear + 2; var oldCode = nullCode; var codeSize = dataSize + 1; var codeMask = (1 << codeSize) - 1; var code; for (code = 0; code < clear; code++) { prefix[code] = 0; suffix[code] = code; } var datum = 0; var bits = 0; var first = 0; var top = 0; var pi = 0; var bi = 0; for (var i = 0; i < pixelCount;) { if (top === 0) { if (bits < codeSize) { datum += data[bi] << bits; bits += 8; bi++; continue; } code = datum & codeMask; datum >>= codeSize; bits -= codeSize; if (code > available || code === endOfInformation) break; if (code === clear) { codeSize = dataSize + 1; codeMask = (1 << codeSize) - 1; available = clear + 2; oldCode = nullCode; continue; } if (oldCode === nullCode) { pixelStack[top++] = suffix[code]; oldCode = code; first = code; continue; } var inCode = code; if (code === available) { pixelStack[top++] = first; code = oldCode; } while (code > clear) { pixelStack[top++] = suffix[code]; code = prefix[code]; } first = suffix[code] & 0xff; pixelStack[top++] = first; if (available < maxStackSize) { prefix[available] = oldCode; suffix[available] = first; available++; if ((available & codeMask) === 0 && available < maxStackSize) { codeSize++; codeMask += available; } } oldCode = inCode; } top--; dstPixels[pi++] = pixelStack[top]; i++; } for (i = pi; i < pixelCount; i++) dstPixels[i] = 0; return dstPixels; } function generatePatch(image) { var totalPixels = image.pixels.length; var patchData = new Uint8ClampedArray(totalPixels * 4); for (var i = 0; i < totalPixels; i++) { var pos = i * 4; var colorIndex = image.pixels[i]; var color = image.colorTable[colorIndex] || [0, 0, 0]; patchData[pos] = color[0]; patchData[pos + 1] = color[1]; patchData[pos + 2] = color[2]; patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0; } return patchData; } function decompressFrame(frame, gct, buildImagePatch) { var image = frame.image; var totalPixels = image.descriptor.width * image.descriptor.height; var pixels = lzw(image.data.minCodeSize, image.data.blocks, totalPixels); if (image.descriptor.lct.interlaced) pixels = deinterlace(pixels, image.descriptor.width); var resultImage = { pixels: pixels, dims: { top: image.descriptor.top, left: image.descriptor.left, width: image.descriptor.width, height: image.descriptor.height }, colorTable: image.descriptor.lct && image.descriptor.lct.exists ? image.lct : gct }; if (frame.gce) { resultImage.delay = (frame.gce.delay || 10) * 10; resultImage.disposalType = frame.gce.extras.disposal; if (frame.gce.extras.transparentColorGiven) { resultImage.transparentIndex = frame.gce.transparentColorIndex; } } if (buildImagePatch) resultImage.patch = generatePatch(resultImage); return resultImage; } function decompressFrames(parsedGif, buildImagePatches) { return parsedGif.frames.filter(function (frame) { return frame.image; }).map(function (frame) { return decompressFrame(frame, parsedGif.gct, buildImagePatches); }); } function createCanvas(width, height) { var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.style.width = width + "px"; canvas.style.height = height + "px"; return canvas.getContext("2d"); } function mapValue(x, inMin, inMax, outMin, outMax) { if (inMax === inMin) return outMin; return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b); var min = Math.min(r, g, b); var delta = max - min; var h = 0; var s = 0; var l = (max + min) / 2; if (delta !== 0) { s = delta / (1 - Math.abs(2 * l - 1)); if (max === r) h = ((g - b) / delta) % 6; else if (max === g) h = (b - r) / delta + 2; else h = (r - g) / delta + 4; h *= 60; if (h < 0) h += 360; } return [h, s, l]; } function hslToRgb(h, s, l) { var c = (1 - Math.abs(2 * l - 1)) * s; var hPrime = h / 60; var x = c * (1 - Math.abs((hPrime % 2) - 1)); var r1 = 0; var g1 = 0; var b1 = 0; if (0 <= hPrime && hPrime < 1) { r1 = c; g1 = x; b1 = 0; } else if (1 <= hPrime && hPrime < 2) { r1 = x; g1 = c; b1 = 0; } else if (2 <= hPrime && hPrime < 3) { r1 = 0; g1 = c; b1 = x; } else if (3 <= hPrime && hPrime < 4) { r1 = 0; g1 = x; b1 = c; } else if (4 <= hPrime && hPrime < 5) { r1 = x; g1 = 0; b1 = c; } else if (5 <= hPrime && hPrime < 6) { r1 = c; g1 = 0; b1 = x; } var m = l - c / 2; return [ Math.round((r1 + m) * 255), Math.round((g1 + m) * 255), Math.round((b1 + m) * 255) ]; } function draw(width, height, frameList, angleDegrees, isPolarized) { var ctx = createCanvas(width, height); var imageData = ctx.createImageData(width, height); var sectors = 720; for (var i = 0; i < width; i++) { for (var j = 0; j < height; j++) { var sector = Math.floor(Math.atan2(j - height / 2, i - width / 2) / (Math.PI / sectors)); if (sector < 0) sector += sectors; var frameIndex = sector % frameList.length; var frame = frameList[frameIndex]; var dims = frame.dims; var t = angleDegrees * (Math.PI / 180); var angle = mapValue(frameIndex, 0, frameList.length - 1, 0, Math.PI); var weight = Math.pow(Math.cos(t - angle), 2); if (i >= dims.left && i < dims.left + dims.width && j >= dims.top && j < dims.top + dims.height) { var patchIndex = ((j - dims.top) * dims.width + (i - dims.left)) * 4; var r = frame.patch[patchIndex]; var g = frame.patch[patchIndex + 1]; var b = frame.patch[patchIndex + 2]; var a = frame.patch[patchIndex + 3]; var hsl = rgbToHsl(r, g, b); var rgb = hslToRgb(hsl[0], hsl[1], hsl[2] * weight); var index = (j * width + i) * 4; imageData.data[index] = isPolarized ? rgb[0] : r; imageData.data[index + 1] = isPolarized ? rgb[1] : g; imageData.data[index + 2] = isPolarized ? rgb[2] : b; imageData.data[index + 3] = isPolarized ? a * weight : a; } } } ctx.putImageData(imageData, 0, 0); return ctx.canvas; } function threeDigit(num) { return String(Math.round(num)).padStart(3, "0"); } function updateLayout() { var maxSize = Math.max(gifWidth, gifHeight) * Math.sqrt(2); var availableWidth = Math.max(160, window.innerWidth - 24); var availableHeight = Math.max(160, window.innerHeight - 116); var scale = Math.min(1, availableWidth / maxSize, availableHeight / maxSize); var scaledFrame = maxSize * scale; frameEl.style.width = scaledFrame + "px"; frameEl.style.height = scaledFrame + "px"; polarizerEl.style.width = scaledFrame + "px"; polarizerEl.style.height = scaledFrame + "px"; polarizerEl.style.transform = "rotate(" + theta + "deg)"; polarizerEl.style.backgroundColor = polarized ? "black" : "transparent"; canvasLayerEl.style.width = gifWidth + "px"; canvasLayerEl.style.height = gifHeight + "px"; canvasLayerEl.style.transform = "translate(-50%, -50%) scale(" + scale + ")"; } function updateControls() { angleLabelEl.textContent = "Polarization: " + threeDigit(theta) + " deg"; thetaInputEl.value = theta; polarizeButtonEl.textContent = polarized ? "Unpolarize" : "Polarize"; anglePanelEl.className = polarized ? "visible" : ""; } function render() { if (!frames.length) return; var token = ++renderToken; updateControls(); updateLayout(); requestAnimationFrame(function () { if (token !== renderToken) return; var canvas = draw(gifWidth, gifHeight, frames, theta, polarized); canvasLayerEl.innerHTML = ""; canvasLayerEl.appendChild(canvas); updateLayout(); }); } function loadGif(index) { loadingEl.className = ""; canvasLayerEl.innerHTML = ""; frames = []; var url = window.fil.url(assets[index]); fetch(url) .then(function (resp) { return resp.arrayBuffer(); }) .then(function (buffer) { var gif = parseGIF(buffer); var decoded = decompressFrames(gif, true); var filtered = decoded.filter(function (_, frameIndex, allFrames) { var prevFrame = allFrames[frameIndex - 1]; if (!prevFrame) return true; return prevFrame.disposalType === 2; }); if (filtered.length > 14) { var n = Math.ceil(filtered.length / 7); filtered = filtered.filter(function (_, frameIndex) { return frameIndex % n === 0; }); } gifWidth = gif.lsd.width; gifHeight = gif.lsd.height; frames = filtered; loadingEl.className = "hidden"; render(); }) .catch(function (error) { loadingEl.textContent = "Load failed"; console.error(error); }); } polarizeButtonEl.addEventListener("click", function () { polarized = !polarized; render(); }); nextButtonEl.addEventListener("click", function () { currentGifIndex = (currentGifIndex + 1) % assets.length; theta = 0; polarized = false; loadGif(currentGifIndex); }); thetaInputEl.addEventListener("input", function (event) { theta = Number(event.target.value); render(); }); window.addEventListener("resize", updateLayout); loadGif(currentGifIndex); })();