← back to Damask Kaleidoscope
Richer damask motif: baseline ogee curl + counter-scroll + fuller leaves
05dd868a533a2508aa6436a1bc0aa733b2521db0 · 2026-07-25 00:37:38 -0700 · Steve Abrams
Files touched
Diff
commit 05dd868a533a2508aa6436a1bc0aa733b2521db0
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 00:37:38 2026 -0700
Richer damask motif: baseline ogee curl + counter-scroll + fuller leaves
---
index.html | 56 ++++++++++++++++++++++++++++++++++++--------------------
1 file changed, 36 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index f6f7feb..3661481 100644
--- a/index.html
+++ b/index.html
@@ -184,30 +184,44 @@
g.setTransform(1,0,0,1,0,0);
}
- // one ornamental "arm": an ogee vine sweeping outward with leaves, buds and gilt dots
+ // one ornamental "arm": a baseline ogee (S-curve) vine + counter-scroll, strung
+ // with damask leaves, buds and gilt dots. Curvy even at rest so it always reads
+ // as ornament, not spokes; morphs & opens up with time + pointer warp (amp).
function drawFlourish(g, rs, t, pal, amp, seed) {
const ph = seed * 1.7;
- const sway = Math.sin(t*0.8 + ph) * (0.28 + amp*0.5);
- const reach = 0.94;
+ const sway = Math.sin(t*0.8 + ph) * (0.18 + amp*0.5);
+ const breathe = 0.9 + 0.1*Math.sin(t*1.1 + ph);
- // the sweeping ogee stem
+ // Baseline ogee: an intrinsic S-curl that sweeps out and hooks back — the
+ // signature damask ogee — independent of sway so it's ornate with no input.
const p0 = { x: 0, y: 0 };
- const p1 = { x: rs*0.30*Math.cos(sway), y: -rs*0.30 };
- const p2 = { x: rs*(0.58+0.05*Math.sin(t+ph)), y: -rs*0.34 - rs*0.18*sway };
- const p3 = { x: rs*reach*Math.cos(0.32 + sway*0.4), y: -rs*reach*Math.sin(0.9 + sway*0.2) };
+ const p1 = { x: rs*(0.34 + 0.06*sway), y: -rs*0.10 }; // curl out low
+ const p2 = { x: rs*(0.20 - 0.10*sway), y: -rs*(0.52*breathe) }; // sweep up & back in
+ const p3 = { x: rs*(0.60 + 0.08*Math.sin(t*0.7+ph)),
+ y: -rs*(0.90*breathe) }; // hook to the tip
- // gilt stem with soft outer glow then bright core
- g.lineCap = "round";
+ // gilt stem: soft outer glow pass, then a bright core pass
+ g.lineCap = "round"; g.lineJoin = "round";
for (let pass=0; pass<2; pass++) {
g.beginPath();
g.moveTo(p0.x,p0.y);
g.bezierCurveTo(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y);
- if (pass===0){ g.strokeStyle = rgbaOf(pal.gold,0.10); g.lineWidth = rs*0.055; }
- else { g.strokeStyle = rgbaOf(pal.gold,0.55); g.lineWidth = rs*0.018; }
+ if (pass===0){ g.strokeStyle = rgbaOf(pal.gold,0.14); g.lineWidth = rs*0.060; }
+ else { g.strokeStyle = rgbaOf(pal.gold,0.62); g.lineWidth = rs*0.020; }
g.stroke();
}
- // leaves / buds strung along the stem
+ // counter-scroll: a smaller curl branching the other way for density
+ const c0 = bez(p0,p1,p2,p3,0.42);
+ const c1 = { x: c0.x - rs*(0.22+0.05*sway), y: c0.y - rs*0.06 };
+ const c2 = { x: c0.x - rs*0.10, y: c0.y - rs*0.30*breathe };
+ const c3 = { x: c0.x + rs*0.06, y: c0.y - rs*0.40*breathe };
+ g.beginPath();
+ g.moveTo(c0.x,c0.y);
+ g.bezierCurveTo(c1.x,c1.y,c2.x,c2.y,c3.x,c3.y);
+ g.strokeStyle = rgbaOf(pal.gold,0.4); g.lineWidth = rs*0.013; g.stroke();
+
+ // leaves / buds strung along the main stem
const LEAVES = 5;
for (let i=1;i<=LEAVES;i++){
const u = i/(LEAVES+0.5);
@@ -215,20 +229,22 @@
const tang = bezTan(p0,p1,p2,p3,u);
const ang = Math.atan2(tang.y, tang.x);
const side = (i%2===0)?1:-1;
- const scale = rs*(0.16*(1-u*0.45)) * (0.85+0.3*Math.sin(t*1.3+ph+i));
- drawLeaf(g, b.x, b.y, ang + side*(1.15+0.25*Math.sin(t+i)), scale, side, pal, amp);
+ const scale = rs*(0.20*(1-u*0.4)) * (0.9+0.25*Math.sin(t*1.3+ph+i));
+ drawLeaf(g, b.x, b.y, ang + side*(1.2+0.2*Math.sin(t+i)), scale, side, pal, amp);
}
+ // a couple of leaves on the counter-scroll tip
+ drawLeaf(g, c3.x, c3.y, Math.atan2(c3.y-c2.y, c3.x-c2.x)-0.6, rs*0.14*breathe, -1, pal, amp);
- // a blossom teardrop at the tip
- drawLeaf(g, p3.x, p3.y, Math.atan2(p3.y,p3.x), rs*0.13*(0.9+0.2*Math.sin(t*1.6+ph)), 1, pal, amp, true);
+ // blossom teardrop at the tip
+ drawLeaf(g, p3.x, p3.y, Math.atan2(p3.y,p3.x), rs*0.15*(0.9+0.2*Math.sin(t*1.6+ph)), 1, pal, amp, true);
- // gilt punctuation dots
+ // gilt punctuation dots along the stem
for (let i=0;i<4;i++){
- const u = 0.2 + i*0.2;
+ const u = 0.18 + i*0.2;
const b = bez(p0,p1,p2,p3,u);
- const dr = rs*0.012*(1.4+Math.sin(t*2+i+ph));
+ const dr = rs*0.013*(1.4+Math.sin(t*2+i+ph));
g.beginPath();
- g.fillStyle = rgbaOf(pal.accent, 0.5);
+ g.fillStyle = rgbaOf(pal.accent, 0.55);
g.arc(b.x,b.y,Math.max(dr,0.5),0,Math.PI*2); g.fill();
}
}
← 15752e5 Damask Kaleidoscope: rebuild Gemma3 artifact into a true wed
·
back to Damask Kaleidoscope
·
chore: remove dead rgba() helper, stamp v1.0.1 (session clos ff920e1 →