Sacred Water Lotus Bloom
Multi-tier water lotus blossom featuring translucent gradient petals, mathematical gothic ogee arches, glowing golden seed pods (receptacle), and serene ambient ripples.
60 FPS • Canvas 2D
Click + Drag to interact with field
</>
Full Executable Algorithm Code
167 lines
5690 chars
// 067 - Sacred Water Lotus Bloom (botany)
// 1:1 Original algorithm engine source
function createSacredLotus() {
return {
setup() {
},
render(context, timeState, params) {
const { ctx, width, height } = context;
const petals = Math.max(6, Math.min(20, Math.round(Number(params.petalsPerWhorl ?? 12))));
const whorls = Math.max(2, Math.min(6, Math.round(Number(params.whorlLayers ?? 4))));
const bloomDepth = Number(params.bloomOpenness ?? 1);
const speed = Number(params.breathSpeed ?? 0.4);
const t = timeState.time * speed;
ctx.fillStyle = "#03060a";
ctx.fillRect(0, 0, width, height);
const cx = width * 0.5;
const cy = height * 0.5;
const maxR = Math.min(width, height) * 0.44;
ctx.save();
ctx.translate(cx, cy);
for (let r = 1; r <= 3; r++) {
const rippleR = maxR * (0.85 + 0.15 * r) * (1 + 0.05 * Math.sin(t * 1.5 + r));
ctx.beginPath();
ctx.ellipse(0, 0, rippleR, rippleR * 0.92, t * 0.05, 0, Math.PI * 2);
ctx.strokeStyle = hsla(185, 80, 60, 0.12 - r * 0.02);
ctx.lineWidth = 1.2;
ctx.stroke();
}
for (let w = whorls; w >= 1; w--) {
const wFrac = w / whorls;
const petalLen = maxR * (0.35 + 0.65 * wFrac) * bloomDepth;
const petalWidth = petalLen * (0.42 - wFrac * 0.1);
const whorlOffset = w * Math.PI / petals + Math.sin(t * 0.8 + w) * 0.06;
const baseHue = 330 - (whorls - w) * 14;
for (let p = 0; p < petals; p++) {
const angle = p / petals * Math.PI * 2 + whorlOffset;
ctx.save();
ctx.rotate(angle);
ctx.beginPath();
ctx.moveTo(0, 0);
const c1x = -petalWidth * (0.8 + 0.1 * Math.sin(t * 2 + p));
const c1y = petalLen * 0.45;
const tipX = 0;
const tipY = petalLen;
const c2x = petalWidth * (0.8 + 0.1 * Math.sin(t * 2 + p));
const c2y = petalLen * 0.45;
ctx.bezierCurveTo(c1x, c1y, -petalWidth * 0.3, petalLen * 0.85, tipX, tipY);
ctx.bezierCurveTo(petalWidth * 0.3, petalLen * 0.85, c2x, c2y, 0, 0);
ctx.fillStyle = hsla(baseHue + p % 2 * 8, 85, 65 + (whorls - w) * 6, 0.22);
ctx.fill();
ctx.strokeStyle = hsla(baseHue + 15, 90, 80, 0.65);
ctx.lineWidth = 1.2;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, petalLen * 0.9);
ctx.strokeStyle = hsla(baseHue + 25, 95, 88, 0.4);
ctx.lineWidth = 0.8;
ctx.stroke();
ctx.restore();
}
}
const podR = maxR * 0.15;
const stamens = petals * 3;
for (let s = 0; s < stamens; s++) {
const sAng = s / stamens * Math.PI * 2 + t * 0.15;
const sLen = podR * (1.1 + 0.3 * Math.sin(s * 4 + t * 3));
const px = Math.cos(sAng) * sLen;
const py = Math.sin(sAng) * sLen;
ctx.beginPath();
ctx.moveTo(Math.cos(sAng) * (podR * 0.7), Math.sin(sAng) * (podR * 0.7));
ctx.lineTo(px, py);
ctx.strokeStyle = hsla(45, 95, 75, 0.7);
ctx.lineWidth = 1.2;
ctx.stroke();
ctx.fillStyle = hsla(50, 100, 85, 0.95);
ctx.beginPath();
ctx.arc(px, py, 1.6, 0, Math.PI * 2);
ctx.fill();
}
ctx.beginPath();
ctx.arc(0, 0, podR * 0.75, 0, Math.PI * 2);
ctx.fillStyle = "rgba(234, 179, 8, 0.35)";
ctx.fill();
ctx.strokeStyle = hsla(48, 95, 80, 0.9);
ctx.lineWidth = 1.6;
ctx.stroke();
const seedRings = 2;
for (let sr = 1; sr <= seedRings; sr++) {
const seeds = sr * 6;
const sRadius = sr / (seedRings + 1) * (podR * 0.65);
for (let i = 0; i < seeds; i++) {
const sa = i / seeds * Math.PI * 2 + t * 0.05;
const sx = Math.cos(sa) * sRadius;
const sy = Math.sin(sa) * sRadius;
ctx.fillStyle = hsla(42, 90, 45, 0.9);
ctx.beginPath();
ctx.arc(sx, sy, 2, 0, Math.PI * 2);
ctx.fill();
}
}
ctx.restore();
}
};
}
// Default parameters from content metadata
const defaultParams = [
{
"key": "petalsPerWhorl",
"label": "Petals Per Whorl",
"type": "range",
"min": 6,
"max": 18,
"step": 2,
"defaultValue": 12,
"description": "Number of petals in each concentric layer"
},
{
"key": "whorlLayers",
"label": "Layer Count",
"type": "range",
"min": 2,
"max": 5,
"step": 1,
"defaultValue": 4,
"description": "Number of overlapping petal whorls"
},
{
"key": "bloomOpenness",
"label": "Bloom Flare",
"type": "range",
"min": 0.6,
"max": 1.4,
"step": 0.1,
"defaultValue": 1,
"description": "Radial flare opening factor"
},
{
"key": "breathSpeed",
"label": "Breathing Rate",
"type": "range",
"min": 0.2,
"max": 1.5,
"step": 0.1,
"defaultValue": 0.4,
"description": "Organic expansion and ripple pulsation rate"
}
];
if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['sacred-lotus']) {
const inst = typeof createSacredLotus === 'function' ? createSacredLotus() : null;
if (inst && inst.setup) {
inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
}
window.__art_instances['sacred-lotus'] = inst;
}
const instance = window.__art_instances['sacred-lotus'];
if (instance && instance.render) {
instance.render(
{ ctx, width, height, dpr: 1, aspectRatio: width / height },
{ time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
defaultParams
);
} Edit in Interactive Playground
Zero Dependencies • Standalone Canvas 2D
ƒ
Mathematical Formulation
high
Analytical Equation
Bpetal(u)=(1−u)3P0+3(1−u)2uP1+3(1−u)u2P2+u3P3,ϕw=Nwπ
Click to expand
∑
Sacred Water Lotus Bloom
Full Mathematical System • botany
100%
Complete System of Equations
[Governing Law][Discrete Progression][Domain & Space][Parameter State]Bpetal(u)=(1−u)3P0+3(1−u)2uP1+3(1−u)u2P2+u3P3,ϕw=Nwπpetal=cubicBezier(base,ctrl1,tip,ctrl2),whorloffset=w⋅π/Nx∈R2,t∈R+,ω∈[0,2π]λpetalsPerWhorl=12(Petals Per Whorl),λwhorlLayers=4(Layer Count),λbloomOpenness=1(Bloom Flare),λbreathSpeed=0.4(Breathing Rate)
Bpetal(u)=(1−u)3P0+3(1−u)2uP1+3(1−u)u2P2+u3P3,ϕw=Nwπ
Computational Implementation (JavaScript Engine Equivalent)
petal = cubicBezier(base, ctrl1, tip, ctrl2), whorl_offset = w*π/N Compact Formula
petal = cubicBezier(base, ctrl1, tip, ctrl2), whorl_offset = w*π/N Mathematical Tags
#lotus
#flower
#water
#sacred
#botany
#petals
#translucent
#pond
Author: Math Art Core Target: 60 FPS
Press ESC or F to exit