/* tulip.jsx — lifelike vector tulips + bouquet builder
Layered tepals (back + front cup), gradient volume, sheen, crease, veins.
Animation only ever changes group transforms via --grow / --open (60fps).
Exposes refs so the rAF loop in app.jsx can scrub per frame. */
// a cupped tulip tepal: base at (0,0), tip up, widest mid, softly pointed top
const TEPAL = "M0,0 C -15,-9 -23,-42 -20,-84 C -18,-107 -8,-120 0,-123 C 8,-120 18,-107 20,-84 C 23,-42 15,-9 0,0 Z";
const LEAF_PATH = "M0,0 C -30,-30 -38,-112 -10,-168 C -3,-150 2,-150 1,-110 C 6,-60 4,-26 0,0 Z";
// layers: back peeking tepals (drawn first), then front cup (drawn last)
const BACK_PETALS = [ { a0: -10, da: -9 }, { a0: 0, da: 0 }, { a0: 10, da: 9 } ];
const FRONT_PETALS = [ { a0: -4, da: -18, sheen: true, vein: true },
{ a0: 4, da: 18, sheen: true, vein: true },
{ a0: 0, da: 0, sheen: true, vein: true, center: true } ];
const CREASE = { rose: "rgba(70,12,38,0.34)", blush: "rgba(80,20,52,0.30)",
gold: "rgba(120,70,12,0.26)", cream: "rgba(150,110,40,0.22)",
red: "rgba(70,10,12,0.36)" };
function mulberry(seed) {
return function () {
let t = (seed += 0x6d2b79f5);
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
function FlowerDefs() {
const grad = (id, c0, c1, c2, c3) => (
);
return (
{grad("g-rose", "#f9aec5", "#ec5d86", "#c83567", "#8c1e45")}
{grad("g-blush", "#fdd2e1", "#f28fb0", "#d9628f", "#ab3c69")}
{grad("g-gold", "#fbe7a2", "#f1c455", "#d99e2d", "#a3661a")}
{grad("g-cream", "#fffaf0", "#fbeac6", "#eed399", "#cba85f")}
{grad("g-red", "#f4796a", "#dd3a33", "#b21f22", "#771215")}
);
}
// ---- florist wrap: tissue cone behind + folded cuff & satin bow in front ----
const CINCH_X = 280, CINCH_Y = 806;
function fanPath(spread, topY) {
const cx = CINCH_X, cy = CINCH_Y;
return `M${cx},${cy} `
+ `C ${cx - spread * 0.45},${cy - (cy - topY) * 0.5} ${cx - spread * 0.85},${topY + 44} ${cx - spread},${topY} `
+ `C ${cx - spread * 0.4},${topY + 20} ${cx + spread * 0.4},${topY + 20} ${cx + spread},${topY} `
+ `C ${cx + spread * 0.85},${topY + 44} ${cx + spread * 0.45},${cy - (cy - topY) * 0.5} ${cx},${cy} Z`;
}
function WrapBack() {
return (
{/* fold creases */}
);
}
function Bow() {
const x = CINCH_X, y = 742;
return (
{/* tails */}
{/* loops */}
{/* loop shading */}
{/* knot */}
);
}
function WrapFront() {
const x = CINCH_X;
return (
{/* folded cuff in front of the stems, narrowing to a point */}
{/* cuff fold lines */}
{/* top folded-over highlight edge */}
);
}
function Petal({ p, variety }) {
const crease = CREASE[variety] || CREASE.rose;
return (
{/* center crease shadow */}
{p.vein && (
)}
{p.sheen && (
)}
);
}
function Flower({ variety, scale, rand }) {
const mk = (defs) => defs.map((d) => ({
...d,
sx: (rand() * 2 - 1) * 96,
sy: (rand() * 2 - 1) * 64 - 26,
}));
const back = mk(BACK_PETALS);
const front = mk(FRONT_PETALS);
return (
{back.map((p, i) => )}
{front.map((p, i) => )}
);
}
function Tulip({ cfg, registerRef }) {
const growRef = React.useRef(null);
const swayRef = React.useRef(null);
React.useEffect(() => {
const petalsEl = swayRef.current ? swayRef.current.querySelector(".petals") : null;
registerRef({ growEl: growRef.current, petalsEl, cfg });
}, []);
const L = cfg.len;
return (
{/* stem with curve + highlight */}
{/* leaves */}
{/* flower head */}
);
}
function buildConfigs(count, seed) {
const rand = mulberry(seed || 7);
const VARIETIES = ["rose", "blush", "gold", "rose", "cream", "blush", "gold", "rose", "blush"];
const baseY = 818;
const cx = 280;
const cfgs = [];
for (let i = 0; i < count; i++) {
const frac = count > 1 ? i / (count - 1) : 0.5;
const centerness = 1 - Math.abs(frac - 0.5) * 2;
const depth = (i % 2 === 0) ? 1 : 0; // alternate front/back for fullness
const angle = (frac - 0.5) * 58 + (rand() * 2 - 1) * 4;
const len = 300 + centerness * 150 + (rand() * 2 - 1) * 24 - depth * 24;
const bx = cx + (frac - 0.5) * 36 + (rand() * 2 - 1) * 5;
const gStart = rand() * 0.34;
cfgs.push({
angle, len, bx, baseY, depth,
dim: depth ? 0.82 : 1,
bend: (rand() * 2 - 1) * 14,
variety: VARIETIES[i % VARIETIES.length],
headScale: (0.74 + centerness * 0.26) * (depth ? 0.9 : 1),
stemW: 7 + centerness * 1.8,
leafScale: 0.92 + centerness * 0.3,
swayAmp: 0.9 + rand() * 1.0,
swayDur: 4.4 + rand() * 2.6,
swayDelay: -rand() * 3,
gStart, gSpan: 0.5,
oStart: gStart + 0.34, oSpan: 0.44,
rand: mulberry((seed || 7) * 131 + i * 17),
});
}
// draw back-depth tulips first so front ones overlap them
cfgs.sort((a, b) => b.depth - a.depth);
return cfgs;
}
function Bouquet({ count, seed, registerRef }) {
const cfgs = React.useMemo(() => buildConfigs(count, seed), [count, seed]);
return (
);
}
Object.assign(window, { Bouquet, FlowerDefs });