Styles
Pick one of the 9 base styles in the Style section: Chrome, Silk, Bloom, Aura, Rays, Halftone, Glyphs, Reeded and Mosaic. Each one is its own renderer with its own character.
-
Synth styles go beyond the base set: New synth style blends two renderers with a random mix operation (organic mask, screen, multiply, radial or diagonal split) into a completely new look. The Synth blend slider controls how strongly the second layer shows. The big Randomize button also produces synth styles some of the time.
+
Generated styles go far beyond the base set: New style runs a style synthesizer with 12 genes covering field type, domain geometry, color mapping, shading model and surface overlay. Every gene set is a standalone style that does not exist in the base nine, named by its field archetype: FLUX, RIDGE, WAVE, RING, CELL or FLOW. The big Randomize button also discovers new styles some of the time.
Found something you love? Save style stores it in your browser. Saved styles appear as chips you can reload with one click, and they survive page reloads.
diff --git a/index.html b/index.html
index 93f6884..5fba21a 100644
--- a/index.html
+++ b/index.html
@@ -110,6 +110,7 @@
+
diff --git a/js/engine.js b/js/engine.js
index 38bef3d..326b353 100644
--- a/js/engine.js
+++ b/js/engine.js
@@ -18,7 +18,8 @@ var Engine = (function () {
"u_light", "u_gloss", "u_lightAngle", "u_irid", "u_glow",
"u_grain", "u_cell", "u_lines", "u_ca", "u_vig", "u_soft",
"u_travel",
- "u_synth", "u_modeB", "u_mixOp", "u_blend"
+ "u_synth", "u_modeB", "u_mixOp", "u_blend",
+ "u_genome", "u_g1", "u_g2", "u_g3"
];
function compile(type, src) {
@@ -112,6 +113,12 @@ var Engine = (function () {
gl.uniform1i(uniforms.u_modeB, P.modeB | 0);
gl.uniform1i(uniforms.u_mixOp, P.mixOp | 0);
gl.uniform1f(uniforms.u_blend, P.blend);
+
+ var g = P.genes || [0,0,0,0, 0,0,0,0, 0,0,0,0];
+ gl.uniform1i(uniforms.u_genome, P.genomeOn ? 1 : 0);
+ gl.uniform4f(uniforms.u_g1, g[0], g[1], g[2], g[3]);
+ gl.uniform4f(uniforms.u_g2, g[4], g[5], g[6], g[7]);
+ gl.uniform4f(uniforms.u_g3, g[8], g[9], g[10], g[11]);
}
function renderAt(phase) {
diff --git a/js/exporter.js b/js/exporter.js
index 8046f8a..08e40f2 100644
--- a/js/exporter.js
+++ b/js/exporter.js
@@ -49,7 +49,7 @@ var Exporter = (function () {
busy = false;
if (blob) {
download(blob, stamp(P, "png"));
- UI.toast("Saved " + w + "\u00d7" + h + " PNG");
+ FX.celebrate("Saved " + w + "\u00d7" + h + " PNG");
}
}, "image/png");
}
@@ -193,7 +193,7 @@ var Exporter = (function () {
hideOverlay();
busy = false;
download(new Blob([webm], { type: "video/webm" }), stamp(P, "webm"));
- UI.toast("Saved " + totalSec.toFixed(1) + "s WEBM \u00b7 " + nFrames + " frames \u00b7 " + w + "\u00d7" + h + " @ " + fps + "fps");
+ FX.celebrate("Saved " + totalSec.toFixed(1) + "s video \u00b7 " + w + "\u00d7" + h + " @ " + fps + "fps");
function restore() {
Engine.setSize(prev[0], prev[1]);
@@ -246,7 +246,7 @@ var Exporter = (function () {
busy = false;
if (data && !cancelled) {
download(new Blob([data], { type: "image/gif" }), stamp(P, "gif"));
- UI.toast("Saved " + nFrames + "-frame looping GIF (" + w + "\u00d7" + h + ")");
+ FX.celebrate("Saved " + nFrames + "-frame looping GIF (" + w + "\u00d7" + h + ")");
}
}
diff --git a/js/fx.js b/js/fx.js
new file mode 100644
index 0000000..b630d5e
--- /dev/null
+++ b/js/fx.js
@@ -0,0 +1,99 @@
+/* Celebration effect for finished exports: a palette-colored particle
+ burst with an expanding ring and a success toast with a drawn check.
+ Pure transform/opacity + one lightweight 2d canvas, auto-cleans. */
+
+var FX = (function () {
+
+ function celebrate(message) {
+ burst();
+ successToast(message);
+ }
+
+ function burst() {
+ var c = document.createElement("canvas");
+ c.className = "fx-layer";
+ var dpr = Math.min(window.devicePixelRatio || 1, 2);
+ c.width = innerWidth * dpr;
+ c.height = innerHeight * dpr;
+ document.body.appendChild(c);
+ var ctx = c.getContext("2d");
+ ctx.scale(dpr, dpr);
+
+ var cx = innerWidth / 2;
+ var cy = innerHeight * 0.42;
+
+ var ring = document.createElement("div");
+ ring.className = "fx-ring";
+ ring.style.left = cx + "px";
+ ring.style.top = cy + "px";
+ document.body.appendChild(ring);
+ setTimeout(function () { ring.remove(); }, 750);
+
+ var colors = [P.c1, P.c2, P.c3, P.c4, "#ffffff"];
+ var parts = [];
+ var N = 110;
+ for (var i = 0; i < N; i++) {
+ var a = Math.random() * Math.PI * 2;
+ var sp = 4 + Math.random() * 13;
+ parts.push({
+ x: cx, y: cy,
+ vx: Math.cos(a) * sp,
+ vy: Math.sin(a) * sp - 3,
+ r: 1.5 + Math.random() * 3.2,
+ rot: Math.random() * Math.PI,
+ vr: (Math.random() - 0.5) * 0.3,
+ col: colors[(Math.random() * colors.length) | 0],
+ shape: Math.random() < 0.4 ? 1 : 0,
+ life: 1
+ });
+ }
+
+ var t0 = performance.now();
+ function frame(now) {
+ var dt = Math.min((now - t0) / 1000, 2);
+ ctx.clearRect(0, 0, innerWidth, innerHeight);
+ var alive = false;
+ for (var i = 0; i < parts.length; i++) {
+ var p = parts[i];
+ p.x += p.vx; p.y += p.vy;
+ p.vx *= 0.965; p.vy = p.vy * 0.965 + 0.32;
+ p.rot += p.vr;
+ p.life -= 0.012 + Math.random() * 0.006;
+ if (p.life <= 0) continue;
+ alive = true;
+ ctx.globalAlpha = Math.max(p.life, 0);
+ ctx.fillStyle = p.col;
+ if (p.shape === 1) {
+ ctx.save();
+ ctx.translate(p.x, p.y);
+ ctx.rotate(p.rot);
+ ctx.fillRect(-p.r, -p.r * 0.55, p.r * 2, p.r * 1.1);
+ ctx.restore();
+ } else {
+ ctx.beginPath();
+ ctx.arc(p.x, p.y, p.r * p.life, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+ if (alive && dt < 2) requestAnimationFrame(frame);
+ else c.remove();
+ }
+ requestAnimationFrame(frame);
+ }
+
+ var toastTimer = null;
+ function successToast(message) {
+ var t = document.getElementById("toast");
+ t.innerHTML = '