Major update: synth styles, gradient sets, export dialogs, glass UI, docs
- Synth styles: blend any two renderers with five mix operations into brand-new generated looks, savable to localStorage as style chips - Share codes bumped to v2 (synth fields), v1 codes still decode - Gradient set generator: 4-12 seed variations with preview grid and ZIP batch download via a dependency-free store-only ZIP writer - Export buttons now open dialogs with live preview and settings - UI redesign: glassy translucent surfaces, rounder geometry, staggered intro animation, hover micro-interactions, refined scrollbars - Docs page, generated favicon/touch icons and OG image, meta tags - Skip chromatic aberration during synth blends to keep the D3D shader linker under its inlining limit Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Leonxlnx
+261
@@ -0,0 +1,261 @@
|
||||
/* Modal system: export dialog with preview and settings, and the set
|
||||
generator that produces N consistent variations of the current design. */
|
||||
|
||||
var Modals = (function () {
|
||||
|
||||
function el(tag, cls, parent) {
|
||||
var e = document.createElement(tag);
|
||||
if (cls) e.className = cls;
|
||||
if (parent) parent.appendChild(e);
|
||||
return e;
|
||||
}
|
||||
|
||||
var root = null;
|
||||
|
||||
function open(title, subtitle) {
|
||||
close();
|
||||
root = el("div", "modal-backdrop", document.body);
|
||||
var card = el("div", "modal-card", root);
|
||||
var head = el("div", "modal-head", card);
|
||||
var tWrap = el("div", null, head);
|
||||
var t = el("div", "modal-title", tWrap);
|
||||
t.textContent = title;
|
||||
if (subtitle) {
|
||||
var s = el("div", "modal-sub mono", tWrap);
|
||||
s.textContent = subtitle;
|
||||
}
|
||||
var x = el("button", "modal-close", head);
|
||||
x.innerHTML = '<svg viewBox="0 0 12 12"><path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.6" fill="none"/></svg>';
|
||||
x.addEventListener("click", close);
|
||||
root.addEventListener("click", function (e) { if (e.target === root) close(); });
|
||||
var body = el("div", "modal-body", card);
|
||||
return body;
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (root) { root.remove(); root = null; }
|
||||
}
|
||||
|
||||
function snapshotInto(canvas2d, aspect) {
|
||||
var src = Engine.canvas();
|
||||
var ctx = canvas2d.getContext("2d");
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.fillRect(0, 0, canvas2d.width, canvas2d.height);
|
||||
ctx.drawImage(src, 0, 0, canvas2d.width, canvas2d.height);
|
||||
}
|
||||
|
||||
/* ---------- export dialog ---------- */
|
||||
|
||||
function selectField(parent, label, options, value, onChange) {
|
||||
var row = el("div", "field-row", parent);
|
||||
var lab = el("span", "ctl-label", row);
|
||||
lab.textContent = label;
|
||||
var sel = el("select", null, row);
|
||||
options.forEach(function (o) {
|
||||
var op = el("option", null, sel);
|
||||
op.value = o[0]; op.textContent = o[1];
|
||||
});
|
||||
sel.value = value;
|
||||
sel.addEventListener("change", function () { onChange(sel.value); });
|
||||
return sel;
|
||||
}
|
||||
|
||||
function toggleField(parent, label, value, onChange) {
|
||||
var row = el("div", "toggle-row", parent);
|
||||
var lab = el("span", "ctl-label", row);
|
||||
lab.textContent = label;
|
||||
var tg = el("button", "toggle" + (value ? " on" : ""), row);
|
||||
tg.addEventListener("click", function () {
|
||||
var on = !tg.classList.contains("on");
|
||||
tg.classList.toggle("on", on);
|
||||
onChange(on);
|
||||
});
|
||||
}
|
||||
|
||||
function openExport(kind) {
|
||||
var titles = { png: "Export image", video: "Export video", gif: "Export GIF" };
|
||||
var body = open(titles[kind], MODES[P.mode].full + " \u00b7 seed " + Math.round(P.seed));
|
||||
|
||||
/* live preview */
|
||||
var prevWrap = el("div", "modal-preview", body);
|
||||
var pv = el("canvas", null, prevWrap);
|
||||
var ar = ASPECTS[P.aspect];
|
||||
pv.width = 480; pv.height = Math.round(480 / ar);
|
||||
snapshotInto(pv, ar);
|
||||
var pvTimer = setInterval(function () {
|
||||
if (!document.body.contains(pv)) { clearInterval(pvTimer); return; }
|
||||
snapshotInto(pv, ar);
|
||||
}, 120);
|
||||
var pvMeta = el("div", "modal-preview-meta mono", prevWrap);
|
||||
|
||||
var form = el("div", "modal-form", body);
|
||||
|
||||
function metaText() {
|
||||
if (kind === "png") {
|
||||
var h = parseInt(P.imgRes, 10);
|
||||
return Math.round(h * ar) + " \u00d7 " + h + " px";
|
||||
}
|
||||
if (kind === "video") {
|
||||
var vh = parseInt(P.vidRes, 10);
|
||||
var fps = parseInt(P.vidFps, 10);
|
||||
var sec = (String(P.vidLen).charAt(0) === "s")
|
||||
? parseInt(String(P.vidLen).slice(1), 10)
|
||||
: P.loop * parseInt(String(P.vidLen).slice(1), 10);
|
||||
return Math.round(vh * ar) + " \u00d7 " + vh + " \u00b7 " + fps + " fps \u00b7 " +
|
||||
sec.toFixed(1) + "s \u00b7 " + Math.round(sec * fps) + " frames";
|
||||
}
|
||||
var gw = parseInt(P.gifW, 10);
|
||||
return gw + " \u00d7 " + Math.round(gw / ar) + " \u00b7 " + P.gifFps + " fps \u00b7 " +
|
||||
Math.round(P.loop * P.gifFps) + " frames \u00b7 " + P.loop.toFixed(1) + "s loop";
|
||||
}
|
||||
function refreshMeta() { pvMeta.textContent = metaText(); }
|
||||
refreshMeta();
|
||||
|
||||
if (kind === "png") {
|
||||
selectField(form, "Resolution", [["1080", "1920 \u00d7 1080"], ["1440", "2560 \u00d7 1440"], ["2160", "3840 \u00d7 2160"]],
|
||||
P.imgRes, function (v) { P.imgRes = v; refreshMeta(); });
|
||||
} else if (kind === "video") {
|
||||
selectField(form, "Resolution", [["720", "720p"], ["1080", "1080p"], ["1440", "1440p"]],
|
||||
P.vidRes, function (v) { P.vidRes = v; refreshMeta(); });
|
||||
selectField(form, "Frame rate", [["24", "24 fps"], ["30", "30 fps"], ["60", "60 fps"]],
|
||||
P.vidFps, function (v) { P.vidFps = v; refreshMeta(); });
|
||||
selectField(form, "Length", [
|
||||
["l1", "1 loop"], ["l2", "2 loops"], ["l3", "3 loops"], ["l4", "4 loops"], ["l6", "6 loops"], ["l8", "8 loops"],
|
||||
["s5", "5 seconds"], ["s10", "10 seconds"], ["s15", "15 seconds"], ["s30", "30 seconds"], ["s60", "60 seconds"]
|
||||
], P.vidLen, function (v) { P.vidLen = v; refreshMeta(); });
|
||||
} else {
|
||||
selectField(form, "Width", [["360", "360 px"], ["480", "480 px"], ["640", "640 px"], ["800", "800 px"]],
|
||||
P.gifW, function (v) { P.gifW = v; refreshMeta(); });
|
||||
selectField(form, "Frame rate", [["15", "15 fps"], ["20", "20 fps"], ["25", "25 fps"], ["30", "30 fps"]],
|
||||
String(P.gifFps), function (v) { P.gifFps = parseInt(v, 10); refreshMeta(); });
|
||||
toggleField(form, "Dithering", P.gifDither, function (v) { P.gifDither = v; });
|
||||
toggleField(form, "Loop forever", P.gifLoop, function (v) { P.gifLoop = v; });
|
||||
}
|
||||
|
||||
var actions = el("div", "modal-actions", body);
|
||||
var dl = el("button", "btn btn-primary modal-dl", actions);
|
||||
dl.innerHTML = '<svg viewBox="0 0 16 16"><path d="M8 2 V10 M4.5 7 L8 10.5 L11.5 7" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M3 13.5 H13" stroke="currentColor" stroke-width="1.6"/></svg>Download ' +
|
||||
(kind === "png" ? "PNG" : kind === "video" ? "WebM" : "GIF");
|
||||
dl.addEventListener("click", function () {
|
||||
close();
|
||||
var a = ASPECTS[P.aspect];
|
||||
if (kind === "png") Exporter.exportPNG(P, a);
|
||||
else if (kind === "video") Exporter.exportVideo(P, a);
|
||||
else Exporter.exportGIF(P, a);
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- set generator ---------- */
|
||||
|
||||
function setSeeds(base, n) {
|
||||
var seeds = [];
|
||||
for (var i = 0; i < n; i++) seeds.push((base + 73 + i * 911) % 10000);
|
||||
return seeds;
|
||||
}
|
||||
|
||||
async function openSetGenerator() {
|
||||
var body = open("Gradient set", "consistent variations of the current design");
|
||||
var info = el("div", "modal-note", body);
|
||||
info.textContent = "Same style, palette and settings with different seeds. Use a set for hero, cards and section backgrounds that visually belong together.";
|
||||
|
||||
var form = el("div", "modal-form", body);
|
||||
var state = { count: 6, res: "1080" };
|
||||
selectField(form, "Variations", [["4", "4"], ["6", "6"], ["8", "8"], ["12", "12"]],
|
||||
"6", function (v) { state.count = parseInt(v, 10); build(); });
|
||||
selectField(form, "PNG size", [["720", "1280 \u00d7 720"], ["1080", "1920 \u00d7 1080"], ["2160", "3840 \u00d7 2160"]],
|
||||
"1080", function (v) { state.res = v; });
|
||||
|
||||
var grid = el("div", "set-grid", body);
|
||||
var actions = el("div", "modal-actions", body);
|
||||
var dl = el("button", "btn btn-primary modal-dl", actions);
|
||||
dl.innerHTML = '<svg viewBox="0 0 16 16"><path d="M8 2 V10 M4.5 7 L8 10.5 L11.5 7" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M3 13.5 H13" stroke="currentColor" stroke-width="1.6"/></svg>Download set as ZIP';
|
||||
|
||||
var seeds = [];
|
||||
|
||||
async function build() {
|
||||
grid.innerHTML = "";
|
||||
seeds = setSeeds(Math.round(P.seed), state.count);
|
||||
var ar = ASPECTS[P.aspect];
|
||||
|
||||
var origSeed = P.seed;
|
||||
var prev = Engine.size();
|
||||
var wasPlaying = Engine.isPlaying();
|
||||
Engine.suspend();
|
||||
Engine.setPlaying(false);
|
||||
Engine.setSize(320, 2 * Math.round(320 / ar / 2));
|
||||
|
||||
for (var i = 0; i < seeds.length; i++) {
|
||||
P.seed = seeds[i];
|
||||
Engine.renderAt(0.3);
|
||||
var tile = el("button", "set-tile", grid);
|
||||
var c = el("canvas", null, tile);
|
||||
c.width = 320; c.height = Math.round(320 / ar);
|
||||
c.getContext("2d").drawImage(Engine.canvas(), 0, 0, c.width, c.height);
|
||||
var lab = el("span", "set-tile-label mono", tile);
|
||||
lab.textContent = "#" + String(seeds[i]).padStart(4, "0");
|
||||
(function (sd) {
|
||||
tile.addEventListener("click", function () {
|
||||
P.seed = sd;
|
||||
refreshAll();
|
||||
UI.toast("Applied seed " + sd);
|
||||
close();
|
||||
});
|
||||
})(seeds[i]);
|
||||
await new Promise(function (r) { setTimeout(r, 0); });
|
||||
}
|
||||
|
||||
P.seed = origSeed;
|
||||
Engine.setSize(prev[0], prev[1]);
|
||||
Engine.setPlaying(wasPlaying);
|
||||
Engine.resume();
|
||||
}
|
||||
|
||||
dl.addEventListener("click", async function () {
|
||||
dl.disabled = true;
|
||||
dl.textContent = "Rendering\u2026";
|
||||
var ar = ASPECTS[P.aspect];
|
||||
var h = parseInt(state.res, 10);
|
||||
var w = 2 * Math.round(h * ar / 2);
|
||||
|
||||
var origSeed = P.seed;
|
||||
var prev = Engine.size();
|
||||
var wasPlaying = Engine.isPlaying();
|
||||
Engine.suspend();
|
||||
Engine.setPlaying(false);
|
||||
Engine.setSize(w, h);
|
||||
|
||||
var entries = [];
|
||||
for (var i = 0; i < seeds.length; i++) {
|
||||
P.seed = seeds[i];
|
||||
Engine.renderAt(0.3);
|
||||
var blob = await new Promise(function (res) { Engine.canvas().toBlob(res, "image/png"); });
|
||||
if (blob) {
|
||||
entries.push({
|
||||
name: "lumen-set-" + String(i + 1).padStart(2, "0") + "-seed" + String(seeds[i]).padStart(4, "0") + ".png",
|
||||
data: new Uint8Array(await blob.arrayBuffer())
|
||||
});
|
||||
}
|
||||
dl.textContent = "Rendering " + (i + 1) + "/" + seeds.length + "\u2026";
|
||||
await new Promise(function (r) { setTimeout(r, 0); });
|
||||
}
|
||||
|
||||
P.seed = origSeed;
|
||||
Engine.setSize(prev[0], prev[1]);
|
||||
Engine.setPlaying(wasPlaying);
|
||||
Engine.resume();
|
||||
|
||||
var zip = ZipWriter.build(entries);
|
||||
var a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(zip);
|
||||
a.download = "lumen-set-" + MODES[P.mode].key + ".zip";
|
||||
a.click();
|
||||
setTimeout(function () { URL.revokeObjectURL(a.href); }, 4000);
|
||||
UI.toast("Set saved: " + entries.length + " PNGs (" + w + "\u00d7" + h + ")");
|
||||
close();
|
||||
});
|
||||
|
||||
await build();
|
||||
}
|
||||
|
||||
return { openExport: openExport, openSetGenerator: openSetGenerator, close: close };
|
||||
})();
|
||||
Reference in New Issue
Block a user