Pelagic Sea Angel
Clione limacina pelagic gymnosome sea slug swimming with rhythmic wing-like parapodia flapping and a glowing orange-red visceral nucleus.
60 FPS • Canvas 2D
Click + Drag to interact with field
</>
Full Executable Algorithm Code
134 lines
4873 chars
// 051 - Pelagic Sea Angel (creatures)
// 1:1 Original algorithm engine source
function createSeaAngelPteropod() {
const BODY_RIBBONS = 28;
const WING_FILAMENTS = 24;
return {
setup() {
},
render(context, timeState, params) {
const { ctx, width, height } = context;
const wingSpeed = Number(params.wingSpeed || 1.4);
const wingSpan = Number(params.wingSpan || 1.2);
const t = timeState.time * wingSpeed;
ctx.fillStyle = "#020306";
ctx.fillRect(0, 0, width, height);
const cx = width * 0.5 + Math.sin(t * 0.6) * (width * 0.05);
const cy = height * 0.46 + Math.sin(t * 1.8) * 14;
const angelScale = Math.min(width, height) / 480;
ctx.save();
ctx.translate(cx, cy);
ctx.globalCompositeOperation = "screen";
const baseHue = (195 + Math.sin(t * 0.8) * 20) % 360;
for (let r = 0; r < BODY_RIBBONS; r++) {
const normR = (r + 1) / BODY_RIBBONS;
const curW = 28 * normR * angelScale;
const curH = 115 * normR * angelScale;
ctx.beginPath();
ctx.moveTo(0, -65 * normR * angelScale);
ctx.quadraticCurveTo(curW, -25 * normR * angelScale, curW * 0.7, 30 * normR * angelScale);
ctx.quadraticCurveTo(curW * 0.3, 75 * normR * angelScale, 0, curH);
ctx.quadraticCurveTo(-curW * 0.3, 75 * normR * angelScale, -curW * 0.7, 30 * normR * angelScale);
ctx.quadraticCurveTo(-curW, -25 * normR * angelScale, 0, -65 * normR * angelScale);
ctx.closePath();
const bodyHue = (baseHue + normR * 25) % 360;
ctx.strokeStyle = hsla(bodyHue, 95, 72, 0.06 + normR * 0.28);
ctx.lineWidth = normR > 0.85 ? 1.6 : 0.8;
ctx.stroke();
}
for (let visc = 1; visc <= 6; visc++) {
const vR = (3 + visc * 3) * angelScale;
ctx.beginPath();
ctx.ellipse(0, 6 * angelScale, vR, vR * 1.3, 0, 0, Math.PI * 2);
ctx.strokeStyle = hsla(15 + visc * 8, 100, 68, 0.6 - visc * 0.08);
ctx.lineWidth = 1.6;
ctx.stroke();
}
ctx.fillStyle = "#fee2e2";
ctx.shadowColor = "#f97316";
ctx.shadowBlur = 16;
ctx.beginPath();
ctx.arc(0, 6 * angelScale, 3 * angelScale, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
const wingWave = Math.sin(t * 3.5);
const wingCurl = Math.cos(t * 3.5);
for (let s = -1; s <= 1; s += 2) {
for (let wf = 0; wf < WING_FILAMENTS; wf++) {
const normW = wf / (WING_FILAMENTS - 1);
const rootX = s * (8 + normW * 14) * angelScale;
const rootY = (-20 + normW * 12) * angelScale;
const curSpan = (70 + normW * 25) * wingSpan * angelScale;
const tipX = rootX + s * curSpan;
const tipY = rootY - (10 + normW * 10) * angelScale + wingWave * (28 * angelScale);
ctx.beginPath();
ctx.moveTo(rootX, rootY);
ctx.bezierCurveTo(
rootX + s * (35 + normW * 15) * angelScale,
rootY - 45 * angelScale + wingCurl * (18 * angelScale),
tipX + s * 15 * angelScale,
tipY - 25 * angelScale,
tipX,
tipY
);
ctx.bezierCurveTo(
tipX - s * 25 * angelScale,
tipY + 45 * angelScale,
rootX + s * 25 * angelScale,
rootY + 25 * angelScale,
rootX,
rootY + 12 * angelScale
);
ctx.closePath();
const wingHue = (baseHue - 15 + normW * 35) % 360;
ctx.strokeStyle = hsla(wingHue, 100, 78, 0.08 + normW * 0.35);
ctx.lineWidth = wf % 4 === 0 ? 1.6 : 0.8;
ctx.stroke();
}
}
ctx.restore();
}
};
}
// Default parameters from content metadata
const defaultParams = [
{
"key": "wingSpeed",
"label": "Parapodia Stroke Rate",
"type": "range",
"min": 0.5,
"max": 2.5,
"step": 0.1,
"defaultValue": 1.4,
"description": "Wing flap swimming frequency"
},
{
"key": "wingSpan",
"label": "Parapodia Wingspan",
"type": "range",
"min": 0.7,
"max": 1.8,
"step": 0.1,
"defaultValue": 1.2,
"description": "Flapping wing amplitude scaling"
}
];
if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['sea-angel-pteropod']) {
const inst = typeof createSeaAngelPteropod === 'function' ? createSeaAngelPteropod() : null;
if (inst && inst.setup) {
inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
}
window.__art_instances['sea-angel-pteropod'] = inst;
}
const instance = window.__art_instances['sea-angel-pteropod'];
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
medium
Analytical Equation
zwing(u,t)=Awsin(ωwt)⋅u+Bwcos(ωwt)⋅u2,Ivisc(r)=I0exp(−2σv2r2)
Click to expand
∑
Pelagic Sea Angel
Full Mathematical System • creatures
100%
Complete System of Equations
[Governing Law][Discrete Progression][Domain & Space][Parameter State]zwing(u,t)=Awsin(ωwt)⋅u+Bwcos(ωwt)⋅u2,Ivisc(r)=I0exp(−2σv2r2)wing=bezierCurve(root,wingCurl⋅18,wingTip+wingWave⋅28),visccore=radialGradient(5,2,22)x∈R2,t∈R+,ω∈[0,2π]λwingSpeed=1.4(Parapodia Stroke Rate),λwingSpan=1.2(Parapodia Wingspan)
zwing(u,t)=Awsin(ωwt)⋅u+Bwcos(ωwt)⋅u2,Ivisc(r)=I0exp(−2σv2r2)
Computational Implementation (JavaScript Engine Equivalent)
wing = bezierCurve(root, wingCurl*18, wingTip + wingWave*28), visc_core = radialGradient(5, 2, 22) Compact Formula
wing = bezierCurve(root, wingCurl*18, wingTip + wingWave*28), visc_core = radialGradient(5, 2, 22) Mathematical Tags
#sea-angel
#clione
#pteropod
#creatures
#wings
#pelagic
#translucent
Author: Math Art Core Target: 60 FPS
Press ESC or F to exit