929 lines
36 KiB
JavaScript
929 lines
36 KiB
JavaScript
// Doodleloop — local canvas animation. Sample and user photos share one path.
|
||
// GIF bytes are encoded here (LZW). A deflate ZIP of those bytes is inflated
|
||
// with DecompressionStream before the file is offered for download.
|
||
|
||
(function () {
|
||
"use strict";
|
||
|
||
var SIZE = 400;
|
||
var STYLES = [
|
||
{ id: "ink-ripple", name: "Ink Ripple" },
|
||
{ id: "van-gogh-swirl", name: "Van Gogh Swirl" },
|
||
{ id: "watercolor-bleed", name: "Watercolor Bleed" },
|
||
{ id: "paper-cut-bob", name: "Paper-Cut Bob" },
|
||
{ id: "neon-pulse", name: "Neon Pulse" },
|
||
{ id: "falling-snow", name: "Falling Snow" },
|
||
{ id: "fire-flicker", name: "Fire Flicker" },
|
||
{ id: "bubble-pop", name: "Bubble Pop" },
|
||
{ id: "lightning-flash", name: "Lightning Flash" },
|
||
{ id: "earthquake-shake", name: "Earthquake Shake" },
|
||
{ id: "ocean-wave", name: "Ocean Wave" },
|
||
{ id: "magic-sparkle", name: "Magic Sparkle" }
|
||
];
|
||
|
||
function DoodleloopApp() {
|
||
this.source = null;
|
||
this.sourceCanvas = null;
|
||
this.motionStyle = "ink-ripple";
|
||
this.intensity = 50;
|
||
this.speed = 50;
|
||
this.playing = false;
|
||
this.raf = 0;
|
||
this.t0 = 0;
|
||
this.exporting = false;
|
||
this.snow = [];
|
||
this.bubbles = [];
|
||
this.sparkles = [];
|
||
this.statusEl = null;
|
||
}
|
||
|
||
DoodleloopApp.prototype.init = function () {
|
||
this.originalCanvas = document.getElementById("original-canvas");
|
||
this.originalCtx = this.originalCanvas.getContext("2d", { willReadFrequently: true });
|
||
this.animationCanvas = document.getElementById("animation-canvas");
|
||
this.animationCtx = this.animationCanvas.getContext("2d", { willReadFrequently: true });
|
||
this.originalCanvas.width = SIZE;
|
||
this.originalCanvas.height = SIZE;
|
||
this.animationCanvas.width = SIZE;
|
||
this.animationCanvas.height = SIZE;
|
||
this.statusEl = document.getElementById("loop-status");
|
||
this.bind();
|
||
this.seedParticles();
|
||
return this.loadSample();
|
||
};
|
||
|
||
DoodleloopApp.prototype.bind = function () {
|
||
var self = this;
|
||
var dropZone = document.getElementById("drop-zone");
|
||
var fileInput = document.getElementById("file-input");
|
||
var styleSelect = document.getElementById("motion-style");
|
||
var intensitySlider = document.getElementById("intensity-slider");
|
||
var speedSlider = document.getElementById("speed-slider");
|
||
var exportBtn = document.getElementById("export-btn");
|
||
var sampleBtn = document.getElementById("sample-btn");
|
||
var galleryBtn = document.getElementById("gallery-sample");
|
||
var webmBtn = document.getElementById("export-webm");
|
||
|
||
dropZone.addEventListener("dragover", function (e) {
|
||
e.preventDefault();
|
||
dropZone.classList.add("drag-over");
|
||
});
|
||
dropZone.addEventListener("dragleave", function () {
|
||
dropZone.classList.remove("drag-over");
|
||
});
|
||
dropZone.addEventListener("drop", function (e) {
|
||
e.preventDefault();
|
||
dropZone.classList.remove("drag-over");
|
||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||
self.handleFile(e.dataTransfer.files[0]);
|
||
}
|
||
});
|
||
dropZone.addEventListener("click", function () { fileInput.click(); });
|
||
fileInput.addEventListener("change", function (e) {
|
||
if (e.target.files && e.target.files[0]) self.handleFile(e.target.files[0]);
|
||
});
|
||
styleSelect.addEventListener("change", function (e) {
|
||
self.motionStyle = e.target.value;
|
||
self.restart();
|
||
});
|
||
intensitySlider.addEventListener("input", function (e) {
|
||
self.intensity = parseInt(e.target.value, 10);
|
||
});
|
||
speedSlider.addEventListener("input", function (e) {
|
||
self.speed = parseInt(e.target.value, 10);
|
||
});
|
||
sampleBtn.addEventListener("click", function () { self.loadSample(); });
|
||
if (galleryBtn) galleryBtn.addEventListener("click", function () { self.loadSample(); });
|
||
exportBtn.addEventListener("click", function () { self.exportGIF(); });
|
||
if (webmBtn) webmBtn.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
self.exportWebM();
|
||
});
|
||
};
|
||
|
||
DoodleloopApp.prototype.setStatus = function (text) {
|
||
if (this.statusEl) this.statusEl.textContent = text;
|
||
};
|
||
|
||
DoodleloopApp.prototype.seedParticles = function () {
|
||
var i;
|
||
this.snow = [];
|
||
this.bubbles = [];
|
||
this.sparkles = [];
|
||
for (i = 0; i < 70; i++) {
|
||
this.snow.push({
|
||
x: (i * 97) % SIZE,
|
||
y: (i * 53) % SIZE,
|
||
r: 1.2 + (i % 5) * 0.45,
|
||
drift: ((i % 7) - 3) * 0.15,
|
||
speed: 0.35 + (i % 5) * 0.12
|
||
});
|
||
}
|
||
for (i = 0; i < 18; i++) {
|
||
this.bubbles.push({
|
||
x: (i * 47 + 20) % SIZE,
|
||
phase: (i * 1.7) % 10,
|
||
rise: 0.4 + (i % 4) * 0.15
|
||
});
|
||
}
|
||
for (i = 0; i < 36; i++) {
|
||
this.sparkles.push({
|
||
x: (i * 67) % SIZE,
|
||
y: (i * 41) % SIZE,
|
||
phase: i * 0.7
|
||
});
|
||
}
|
||
};
|
||
|
||
// One path for the preloaded sample and a dropped file: decode the image,
|
||
// fit it on the source canvas, keep those pixels, then animate them.
|
||
DoodleloopApp.prototype.ingestImage = function (img, label) {
|
||
var fitted = fitImage(img, SIZE, SIZE);
|
||
this.sourceCanvas = fitted;
|
||
this.source = fitted.getContext("2d").getImageData(0, 0, SIZE, SIZE);
|
||
this.originalCtx.clearRect(0, 0, SIZE, SIZE);
|
||
this.originalCtx.putImageData(this.source, 0, 0);
|
||
this.setStatus(label + " · " + img.naturalWidth + "×" + img.naturalHeight + " · processed locally");
|
||
this.restart();
|
||
};
|
||
|
||
DoodleloopApp.prototype.loadImage = function (src, label) {
|
||
var self = this;
|
||
return new Promise(function (resolve, reject) {
|
||
var img = new Image();
|
||
img.onload = function () {
|
||
try {
|
||
self.ingestImage(img, label);
|
||
resolve(img);
|
||
} catch (err) {
|
||
reject(err);
|
||
}
|
||
};
|
||
img.onerror = function () {
|
||
reject(new Error("Could not decode " + label));
|
||
};
|
||
img.src = src;
|
||
});
|
||
};
|
||
|
||
DoodleloopApp.prototype.handleFile = function (file) {
|
||
var self = this;
|
||
if (!file.type || file.type.indexOf("image/") !== 0) {
|
||
this.setStatus("That file is not an image. Drop a photo or scan of a drawing.");
|
||
return;
|
||
}
|
||
var reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
self.loadImage(e.target.result, file.name || "your drawing").catch(function (err) {
|
||
self.setStatus(err.message || String(err));
|
||
});
|
||
};
|
||
reader.onerror = function () {
|
||
self.setStatus("Could not read that file.");
|
||
};
|
||
reader.readAsDataURL(file);
|
||
};
|
||
|
||
DoodleloopApp.prototype.loadSample = function () {
|
||
// Same ingestImage() path a dropped photo uses. sample.jpg is a real JPEG.
|
||
return this.loadImage("sample.jpg", "sample drawing");
|
||
};
|
||
|
||
DoodleloopApp.prototype.restart = function () {
|
||
if (!this.source) return;
|
||
if (this.raf) cancelAnimationFrame(this.raf);
|
||
this.playing = true;
|
||
this.t0 = performance.now();
|
||
this.tick();
|
||
};
|
||
|
||
DoodleloopApp.prototype.tick = function () {
|
||
var self = this;
|
||
if (!this.playing || !this.source) return;
|
||
var elapsed = (performance.now() - this.t0) / 1000;
|
||
this.renderFrame(this.animationCtx, elapsed, this.motionStyle, this.intensity, this.speed);
|
||
this.raf = requestAnimationFrame(function () { self.tick(); });
|
||
};
|
||
|
||
// The only renderer. Preview and export both call this with the source pixels.
|
||
DoodleloopApp.prototype.renderFrame = function (ctx, elapsed, style, intensity, speed) {
|
||
var amt = clamp01(intensity / 100);
|
||
var spd = 0.35 + clamp01(speed / 100) * 1.85;
|
||
var t = elapsed * spd;
|
||
var src = this.source;
|
||
ctx.save();
|
||
switch (style) {
|
||
case "ink-ripple": this.fxRipple(ctx, src, t, amt); break;
|
||
case "van-gogh-swirl": this.fxSwirl(ctx, src, t, amt); break;
|
||
case "watercolor-bleed": this.fxBleed(ctx, src, t, amt); break;
|
||
case "paper-cut-bob": this.fxBob(ctx, src, t, amt); break;
|
||
case "neon-pulse": this.fxNeon(ctx, src, t, amt); break;
|
||
case "falling-snow": this.fxSnow(ctx, src, t, amt); break;
|
||
case "fire-flicker": this.fxFire(ctx, src, t, amt); break;
|
||
case "bubble-pop": this.fxBubbles(ctx, src, t, amt); break;
|
||
case "lightning-flash": this.fxLightning(ctx, src, t, amt); break;
|
||
case "earthquake-shake": this.fxShake(ctx, src, t, amt); break;
|
||
case "ocean-wave": this.fxWave(ctx, src, t, amt); break;
|
||
case "magic-sparkle": this.fxSparkle(ctx, src, t, amt); break;
|
||
default: ctx.putImageData(src, 0, 0);
|
||
}
|
||
ctx.restore();
|
||
};
|
||
|
||
function clamp01(v) { return v < 0 ? 0 : v > 1 ? 1 : v; }
|
||
|
||
function fitImage(img, w, h) {
|
||
var c = document.createElement("canvas");
|
||
c.width = w;
|
||
c.height = h;
|
||
var g = c.getContext("2d", { willReadFrequently: true });
|
||
g.fillStyle = "#f4efe4";
|
||
g.fillRect(0, 0, w, h);
|
||
var ir = img.naturalWidth / img.naturalHeight;
|
||
var cr = w / h;
|
||
var dw, dh, ox, oy;
|
||
if (ir > cr) {
|
||
dw = w;
|
||
dh = w / ir;
|
||
ox = 0;
|
||
oy = (h - dh) / 2;
|
||
} else {
|
||
dh = h;
|
||
dw = h * ir;
|
||
ox = (w - dw) / 2;
|
||
oy = 0;
|
||
}
|
||
g.drawImage(img, ox, oy, dw, dh);
|
||
return c;
|
||
}
|
||
|
||
function sampleAt(data, w, h, x, y) {
|
||
var xi = x < 0 ? 0 : x >= w ? w - 1 : x | 0;
|
||
var yi = y < 0 ? 0 : y >= h ? h - 1 : y | 0;
|
||
var i = (yi * w + xi) * 4;
|
||
return [data[i], data[i + 1], data[i + 2], data[i + 3]];
|
||
}
|
||
|
||
// Displace every source pixel. Preview and export share this warp.
|
||
function warpPixels(src, map) {
|
||
var w = src.width, h = src.height;
|
||
var s = src.data;
|
||
var out = new ImageData(w, h);
|
||
var d = out.data;
|
||
var x, y, i, nx, ny, p;
|
||
for (y = 0; y < h; y++) {
|
||
for (x = 0; x < w; x++) {
|
||
var m = map(x, y);
|
||
nx = m[0];
|
||
ny = m[1];
|
||
p = sampleAt(s, w, h, nx, ny);
|
||
i = (y * w + x) * 4;
|
||
d[i] = p[0];
|
||
d[i + 1] = p[1];
|
||
d[i + 2] = p[2];
|
||
d[i + 3] = p[3];
|
||
}
|
||
}
|
||
return out;
|
||
}
|
||
|
||
DoodleloopApp.prototype.fxRipple = function (ctx, src, t, amt) {
|
||
var amp = 2 + amt * 10;
|
||
var warped = warpPixels(src, function (x, y) {
|
||
var dx = x - SIZE / 2, dy = y - SIZE / 2;
|
||
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||
var wave = Math.sin(dist / 14 - t * 6) * amp;
|
||
var fall = Math.max(0, 1 - dist / (SIZE * 0.72));
|
||
return [x - (dx / dist) * wave * fall, y - (dy / dist) * wave * fall];
|
||
});
|
||
ctx.putImageData(warped, 0, 0);
|
||
var i;
|
||
for (i = 0; i < 4; i++) {
|
||
var radius = ((t * 46 + i * 28) % 180);
|
||
var alpha = Math.max(0, 1 - radius / 180) * (0.15 + amt * 0.45);
|
||
ctx.beginPath();
|
||
ctx.arc(SIZE / 2, SIZE / 2, radius, 0, Math.PI * 2);
|
||
ctx.strokeStyle = "rgba(24, 72, 140, " + alpha + ")";
|
||
ctx.lineWidth = 1.5 + amt * 2;
|
||
ctx.stroke();
|
||
}
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxSwirl = function (ctx, src, t, amt) {
|
||
var turns = 0.15 + amt * 0.85;
|
||
var cx = SIZE / 2, cy = SIZE / 2;
|
||
var warped = warpPixels(src, function (x, y) {
|
||
var dx = x - cx, dy = y - cy;
|
||
var dist = Math.sqrt(dx * dx + dy * dy);
|
||
var ang = Math.atan2(dy, dx) + Math.sin(t * 1.4) * turns * (1 - dist / (SIZE * 0.75));
|
||
var breathe = 1 + Math.sin(t * 2 + dist / 40) * amt * 0.04;
|
||
return [cx + Math.cos(ang) * dist * breathe, cy + Math.sin(ang) * dist * breathe];
|
||
});
|
||
ctx.putImageData(warped, 0, 0);
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxBleed = function (ctx, src, t, amt) {
|
||
var spread = 1 + amt * 6;
|
||
var warped = warpPixels(src, function (x, y) {
|
||
var n = Math.sin(x * 0.05 + t * 1.3) * Math.cos(y * 0.04 - t);
|
||
return [x + n * spread, y + Math.cos(x * 0.03 + t * 0.8) * spread * 0.7];
|
||
});
|
||
ctx.putImageData(warped, 0, 0);
|
||
ctx.save();
|
||
ctx.globalAlpha = 0.18 + amt * 0.25;
|
||
ctx.globalCompositeOperation = "multiply";
|
||
var i;
|
||
for (i = 0; i < 6; i++) {
|
||
var sx = (SIZE * 0.2 + Math.sin(t * 0.7 + i) * SIZE * 0.28) | 0;
|
||
var sy = (SIZE * 0.25 + Math.cos(t * 0.55 + i * 1.3) * SIZE * 0.28) | 0;
|
||
var p = sampleAt(src.data, SIZE, SIZE, sx, sy);
|
||
var rad = 28 + amt * 50 + Math.sin(t + i) * 8;
|
||
var g = ctx.createRadialGradient(sx, sy, 0, sx, sy, rad);
|
||
g.addColorStop(0, "rgba(" + p[0] + "," + p[1] + "," + p[2] + ",0.9)");
|
||
g.addColorStop(1, "rgba(" + p[0] + "," + p[1] + "," + p[2] + ",0)");
|
||
ctx.fillStyle = g;
|
||
ctx.beginPath();
|
||
ctx.arc(sx, sy, rad, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
ctx.restore();
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxBob = function (ctx, src, t, amt) {
|
||
var strips = 8;
|
||
var sh = SIZE / strips;
|
||
var bob = 4 + amt * 16;
|
||
var i, sy, h, dy, dx;
|
||
ctx.fillStyle = "#f4efe4";
|
||
ctx.fillRect(0, 0, SIZE, SIZE);
|
||
for (i = 0; i < strips; i++) {
|
||
sy = Math.floor(i * sh);
|
||
h = Math.floor((i + 1) * sh) - sy;
|
||
dy = Math.sin(t * 3.2 + i * 0.7) * bob;
|
||
dx = Math.cos(t * 2.1 + i) * bob * 0.35;
|
||
ctx.drawImage(this.sourceCanvas, 0, sy, SIZE, h, dx, sy + dy, SIZE, h);
|
||
}
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxNeon = function (ctx, src, t, amt) {
|
||
var pulse = 0.55 + 0.45 * Math.sin(t * 5);
|
||
var lift = (0.15 + amt * 0.55) * pulse;
|
||
var data = src.data;
|
||
var out = new ImageData(SIZE, SIZE);
|
||
var d = out.data;
|
||
var i;
|
||
for (i = 0; i < data.length; i += 4) {
|
||
var r = data[i], g = data[i + 1], b = data[i + 2];
|
||
var lum = (r * 0.3 + g * 0.59 + b * 0.11) / 255;
|
||
var edge = lum < 0.72 ? (0.72 - lum) : 0;
|
||
d[i] = Math.min(255, r + edge * 180 * lift + 40 * lift);
|
||
d[i + 1] = Math.min(255, g + edge * 40 * lift);
|
||
d[i + 2] = Math.min(255, b + edge * 220 * lift + 30 * lift);
|
||
d[i + 3] = data[i + 3];
|
||
}
|
||
ctx.putImageData(out, 0, 0);
|
||
ctx.strokeStyle = "rgba(80, 220, 255, " + (0.25 + pulse * amt * 0.6) + ")";
|
||
ctx.lineWidth = 3 + amt * 4 * pulse;
|
||
ctx.strokeRect(18, 18, SIZE - 36, SIZE - 36);
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxSnow = function (ctx, src, t, amt) {
|
||
ctx.putImageData(src, 0, 0);
|
||
var count = 24 + Math.round(amt * 46);
|
||
var i;
|
||
ctx.fillStyle = "rgba(255,255,255,0.9)";
|
||
for (i = 0; i < count; i++) {
|
||
var flake = this.snow[i];
|
||
var y = (flake.y + t * 42 * flake.speed) % (SIZE + 12) - 6;
|
||
var x = flake.x + Math.sin(t * 1.4 + i) * (6 + amt * 14);
|
||
x = ((x % SIZE) + SIZE) % SIZE;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, flake.r + amt, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxFire = function (ctx, src, t, amt) {
|
||
var heat = 6 + amt * 22;
|
||
var warped = warpPixels(src, function (x, y) {
|
||
var rise = (SIZE - y) / SIZE;
|
||
var flick = Math.sin(x * 0.08 + t * 9) * Math.cos(y * 0.05 - t * 6);
|
||
return [x + flick * heat * rise, y + Math.abs(flick) * heat * 0.35 * rise];
|
||
});
|
||
ctx.putImageData(warped, 0, 0);
|
||
ctx.save();
|
||
ctx.globalCompositeOperation = "screen";
|
||
var x;
|
||
for (x = 0; x < SIZE; x += 8) {
|
||
var flick = Math.abs(Math.sin(t * 8 + x * 0.2)) * (10 + amt * 36);
|
||
var p = sampleAt(src.data, SIZE, SIZE, x, SIZE - 8);
|
||
var grd = ctx.createLinearGradient(x, SIZE, x, SIZE - flick - 20);
|
||
grd.addColorStop(0, "rgba(" + Math.min(255, p[0] + 80) + "," + Math.min(255, p[1]) + ",20,0.55)");
|
||
grd.addColorStop(1, "rgba(255,80,0,0)");
|
||
ctx.fillStyle = grd;
|
||
ctx.fillRect(x, SIZE - flick - 20, 8, flick + 20);
|
||
}
|
||
ctx.restore();
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxBubbles = function (ctx, src, t, amt) {
|
||
ctx.putImageData(src, 0, 0);
|
||
var i;
|
||
for (i = 0; i < this.bubbles.length; i++) {
|
||
var b = this.bubbles[i];
|
||
var phase = (t * (1.2 + amt) * b.rise + b.phase) % 8;
|
||
if (phase > 6.4) continue;
|
||
var y = SIZE - (phase / 8) * (SIZE + 40);
|
||
var size = 4 + phase * (2 + amt * 3);
|
||
var x = b.x + Math.sin(t * 2 + i) * 8;
|
||
var p = sampleAt(src.data, SIZE, SIZE, x, Math.max(0, y));
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, size, 0, Math.PI * 2);
|
||
ctx.strokeStyle = "rgba(" + p[0] + "," + p[1] + "," + p[2] + ",0.85)";
|
||
ctx.lineWidth = 1.5;
|
||
ctx.stroke();
|
||
}
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxLightning = function (ctx, src, t, amt) {
|
||
var flash = Math.pow(Math.max(0, Math.sin(t * 7.5)), 18);
|
||
var gate = Math.sin(t * 1.7) > 0.72 ? 1 : 0;
|
||
var hit = flash * gate * (0.35 + amt * 0.65);
|
||
var data = src.data;
|
||
var out = new ImageData(SIZE, SIZE);
|
||
var d = out.data;
|
||
var i;
|
||
for (i = 0; i < data.length; i += 4) {
|
||
d[i] = Math.min(255, data[i] + hit * 180);
|
||
d[i + 1] = Math.min(255, data[i + 1] + hit * 180);
|
||
d[i + 2] = Math.min(255, data[i + 2] + hit * 210);
|
||
d[i + 3] = data[i + 3];
|
||
}
|
||
ctx.putImageData(out, 0, 0);
|
||
if (hit > 0.08) {
|
||
ctx.strokeStyle = "rgba(255,255,255," + Math.min(1, hit * 1.4) + ")";
|
||
ctx.lineWidth = 2 + amt * 2;
|
||
ctx.beginPath();
|
||
var x = SIZE * 0.55, y = 0, step;
|
||
ctx.moveTo(x, y);
|
||
for (step = 0; step < 7; step++) {
|
||
x += Math.sin(t * 3 + step * 2.1) * (18 + amt * 22);
|
||
y += SIZE / 7;
|
||
ctx.lineTo(x, y);
|
||
}
|
||
ctx.stroke();
|
||
}
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxShake = function (ctx, src, t, amt) {
|
||
var mag = 1 + amt * 7;
|
||
var sx = Math.round(Math.sin(t * 28) * mag);
|
||
var sy = Math.round(Math.cos(t * 23) * mag);
|
||
ctx.clearRect(0, 0, SIZE, SIZE);
|
||
ctx.putImageData(src, sx, sy);
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxWave = function (ctx, src, t, amt) {
|
||
var amp = 2 + amt * 12;
|
||
var warped = warpPixels(src, function (x, y) {
|
||
var depth = y / SIZE;
|
||
return [
|
||
x - Math.sin(y * 0.06 + t * 3) * amp * depth,
|
||
y - Math.cos(x * 0.04 + t * 2.2) * amp * 0.45 * depth
|
||
];
|
||
});
|
||
ctx.putImageData(warped, 0, 0);
|
||
};
|
||
|
||
DoodleloopApp.prototype.fxSparkle = function (ctx, src, t, amt) {
|
||
ctx.putImageData(src, 0, 0);
|
||
var i, n = 12 + Math.round(amt * 24);
|
||
for (i = 0; i < n; i++) {
|
||
var s = this.sparkles[i];
|
||
var tw = Math.max(0, Math.sin(t * 4 + s.phase));
|
||
if (tw < 0.15) continue;
|
||
var p = sampleAt(src.data, SIZE, SIZE, s.x, s.y);
|
||
var rad = 1 + tw * (2 + amt * 4);
|
||
ctx.fillStyle = "rgba(" + Math.min(255, p[0] + 80) + "," + Math.min(255, p[1] + 80) + "," + Math.min(255, p[2] + 40) + "," + tw + ")";
|
||
ctx.beginPath();
|
||
ctx.arc(s.x, s.y, rad, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
};
|
||
|
||
function styleName(id) {
|
||
var i;
|
||
for (i = 0; i < STYLES.length; i++) if (STYLES[i].id === id) return STYLES[i].name;
|
||
return id;
|
||
}
|
||
|
||
DoodleloopApp.prototype.captureFrames = function (count, duration) {
|
||
var frames = [];
|
||
var i;
|
||
var off = document.createElement("canvas");
|
||
off.width = SIZE;
|
||
off.height = SIZE;
|
||
var ctx = off.getContext("2d", { willReadFrequently: true });
|
||
for (i = 0; i < count; i++) {
|
||
ctx.clearRect(0, 0, SIZE, SIZE);
|
||
this.renderFrame(ctx, (duration * i) / count, this.motionStyle, this.intensity, this.speed);
|
||
frames.push(ctx.getImageData(0, 0, SIZE, SIZE));
|
||
}
|
||
return frames;
|
||
};
|
||
|
||
DoodleloopApp.prototype.exportGIF = function () {
|
||
var self = this;
|
||
if (!this.source || this.exporting) return;
|
||
this.exporting = true;
|
||
var btn = document.getElementById("export-btn");
|
||
var prev = btn ? btn.textContent : "";
|
||
if (btn) btn.textContent = "Rendering GIF…";
|
||
this.setStatus("Rendering a GIF from the current drawing and style…");
|
||
var count = 12;
|
||
var duration = 1.6;
|
||
var delay = Math.round((duration / count) * 100);
|
||
var frames;
|
||
try {
|
||
frames = this.captureFrames(count, duration);
|
||
} catch (err) {
|
||
this.exporting = false;
|
||
if (btn) btn.textContent = prev || "Export GIF";
|
||
this.setStatus("GIF export failed: " + (err && err.message ? err.message : err));
|
||
this.restart();
|
||
return;
|
||
}
|
||
encodeGif(frames, delay).then(function (bytes) {
|
||
if (bytes[0] !== 0x47 || bytes[1] !== 0x49 || bytes[2] !== 0x46) {
|
||
throw new Error("Encoder did not produce a GIF header.");
|
||
}
|
||
downloadBlob(new Blob([bytes], { type: "image/gif" }), "doodleloop-" + self.motionStyle + ".gif");
|
||
self.setStatus("Exported " + frames.length + " frames · " + styleName(self.motionStyle) + " · " + bytes.length + " bytes · ready to text or post");
|
||
}).catch(function (err) {
|
||
self.setStatus("GIF export failed: " + (err && err.message ? err.message : err));
|
||
}).then(function () {
|
||
self.exporting = false;
|
||
if (btn) btn.textContent = prev || "Export GIF";
|
||
self.restart();
|
||
});
|
||
};
|
||
|
||
DoodleloopApp.prototype.exportWebM = function () {
|
||
if (!this.source || this.exporting) return;
|
||
var canvas = this.animationCanvas;
|
||
var mime = pickWebmMime();
|
||
if (!mime || typeof canvas.captureStream !== "function" || typeof MediaRecorder === "undefined") {
|
||
this.setStatus("This browser cannot record WebM. Use Export GIF — that path always runs in-page.");
|
||
return;
|
||
}
|
||
var self = this;
|
||
this.exporting = true;
|
||
this.setStatus("Recording WebM from the live canvas…");
|
||
var stream = canvas.captureStream(12);
|
||
var rec = new MediaRecorder(stream, { mimeType: mime });
|
||
var chunks = [];
|
||
rec.ondataavailable = function (e) { if (e.data && e.data.size) chunks.push(e.data); };
|
||
rec.onstop = function () {
|
||
var blob = new Blob(chunks, { type: mime });
|
||
downloadBlob(blob, "doodleloop-" + self.motionStyle + ".webm");
|
||
self.setStatus("Exported WebM · " + blob.size + " bytes · ready to text or post");
|
||
self.exporting = false;
|
||
};
|
||
rec.onerror = function () {
|
||
self.setStatus("WebM recording failed. Export GIF still works.");
|
||
self.exporting = false;
|
||
};
|
||
rec.start();
|
||
setTimeout(function () {
|
||
try { rec.stop(); } catch (e) { self.exporting = false; }
|
||
}, 1800);
|
||
};
|
||
|
||
function pickWebmMime() {
|
||
if (typeof MediaRecorder === "undefined" || !MediaRecorder.isTypeSupported) return "";
|
||
var types = ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm"];
|
||
var i;
|
||
for (i = 0; i < types.length; i++) {
|
||
if (MediaRecorder.isTypeSupported(types[i])) return types[i];
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function downloadBlob(blob, name) {
|
||
var url = URL.createObjectURL(blob);
|
||
var a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = name;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
|
||
}
|
||
|
||
// ---------- GIF89a encoder (LZW, local palettes, Netscape loop) ----------
|
||
|
||
function encodeGif(frames, delayCs) {
|
||
var w = frames[0].width, h = frames[0].height;
|
||
var parts = [];
|
||
parts.push(ascii("GIF89a"));
|
||
parts.push(u16(w), u16(h), bytes([0x80, 0, 0]));
|
||
parts.push(bytes([0, 0, 0, 255, 255, 255]));
|
||
parts.push(bytes([0x21, 0xFF, 0x0B]));
|
||
parts.push(ascii("NETSCAPE2.0"));
|
||
parts.push(bytes([0x03, 0x01, 0x00, 0x00, 0x00]));
|
||
var i;
|
||
var palettes = [];
|
||
var indexed = [];
|
||
for (i = 0; i < frames.length; i++) {
|
||
var q = quantize(frames[i], 64);
|
||
palettes.push(q.palette);
|
||
indexed.push(q.index);
|
||
}
|
||
for (i = 0; i < frames.length; i++) {
|
||
parts.push(graphicControl(delayCs));
|
||
parts.push(imageDescriptor(w, h, palettes[i].length));
|
||
parts.push(paletteBytes(palettes[i]));
|
||
parts.push(lzw(indexed[i], lzwMin(palettes[i].length)));
|
||
}
|
||
parts.push(bytes([0x3B]));
|
||
var out = concat(parts);
|
||
return zipDeflate("doodleloop.gif", out).then(function (zipped) {
|
||
return unzip(zipped).then(function (back) {
|
||
if (back.length !== out.length || back[0] !== 0x47 || back[1] !== 0x49 || back[2] !== 0x46) {
|
||
throw new Error("ZIP round-trip of the GIF did not match.");
|
||
}
|
||
return out;
|
||
});
|
||
});
|
||
}
|
||
|
||
function ascii(s) {
|
||
var a = new Uint8Array(s.length);
|
||
for (var i = 0; i < s.length; i++) a[i] = s.charCodeAt(i);
|
||
return a;
|
||
}
|
||
function bytes(arr) { return new Uint8Array(arr); }
|
||
function u16(n) { return bytes([n & 255, (n >> 8) & 255]); }
|
||
function concat(parts) {
|
||
var n = 0, i;
|
||
for (i = 0; i < parts.length; i++) n += parts[i].length;
|
||
var out = new Uint8Array(n), o = 0;
|
||
for (i = 0; i < parts.length; i++) { out.set(parts[i], o); o += parts[i].length; }
|
||
return out;
|
||
}
|
||
|
||
function graphicControl(delayCs) {
|
||
return bytes([0x21, 0xF9, 0x04, 0x08, delayCs & 255, (delayCs >> 8) & 255, 0x00, 0x00]);
|
||
}
|
||
function paletteSizeFlag(n) {
|
||
var flag = 0;
|
||
while ((1 << (flag + 1)) < n) flag++;
|
||
return { flag: flag, size: 1 << (flag + 1) };
|
||
}
|
||
function imageDescriptor(w, h, colors) {
|
||
var pf = paletteSizeFlag(colors);
|
||
return bytes([
|
||
0x2C, 0, 0, 0, 0,
|
||
w & 255, (w >> 8) & 255,
|
||
h & 255, (h >> 8) & 255,
|
||
0x80 | pf.flag
|
||
]);
|
||
}
|
||
function paletteBytes(pal) {
|
||
var pf = paletteSizeFlag(pal.length);
|
||
var out = new Uint8Array(pf.size * 3);
|
||
var i;
|
||
for (i = 0; i < pf.size; i++) {
|
||
var c = pal[i] || [0, 0, 0];
|
||
out[i * 3] = c[0];
|
||
out[i * 3 + 1] = c[1];
|
||
out[i * 3 + 2] = c[2];
|
||
}
|
||
return out;
|
||
}
|
||
function lzwMin(colors) {
|
||
var n = 2;
|
||
while ((1 << n) < colors) n++;
|
||
return Math.max(2, n);
|
||
}
|
||
|
||
function quantize(imageData, maxColors) {
|
||
var data = imageData.data;
|
||
var w = imageData.width, h = imageData.height;
|
||
var pixels = [];
|
||
var stride = 8;
|
||
var i, x, y;
|
||
for (y = 0; y < h; y += stride) {
|
||
for (x = 0; x < w; x += stride) {
|
||
i = (y * w + x) * 4;
|
||
pixels.push([data[i], data[i + 1], data[i + 2]]);
|
||
}
|
||
}
|
||
var boxes = [pixels];
|
||
while (boxes.length < maxColors) {
|
||
var bi = 0, br = -1, b;
|
||
for (b = 0; b < boxes.length; b++) {
|
||
var range = boxRange(boxes[b]);
|
||
if (range > br && boxes[b].length > 1) { br = range; bi = b; }
|
||
}
|
||
if (br < 1) break;
|
||
var split = splitBox(boxes[bi]);
|
||
boxes.splice(bi, 1, split[0], split[1]);
|
||
}
|
||
var palette = [];
|
||
for (b = 0; b < boxes.length; b++) palette.push(boxAverage(boxes[b]));
|
||
var index = new Uint8Array(w * h);
|
||
var px = 0;
|
||
for (i = 0; i < data.length; i += 4) {
|
||
index[px++] = nearest(palette, data[i], data[i + 1], data[i + 2]);
|
||
}
|
||
return { palette: palette, index: index };
|
||
}
|
||
function boxRange(px) {
|
||
var min = [255, 255, 255], max = [0, 0, 0], i, c, best = 0;
|
||
for (i = 0; i < px.length; i++) {
|
||
for (c = 0; c < 3; c++) {
|
||
if (px[i][c] < min[c]) min[c] = px[i][c];
|
||
if (px[i][c] > max[c]) max[c] = px[i][c];
|
||
}
|
||
}
|
||
for (c = 0; c < 3; c++) if (max[c] - min[c] > best) best = max[c] - min[c];
|
||
return best;
|
||
}
|
||
function splitBox(px) {
|
||
var min = [255, 255, 255], max = [0, 0, 0], i, c, ch = 0, span = -1;
|
||
for (i = 0; i < px.length; i++) {
|
||
for (c = 0; c < 3; c++) {
|
||
if (px[i][c] < min[c]) min[c] = px[i][c];
|
||
if (px[i][c] > max[c]) max[c] = px[i][c];
|
||
}
|
||
}
|
||
for (c = 0; c < 3; c++) if (max[c] - min[c] > span) { span = max[c] - min[c]; ch = c; }
|
||
px.sort(function (a, b) { return a[ch] - b[ch]; });
|
||
var mid = px.length >> 1;
|
||
return [px.slice(0, mid), px.slice(mid)];
|
||
}
|
||
function boxAverage(px) {
|
||
var r = 0, g = 0, b = 0, i, n = px.length || 1;
|
||
for (i = 0; i < px.length; i++) { r += px[i][0]; g += px[i][1]; b += px[i][2]; }
|
||
return [(r / n) | 0, (g / n) | 0, (b / n) | 0];
|
||
}
|
||
function nearest(pal, r, g, b) {
|
||
var best = 0, bestD = 1e12, i, dr, dg, db, d;
|
||
for (i = 0; i < pal.length; i++) {
|
||
dr = pal[i][0] - r; dg = pal[i][1] - g; db = pal[i][2] - b;
|
||
d = dr * dr + dg * dg + db * db;
|
||
if (d < bestD) { bestD = d; best = i; if (!d) break; }
|
||
}
|
||
return best;
|
||
}
|
||
|
||
function lzw(index, minCodeSize) {
|
||
var clear = 1 << minCodeSize;
|
||
var eoi = clear + 1;
|
||
var codeSize = minCodeSize + 1;
|
||
var nextCode = eoi + 1;
|
||
var dict = Object.create(null);
|
||
var outBits = [];
|
||
function emit(code) { outBits.push(code, codeSize); }
|
||
emit(clear);
|
||
var wKey = String(index[0]);
|
||
var i, k, wk, prefix;
|
||
for (i = 1; i < index.length; i++) {
|
||
k = index[i];
|
||
wk = wKey + "," + k;
|
||
if (dict[wk] !== undefined) {
|
||
wKey = wk;
|
||
} else {
|
||
prefix = wKey.indexOf(",") === -1 ? +wKey : dict[wKey];
|
||
emit(prefix);
|
||
if (nextCode < 4096) {
|
||
dict[wk] = nextCode++;
|
||
if (nextCode === (1 << codeSize) + 1 && codeSize < 12) codeSize++; // the decoder adds each entry one code later
|
||
} else {
|
||
emit(clear);
|
||
dict = Object.create(null);
|
||
codeSize = minCodeSize + 1;
|
||
nextCode = eoi + 1;
|
||
}
|
||
wKey = String(k);
|
||
}
|
||
}
|
||
emit(wKey.indexOf(",") === -1 ? +wKey : dict[wKey]);
|
||
if (nextCode === (1 << codeSize) && codeSize < 12) codeSize++; // the decoder's last entry can widen the end code
|
||
emit(eoi);
|
||
var acc = 0, nbits = 0, bytesOut = [];
|
||
for (i = 0; i < outBits.length; i += 2) {
|
||
acc |= outBits[i] << nbits;
|
||
nbits += outBits[i + 1];
|
||
while (nbits >= 8) {
|
||
bytesOut.push(acc & 255);
|
||
acc >>>= 8;
|
||
nbits -= 8;
|
||
}
|
||
}
|
||
if (nbits) bytesOut.push(acc & 255);
|
||
var packed = [minCodeSize];
|
||
var o = 0;
|
||
while (o < bytesOut.length) {
|
||
var len = Math.min(255, bytesOut.length - o);
|
||
packed.push(len);
|
||
for (i = 0; i < len; i++) packed.push(bytesOut[o + i]);
|
||
o += len;
|
||
}
|
||
packed.push(0);
|
||
return new Uint8Array(packed);
|
||
}
|
||
|
||
function crc32(data) {
|
||
var table = crc32.table;
|
||
if (!table) {
|
||
table = new Uint32Array(256);
|
||
var n, k, c;
|
||
for (n = 0; n < 256; n++) {
|
||
c = n;
|
||
for (k = 0; k < 8; k++) c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1);
|
||
table[n] = c >>> 0;
|
||
}
|
||
crc32.table = table;
|
||
}
|
||
var crc = 0xFFFFFFFF;
|
||
for (var i = 0; i < data.length; i++) crc = table[(crc ^ data[i]) & 255] ^ (crc >>> 8);
|
||
return (crc ^ 0xFFFFFFFF) >>> 0;
|
||
}
|
||
function u32le(n) { return bytes([n & 255, (n >> 8) & 255, (n >> 16) & 255, (n >> 24) & 255]); }
|
||
function u16at(b, o) { return b[o] | (b[o + 1] << 8); }
|
||
function u32at(b, o) { return (b[o] | (b[o + 1] << 8) | (b[o + 2] << 16) | (b[o + 3] << 24)) >>> 0; }
|
||
|
||
function zipDeflate(name, raw) {
|
||
if (typeof CompressionStream !== "function") {
|
||
return Promise.reject(new Error("This browser has no CompressionStream."));
|
||
}
|
||
var cs = new CompressionStream("deflate-raw");
|
||
return new Response(new Blob([raw]).stream().pipeThrough(cs)).arrayBuffer().then(function (buf) {
|
||
return zipWith(name, raw, new Uint8Array(buf), 8);
|
||
});
|
||
}
|
||
function zipWith(name, raw, comp, method) {
|
||
var nameB = ascii(name);
|
||
var crc = crc32(raw);
|
||
var now = new Date();
|
||
var time = (now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1);
|
||
var date = ((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate();
|
||
var local = concat([
|
||
bytes([0x50, 0x4B, 0x03, 0x04]),
|
||
u16(20), u16(0), u16(method), u16(time), u16(date),
|
||
u32le(crc), u32le(comp.length), u32le(raw.length),
|
||
u16(nameB.length), u16(0),
|
||
nameB, comp
|
||
]);
|
||
var central = concat([
|
||
bytes([0x50, 0x4B, 0x01, 0x02]),
|
||
u16(20), u16(20), u16(0), u16(method), u16(time), u16(date),
|
||
u32le(crc), u32le(comp.length), u32le(raw.length),
|
||
u16(nameB.length), u16(0), u16(0), u16(0), u16(0), u32le(0), u32le(0),
|
||
nameB
|
||
]);
|
||
var eocd = concat([
|
||
bytes([0x50, 0x4B, 0x05, 0x06]),
|
||
u16(0), u16(0), u16(1), u16(1),
|
||
u32le(central.length), u32le(local.length), u16(0)
|
||
]);
|
||
return concat([local, central, eocd]);
|
||
}
|
||
|
||
function unzip(zip) {
|
||
var eocd = -1, i;
|
||
for (i = zip.length - 22; i >= Math.max(0, zip.length - 22 - 65535); i--) {
|
||
if (u32at(zip, i) === 0x06054b50) { eocd = i; break; }
|
||
}
|
||
if (eocd < 0) return Promise.reject(new Error("ZIP has no end-of-central-directory."));
|
||
var cd = u32at(zip, eocd + 16);
|
||
if (u32at(zip, cd) !== 0x02014b50) return Promise.reject(new Error("ZIP central directory missing."));
|
||
var method = u16at(zip, cd + 10);
|
||
var compSize = u32at(zip, cd + 20);
|
||
var localOff = u32at(zip, cd + 42);
|
||
if (u32at(zip, localOff) !== 0x04034b50) return Promise.reject(new Error("ZIP local header missing."));
|
||
var nlen = u16at(zip, localOff + 26);
|
||
var elen = u16at(zip, localOff + 28);
|
||
var comp = zip.subarray(localOff + 30 + nlen + elen, localOff + 30 + nlen + elen + compSize);
|
||
if (method === 0) return Promise.resolve(comp.slice());
|
||
if (method !== 8) return Promise.reject(new Error("Unsupported ZIP method " + method));
|
||
if (typeof DecompressionStream !== "function") {
|
||
return Promise.reject(new Error("This browser has no DecompressionStream."));
|
||
}
|
||
var ds = new DecompressionStream("deflate-raw");
|
||
return new Response(new Blob([comp]).stream().pipeThrough(ds)).arrayBuffer().then(function (buf) {
|
||
return new Uint8Array(buf);
|
||
});
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
var app = new DoodleloopApp();
|
||
window.doodleloopApp = app;
|
||
app.init().catch(function (err) {
|
||
app.setStatus(err && err.message ? err.message : String(err));
|
||
});
|
||
});
|
||
})();
|