DorfWiki: Testseite222

Testseite222

Home
Neues
TestSeite
DorfTratsch

Suchen
Teilnehmer
Projekte

GartenPlan
DorfWiki
OrdnerProjekte_alt

Dörfer
NeueArbeit
VideoBridge
VillageInnovationTalk

AlleOrdner
AlleSeiten
Hilfe

Einstellungen

SeiteÄndern

Veränderung (letzte Änderung) (keine anderen Diffs, Normalansicht)

Verändert: 1c1,568

Beschreibe hier die neue Seite.

<html>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagozellen Kampf - Statisches Bild</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
max-width: 100%;
max-height: 100vh;
display: block;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<canvas id="scene"></canvas>
<script>
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');

canvas.width = 1600;
canvas.height = 1000;

// Hintergrund - dramatischer Gradient
const bgGradient = ctx.createRadialGradient(500, 700, 0, 800, 500, 1200);
bgGradient.addColorStop(0, '#1e1b4b');
bgGradient.addColorStop(0.5, '#0f172a');
bgGradient.addColorStop(1, '#020617');
ctx.fillStyle = bgGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Nebel/Atmosphäre
ctx.fillStyle = 'rgba(30, 41, 59, 0.3)';
ctx.beginPath();
ctx.ellipse(300, 700, 400, 200, 0, 0, Math.PI * 2);
ctx.fill();

ctx.fillStyle = 'rgba(15, 23, 42, 0.2)';
ctx.beginPath();
ctx.ellipse(400, 600, 500, 250, 0, 0, Math.PI * 2);
ctx.fill();

// === RAUPE - Massiv und bedrohlich ===

function drawCaterpillarSegment(x, y, rx, ry, darkness) {
// Schatten
ctx.save();
ctx.globalAlpha = 0.7;
const shadowGrad = ctx.createRadialGradient(x, y, 0, x + 12, y + 18, rx);
shadowGrad.addColorStop(0, 'rgba(0, 0, 0, 0.9)');
shadowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = shadowGrad;
ctx.beginPath();
ctx.ellipse(x + 12, y + 18, rx, ry, 0, 0, Math.PI * 2);
ctx.fill();
ctx.restore();

// Hauptkörper mit 3D-Effekt
const bodyGrad = ctx.createRadialGradient(
x - rx * 0.35, y - ry * 0.35, 0,
x, y, rx
);
const colors = darkness ?
['#6b7280', '#4b5563', '#374151', '#1f2937'] :
['#78716c', '#57534e', '#44403c', '#292524'];

bodyGrad.addColorStop(0, colors[0]);
bodyGrad.addColorStop(0.4, colors[1]);
bodyGrad.addColorStop(0.7, colors[2]);
bodyGrad.addColorStop(1, colors[3]);

ctx.fillStyle = bodyGrad;
ctx.beginPath();
ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2);
ctx.fill();

// Textur/Falten
ctx.strokeStyle = 'rgba(31, 41, 55, 0.5)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x, y, rx * 0.4, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, rx * 0.6, 0, Math.PI * 2);
ctx.stroke();
}

function drawSpike(x1, y1, x2, y2, width) {
const spikeGrad = ctx.createLinearGradient(x1, y1, x2, y2);
spikeGrad.addColorStop(0, '#991b1b');
spikeGrad.addColorStop(0.5, '#dc2626');
spikeGrad.addColorStop(1, '#ef4444');

ctx.strokeStyle = spikeGrad;
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

// Glühen
ctx.save();
ctx.globalAlpha = 0.4;
ctx.strokeStyle = '#ef4444';
ctx.lineWidth = width + 4;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.restore();
}

// Raupen-Segmente von hinten nach vorne
const segments = [
{x: 380, y: 880, rx: 100, ry: 70},
{x: 320, y: 820, rx: 110, ry: 75},
{x: 270, y: 760, rx: 115, ry: 80},
{x: 230, y: 690, rx: 120, ry: 85},
{x: 210, y: 620, rx: 115, ry: 80},
{x: 205, y: 550, rx: 110, ry: 75},
{x: 215, y: 480, rx: 100, ry: 70},
];

// Bedrohliche rote Aura
const auraGrad = ctx.createRadialGradient(250, 650, 0, 250, 650, 450);
auraGrad.addColorStop(0, 'rgba(220, 38, 38, 0.5)');
auraGrad.addColorStop(0.4, 'rgba(153, 27, 27, 0.3)');
auraGrad.addColorStop(0.7, 'rgba(127, 29, 29, 0.15)');
auraGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = auraGrad;
ctx.fillRect(0, 200, 800, 800);

// Segmente zeichnen
segments.forEach((seg, i) => {
drawCaterpillarSegment(seg.x, seg.y, seg.rx, seg.ry, i % 2 === 0);

// Stacheln an jedem zweiten Segment
if (i % 2 === 0 && i < 6) {
const angles = [0.3, 0.8, 1.3, 1.8, 2.3, 2.8];
angles.forEach(angle => {
const baseX = seg.x + Math.cos(angle) * seg.rx * 0.7;
const baseY = seg.y + Math.sin(angle) * seg.ry * 0.7;
const tipX = seg.x + Math.cos(angle) * (seg.rx + 35);
const tipY = seg.y + Math.sin(angle) * (seg.ry + 35);
drawSpike(baseX, baseY, tipX, tipY, 7);
});
}
});

// KOPF - Der bedrohlichste Teil
const headX = 220;
const headY = 420;

// Kopf-Schatten
ctx.save();
ctx.globalAlpha = 0.8;
const headShadowGrad = ctx.createRadialGradient(headX, headY, 0, headX + 15, headY + 20, 130);
headShadowGrad.addColorStop(0, 'rgba(0, 0, 0, 0.9)');
headShadowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = headShadowGrad;
ctx.beginPath();
ctx.ellipse(headX + 15, headY + 20, 130, 100, 0, 0, Math.PI * 2);
ctx.fill();
ctx.restore();

// Kopf Hauptkörper
const headGrad = ctx.createRadialGradient(
headX - 45, headY - 35, 0,
headX, headY, 130
);
headGrad.addColorStop(0, '#71717a');
headGrad.addColorStop(0.5, '#52525b');
headGrad.addColorStop(0.8, '#27272a');
headGrad.addColorStop(1, '#18181b');

ctx.fillStyle = headGrad;
ctx.beginPath();
ctx.ellipse(headX, headY, 130, 100, 0, 0, Math.PI * 2);
ctx.fill();

// Böse Augen mit intensivem Glühen
function drawEye(x, y, size) {
// Äußeres Glühen
const glowGrad = ctx.createRadialGradient(x, y, 0, x, y, size * 3);
glowGrad.addColorStop(0, 'rgba(239, 68, 68, 0.8)');
glowGrad.addColorStop(0.3, 'rgba(220, 38, 38, 0.5)');
glowGrad.addColorStop(0.6, 'rgba(153, 27, 27, 0.2)');
glowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = glowGrad;
ctx.beginPath();
ctx.arc(x, y, size * 3, 0, Math.PI * 2);
ctx.fill();

// Augapfel
const eyeGrad = ctx.createRadialGradient(x - 3, y - 3, 0, x, y, size);
eyeGrad.addColorStop(0, '#fca5a5');
eyeGrad.addColorStop(0.3, '#ef4444');
eyeGrad.addColorStop(0.6, '#dc2626');
eyeGrad.addColorStop(0.8, '#991b1b');
eyeGrad.addColorStop(1, '#450a0a');

ctx.fillStyle = eyeGrad;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();

// Pupille - intensiv leuchtend
ctx.fillStyle = '#fef2f2';
ctx.beginPath();
ctx.arc(x - 4, y - 4, size * 0.4, 0, Math.PI * 2);
ctx.fill();

ctx.fillStyle = '#dc2626';
ctx.beginPath();
ctx.arc(x, y, size * 0.5, 0, Math.PI * 2);
ctx.fill();
}

drawEye(headX - 45, headY - 18, 18);
drawEye(headX + 45, headY - 22, 18);

// Bedrohlicher Mund
ctx.strokeStyle = '#7f1d1d';
ctx.lineWidth = 8;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(headX - 55, headY + 38);
ctx.quadraticCurveTo(headX, headY + 50, headX + 55, headY + 38);
ctx.stroke();

ctx.strokeStyle = '#450a0a';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(headX - 55, headY + 38);
ctx.quadraticCurveTo(headX, headY + 45, headX + 55, headY + 38);
ctx.stroke();

// Kopf-Stacheln
drawSpike(headX - 80, headY - 30, headX - 120, headY - 60, 8);
drawSpike(headX - 60, headY - 70, headX - 70, headY - 120, 8);
drawSpike(headX + 80, headY - 35, headX + 120, headY - 65, 8);
drawSpike(headX + 60, headY - 75, headX + 70, headY - 125, 8);

// === ENERGIEBLITZE ===
function drawLightning(x1, y1, x2, y2, intensity) {
const steps = 12;
const points = [{x: x1, y: y1}];

for (let i = 1; i < steps; i++) {
const t = i / steps;
points.push({
x: x1 + (x2 - x1) * t + (Math.random() - 0.5) * 60,
y: y1 + (y2 - y1) * t + (Math.random() - 0.5) * 60
});
}
points.push({x: x2, y: y2});

// Glühen
ctx.save();
ctx.shadowBlur = 25;
ctx.shadowColor = '#dc2626';
ctx.strokeStyle = '#ef4444';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.globalAlpha = intensity;

ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();

// Innerer Kern
ctx.shadowBlur = 0;
ctx.strokeStyle = '#fca5a5';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();
ctx.restore();
}

// Mehrere Blitze
drawLightning(220, 420, 450, 650, 0.9);
drawLightning(180, 380, 380, 580, 0.8);
drawLightning(260, 450, 580, 700, 0.7);
drawLightning(200, 400, 720, 520, 0.75);

// === IMAGOZELLEN ===
function drawImagoCell(x, y, size, stage, glow = 1) {
const colorSets = [
{light: '#fef3c7', mid: '#fbbf24', dark: '#f59e0b', darker: '#d97706'},
{light: '#fef08a', mid: '#eab308', dark: '#84cc16', darker: '#65a30d'},
{light: '#d1fae5', mid: '#34d399', dark: '#10b981', darker: '#047857'}
];

const colors = colorSets[stage];

// Leuchten
for (let i = 4; i >= 0; i--) {
const glowGrad = ctx.createRadialGradient(x, y, 0, x, y, size * (1.5 + i * 0.4) * glow);
glowGrad.addColorStop(0, colors.mid + 'DD');
glowGrad.addColorStop(0.3, colors.dark + '88');
glowGrad.addColorStop(0.6, colors.darker + '33');
glowGrad.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = glowGrad;
ctx.beginPath();
ctx.arc(x, y, size * (1.5 + i * 0.4) * glow, 0, Math.PI * 2);
ctx.fill();
}

// Hauptkörper 3D
const cellGrad = ctx.createRadialGradient(
x - size * 0.3, y - size * 0.3, 0,
x, y, size
);
cellGrad.addColorStop(0, colors.light);
cellGrad.addColorStop(0.4, colors.mid);
cellGrad.addColorStop(0.7, colors.dark);
cellGrad.addColorStop(1, colors.darker);

ctx.fillStyle = cellGrad;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();

// Highlight
const highlightGrad = ctx.createRadialGradient(
x - size * 0.4, y - size * 0.4, 0,
x - size * 0.3, y - size * 0.3, size * 0.7
);
highlightGrad.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
highlightGrad.addColorStop(0.7, 'rgba(255, 255, 255, 0.3)');
highlightGrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = highlightGrad;
ctx.beginPath();
ctx.arc(x - size * 0.3, y - size * 0.3, size * 0.7, 0, Math.PI * 2);
ctx.fill();
}

// Zellen-Positionen
const cells = [
// Frontlinie (orange) - unter Beschuss
{x: 450, y: 650, size: 18, stage: 0, glow: 1.2},
{x: 380, y: 580, size: 16, stage: 0, glow: 1.1},
{x: 520, y: 620, size: 17, stage: 0, glow: 1.15},
{x: 580, y: 700, size: 15, stage: 0, glow: 1.1},
{x: 420, y: 720, size: 16, stage: 0, glow: 1.0},

// Mittlere Linie (gelb-grün) - vernetzend
{x: 650, y: 580, size: 20, stage: 1, glow: 1.3},
{x: 720, y: 520, size: 19, stage: 1, glow: 1.25},
{x: 580, y: 500, size: 18, stage: 1, glow: 1.2},
{x: 770, y: 620, size: 21, stage: 1, glow: 1.3},
{x: 690, y: 450, size: 19, stage: 1, glow: 1.25},
{x: 820, y: 560, size: 20, stage: 1, glow: 1.3},

// Hintere Linie (grün) - integriert
{x: 920, y: 420, size: 24, stage: 2, glow: 1.5},
{x: 860, y: 350, size: 23, stage: 2, glow: 1.45},
{x: 1000, y: 480, size: 22, stage: 2, glow: 1.4},
{x: 950, y: 300, size: 25, stage: 2, glow: 1.5},
{x: 1080, y: 400, size: 23, stage: 2, glow: 1.45},
{x: 1020, y: 340, size: 24, stage: 2, glow: 1.5},
{x: 1100, y: 500, size: 22, stage: 2, glow: 1.4},
];

// Verbindungslinien
function drawConnection(x1, y1, x2, y2, stage1, stage2, alpha) {
const lineGrad = ctx.createLinearGradient(x1, y1, x2, y2);

if (stage1 === 0 && stage2 === 0) {
lineGrad.addColorStop(0, '#fbbf24');
lineGrad.addColorStop(1, '#f59e0b');
} else if (stage1 === 2 || stage2 === 2) {
lineGrad.addColorStop(0, '#10b981');
lineGrad.addColorStop(1, '#34d399');
} else {
lineGrad.addColorStop(0, '#eab308');
lineGrad.addColorStop(1, '#84cc16');
}

ctx.save();
ctx.globalAlpha = alpha;
ctx.strokeStyle = lineGrad;
ctx.lineWidth = 3;
ctx.shadowBlur = 8;
ctx.shadowColor = lineGrad;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.restore();
}

// Verbindungen zeichnen
for (let i = 0; i < cells.length; i++) {
for (let j = i + 1; j < cells.length; j++) {
const dist = Math.hypot(cells[i].x - cells[j].x, cells[i].y - cells[j].y);
if (dist < 180) {
const alpha = Math.max(0.2, 1 - dist / 180) * 0.7;
drawConnection(cells[i].x, cells[i].y, cells[j].x, cells[j].y,
cells[i].stage, cells[j].stage, alpha);
}
}
}

// Zellen zeichnen
cells.forEach(cell => {
drawImagoCell(cell.x, cell.y, cell.size, cell.stage, cell.glow);
});

// === SCHMETTERLING ===
const bx = 1320;
const by = 280;

// Magische Aura
const butterflyAura = ctx.createRadialGradient(bx, by, 0, bx, by, 350);
butterflyAura.addColorStop(0, 'rgba(16, 185, 129, 0.5)');
butterflyAura.addColorStop(0.4, 'rgba(52, 211, 153, 0.3)');
butterflyAura.addColorStop(0.7, 'rgba(110, 231, 183, 0.15)');
butterflyAura.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = butterflyAura;
ctx.fillRect(bx - 350, by - 350, 700, 700);

ctx.save();
ctx.translate(bx, by);

// Flügel-Funktion
function drawWing(flip = 1) {
ctx.save();
ctx.scale(flip, 1);

// Oberer Flügel
const wingGrad1 = ctx.createRadialGradient(-50, -60, 0, -100, -100, 180);
wingGrad1.addColorStop(0, '#d1fae5');
wingGrad1.addColorStop(0.2, '#a7f3d0');
wingGrad1.addColorStop(0.4, '#6ee7b7');
wingGrad1.addColorStop(0.6, '#34d399');
wingGrad1.addColorStop(0.8, '#10b981');
wingGrad1.addColorStop(1, '#047857');

ctx.fillStyle = wingGrad1;
ctx.beginPath();
ctx.moveTo(-25, -60);
ctx.bezierCurveTo(-180, -220, -260, -150, -240, -50);
ctx.bezierCurveTo(-210, 10, -140, 30, -75, 5);
ctx.bezierCurveTo(-45, -10, -30, -35, -25, -60);
ctx.closePath();
ctx.fill();

// Schatten auf Flügel
ctx.fillStyle = 'rgba(4, 120, 87, 0.3)';
ctx.beginPath();
ctx.moveTo(-25, -60);
ctx.bezierCurveTo(-100, -150, -180, -120, -170, -50);
ctx.bezierCurveTo(-150, 0, -100, 15, -60, 0);
ctx.closePath();
ctx.fill();

// Muster
ctx.fillStyle = 'rgba(52, 211, 153, 0.7)';
ctx.beginPath();
ctx.arc(-120, -100, 22, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(-160, -75, 16, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(-100, -60, 12, 0, Math.PI * 2);
ctx.fill();

// Unterer Flügel
const wingGrad2 = ctx.createRadialGradient(-40, 40, 0, -80, 80, 150);
wingGrad2.addColorStop(0, '#d1fae5');
wingGrad2.addColorStop(0.3, '#6ee7b7');
wingGrad2.addColorStop(0.6, '#34d399');
wingGrad2.addColorStop(0.8, '#10b981');
wingGrad2.addColorStop(1, '#047857');

ctx.fillStyle = wingGrad2;
ctx.beginPath();
ctx.moveTo(-25, 50);
ctx.bezierCurveTo(-120, 120, -170, 170, -145, 190);
ctx.bezierCurveTo(-110, 200, -75, 175, -50, 140);
ctx.bezierCurveTo(-30, 105, -25, 75, -25, 50);
ctx.closePath();
ctx.fill();

// Muster unterer Flügel
ctx.fillStyle = 'rgba(52, 211, 153, 0.6)';
ctx.beginPath();
ctx.arc(-80, 100, 14, 0, Math.PI * 2);
ctx.fill();

ctx.restore();
}

// Beide Flügelpaare
drawWing(-1); // Links
drawWing(1); // Rechts

// Körper
const bodyGrad = ctx.createLinearGradient(-5, -90, 5, 90);
bodyGrad.addColorStop(0, '#065f46');
bodyGrad.addColorStop(0.3, '#047857');
bodyGrad.addColorStop(0.6, '#059669');
bodyGrad.addColorStop(1, '#022c22');

ctx.fillStyle = bodyGrad;
ctx.beginPath();
ctx.ellipse(0, 0, 22, 85, 0, 0, Math.PI * 2);
ctx.fill();

// Körper-Highlight
ctx.fillStyle = 'rgba(110, 231, 183, 0.4)';
ctx.beginPath();
ctx.ellipse(-7, -10, 8, 50, 0, 0, Math.PI * 2);
ctx.fill();

// Fühler
ctx.strokeStyle = '#065f46';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-10, -85);
ctx.quadraticCurveTo(-25, -115, -30, -140);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, -85);
ctx.quadraticCurveTo(25, -115, 30, -140);
ctx.stroke();

// Fühler-Enden
const antennaGrad = ctx.createRadialGradient(-30, -140, 0, -30, -140, 8);
antennaGrad.addColorStop(0, '#6ee7b7');
antennaGrad.addColorStop(0.5, '#10b981');
antennaGrad.addColorStop(1, '#047857');
ctx.fillStyle = antennaGrad;
ctx.beginPath();
ctx.arc(-30, -140, 8, 0, Math.PI * 2);
ctx.fill();

const antennaGrad2 = ctx.createRadialGradient(30, -140, 0, 30, -140, 8);
antennaGrad2.addColorStop(0, '#6ee7b7');
antennaGrad2.addColorStop(0.5, '#10b981');
antennaGrad2.addColorStop(1, '#047857');

</html>

<html>

<!DOCTYPE html> <html lang="de"> <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagozellen Kampf - Statisches Bild</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            max-width: 100%;
            max-height: 100vh;
            display: block;
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
        }
    </style>

</head> <body>

    <canvas id="scene"></canvas>
    <script>
        const canvas = document.getElementById('scene');
        const ctx = canvas.getContext('2d');

        canvas.width = 1600;
        canvas.height = 1000;

        // Hintergrund - dramatischer Gradient
        const bgGradient = ctx.createRadialGradient(500, 700, 0, 800, 500, 1200);
        bgGradient.addColorStop(0, '#1e1b4b');
        bgGradient.addColorStop(0.5, '#0f172a');
        bgGradient.addColorStop(1, '#020617');
        ctx.fillStyle = bgGradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Nebel/Atmosphäre
        ctx.fillStyle = 'rgba(30, 41, 59, 0.3)';
        ctx.beginPath();
        ctx.ellipse(300, 700, 400, 200, 0, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = 'rgba(15, 23, 42, 0.2)';
        ctx.beginPath();
        ctx.ellipse(400, 600, 500, 250, 0, 0, Math.PI * 2);
        ctx.fill();

        // === RAUPE - Massiv und bedrohlich ===

        function drawCaterpillarSegment(x, y, rx, ry, darkness) {
            // Schatten
            ctx.save();
            ctx.globalAlpha = 0.7;
            const shadowGrad = ctx.createRadialGradient(x, y, 0, x + 12, y + 18, rx);
            shadowGrad.addColorStop(0, 'rgba(0, 0, 0, 0.9)');
            shadowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
            ctx.fillStyle = shadowGrad;
            ctx.beginPath();
            ctx.ellipse(x + 12, y + 18, rx, ry, 0, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();

            // Hauptkörper mit 3D-Effekt
            const bodyGrad = ctx.createRadialGradient(
                x - rx * 0.35, y - ry * 0.35, 0,
                x, y, rx
            );
            const colors = darkness ? 
                ['#6b7280', '#4b5563', '#374151', '#1f2937'] :
                ['#78716c', '#57534e', '#44403c', '#292524'];

            bodyGrad.addColorStop(0, colors[0]);
            bodyGrad.addColorStop(0.4, colors[1]);
            bodyGrad.addColorStop(0.7, colors[2]);
            bodyGrad.addColorStop(1, colors[3]);

            ctx.fillStyle = bodyGrad;
            ctx.beginPath();
            ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2);
            ctx.fill();

            // Textur/Falten
            ctx.strokeStyle = 'rgba(31, 41, 55, 0.5)';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x, y, rx * 0.4, 0, Math.PI * 2);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(x, y, rx * 0.6, 0, Math.PI * 2);
            ctx.stroke();
        }

        function drawSpike(x1, y1, x2, y2, width) {
            const spikeGrad = ctx.createLinearGradient(x1, y1, x2, y2);
            spikeGrad.addColorStop(0, '#991b1b');
            spikeGrad.addColorStop(0.5, '#dc2626');
            spikeGrad.addColorStop(1, '#ef4444');

            ctx.strokeStyle = spikeGrad;
            ctx.lineWidth = width;
            ctx.lineCap = 'round';
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Glühen
            ctx.save();
            ctx.globalAlpha = 0.4;
            ctx.strokeStyle = '#ef4444';
            ctx.lineWidth = width + 4;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.restore();
        }

        // Raupen-Segmente von hinten nach vorne
        const segments = [
            {x: 380, y: 880, rx: 100, ry: 70},
            {x: 320, y: 820, rx: 110, ry: 75},
            {x: 270, y: 760, rx: 115, ry: 80},
            {x: 230, y: 690, rx: 120, ry: 85},
            {x: 210, y: 620, rx: 115, ry: 80},
            {x: 205, y: 550, rx: 110, ry: 75},
            {x: 215, y: 480, rx: 100, ry: 70},
        ];

        // Bedrohliche rote Aura
        const auraGrad = ctx.createRadialGradient(250, 650, 0, 250, 650, 450);
        auraGrad.addColorStop(0, 'rgba(220, 38, 38, 0.5)');
        auraGrad.addColorStop(0.4, 'rgba(153, 27, 27, 0.3)');
        auraGrad.addColorStop(0.7, 'rgba(127, 29, 29, 0.15)');
        auraGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
        ctx.fillStyle = auraGrad;
        ctx.fillRect(0, 200, 800, 800);

        // Segmente zeichnen
        segments.forEach((seg, i) => {
            drawCaterpillarSegment(seg.x, seg.y, seg.rx, seg.ry, i % 2 === 0);

            // Stacheln an jedem zweiten Segment
            if (i % 2 === 0 && i < 6) {
                const angles = [0.3, 0.8, 1.3, 1.8, 2.3, 2.8];
                angles.forEach(angle => {
                    const baseX = seg.x + Math.cos(angle) * seg.rx * 0.7;
                    const baseY = seg.y + Math.sin(angle) * seg.ry * 0.7;
                    const tipX = seg.x + Math.cos(angle) * (seg.rx + 35);
                    const tipY = seg.y + Math.sin(angle) * (seg.ry + 35);
                    drawSpike(baseX, baseY, tipX, tipY, 7);
                });
            }
        });

        // KOPF - Der bedrohlichste Teil
        const headX = 220;
        const headY = 420;

        // Kopf-Schatten
        ctx.save();
        ctx.globalAlpha = 0.8;
        const headShadowGrad = ctx.createRadialGradient(headX, headY, 0, headX + 15, headY + 20, 130);
        headShadowGrad.addColorStop(0, 'rgba(0, 0, 0, 0.9)');
        headShadowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
        ctx.fillStyle = headShadowGrad;
        ctx.beginPath();
        ctx.ellipse(headX + 15, headY + 20, 130, 100, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();

        // Kopf Hauptkörper
        const headGrad = ctx.createRadialGradient(
            headX - 45, headY - 35, 0,
            headX, headY, 130
        );
        headGrad.addColorStop(0, '#71717a');
        headGrad.addColorStop(0.5, '#52525b');
        headGrad.addColorStop(0.8, '#27272a');
        headGrad.addColorStop(1, '#18181b');

        ctx.fillStyle = headGrad;
        ctx.beginPath();
        ctx.ellipse(headX, headY, 130, 100, 0, 0, Math.PI * 2);
        ctx.fill();

        // Böse Augen mit intensivem Glühen
        function drawEye(x, y, size) {
            // Äußeres Glühen
            const glowGrad = ctx.createRadialGradient(x, y, 0, x, y, size * 3);
            glowGrad.addColorStop(0, 'rgba(239, 68, 68, 0.8)');
            glowGrad.addColorStop(0.3, 'rgba(220, 38, 38, 0.5)');
            glowGrad.addColorStop(0.6, 'rgba(153, 27, 27, 0.2)');
            glowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
            ctx.fillStyle = glowGrad;
            ctx.beginPath();
            ctx.arc(x, y, size * 3, 0, Math.PI * 2);
            ctx.fill();

            // Augapfel
            const eyeGrad = ctx.createRadialGradient(x - 3, y - 3, 0, x, y, size);
            eyeGrad.addColorStop(0, '#fca5a5');
            eyeGrad.addColorStop(0.3, '#ef4444');
            eyeGrad.addColorStop(0.6, '#dc2626');
            eyeGrad.addColorStop(0.8, '#991b1b');
            eyeGrad.addColorStop(1, '#450a0a');

            ctx.fillStyle = eyeGrad;
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.fill();

            // Pupille - intensiv leuchtend
            ctx.fillStyle = '#fef2f2';
            ctx.beginPath();
            ctx.arc(x - 4, y - 4, size * 0.4, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = '#dc2626';
            ctx.beginPath();
            ctx.arc(x, y, size * 0.5, 0, Math.PI * 2);
            ctx.fill();
        }

        drawEye(headX - 45, headY - 18, 18);
        drawEye(headX + 45, headY - 22, 18);

        // Bedrohlicher Mund
        ctx.strokeStyle = '#7f1d1d';
        ctx.lineWidth = 8;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(headX - 55, headY + 38);
        ctx.quadraticCurveTo(headX, headY + 50, headX + 55, headY + 38);
        ctx.stroke();

        ctx.strokeStyle = '#450a0a';
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(headX - 55, headY + 38);
        ctx.quadraticCurveTo(headX, headY + 45, headX + 55, headY + 38);
        ctx.stroke();

        // Kopf-Stacheln
        drawSpike(headX - 80, headY - 30, headX - 120, headY - 60, 8);
        drawSpike(headX - 60, headY - 70, headX - 70, headY - 120, 8);
        drawSpike(headX + 80, headY - 35, headX + 120, headY - 65, 8);
        drawSpike(headX + 60, headY - 75, headX + 70, headY - 125, 8);

        // === ENERGIEBLITZE ===
        function drawLightning(x1, y1, x2, y2, intensity) {
            const steps = 12;
            const points = [{x: x1, y: y1}];

            for (let i = 1; i < steps; i++) {
                const t = i / steps;
                points.push({
                    x: x1 + (x2 - x1) * t + (Math.random() - 0.5) * 60,
                    y: y1 + (y2 - y1) * t + (Math.random() - 0.5) * 60
                });
            }
            points.push({x: x2, y: y2});

            // Glühen
            ctx.save();
            ctx.shadowBlur = 25;
            ctx.shadowColor = '#dc2626';
            ctx.strokeStyle = '#ef4444';
            ctx.lineWidth = 6;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            ctx.globalAlpha = intensity;

            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(points[i].x, points[i].y);
            }
            ctx.stroke();

            // Innerer Kern
            ctx.shadowBlur = 0;
            ctx.strokeStyle = '#fca5a5';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(points[i].x, points[i].y);
            }
            ctx.stroke();
            ctx.restore();
        }

        // Mehrere Blitze
        drawLightning(220, 420, 450, 650, 0.9);
        drawLightning(180, 380, 380, 580, 0.8);
        drawLightning(260, 450, 580, 700, 0.7);
        drawLightning(200, 400, 720, 520, 0.75);

        // === IMAGOZELLEN ===
        function drawImagoCell(x, y, size, stage, glow = 1) {
            const colorSets = [
                {light: '#fef3c7', mid: '#fbbf24', dark: '#f59e0b', darker: '#d97706'},
                {light: '#fef08a', mid: '#eab308', dark: '#84cc16', darker: '#65a30d'},
                {light: '#d1fae5', mid: '#34d399', dark: '#10b981', darker: '#047857'}
            ];

            const colors = colorSets[stage];

            // Leuchten
            for (let i = 4; i >= 0; i--) {
                const glowGrad = ctx.createRadialGradient(x, y, 0, x, y, size * (1.5 + i * 0.4) * glow);
                glowGrad.addColorStop(0, colors.mid + 'DD');
                glowGrad.addColorStop(0.3, colors.dark + '88');
                glowGrad.addColorStop(0.6, colors.darker + '33');
                glowGrad.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.fillStyle = glowGrad;
                ctx.beginPath();
                ctx.arc(x, y, size * (1.5 + i * 0.4) * glow, 0, Math.PI * 2);
                ctx.fill();
            }

            // Hauptkörper 3D
            const cellGrad = ctx.createRadialGradient(
                x - size * 0.3, y - size * 0.3, 0,
                x, y, size
            );
            cellGrad.addColorStop(0, colors.light);
            cellGrad.addColorStop(0.4, colors.mid);
            cellGrad.addColorStop(0.7, colors.dark);
            cellGrad.addColorStop(1, colors.darker);

            ctx.fillStyle = cellGrad;
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.fill();

            // Highlight
            const highlightGrad = ctx.createRadialGradient(
                x - size * 0.4, y - size * 0.4, 0,
                x - size * 0.3, y - size * 0.3, size * 0.7
            );
            highlightGrad.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
            highlightGrad.addColorStop(0.7, 'rgba(255, 255, 255, 0.3)');
            highlightGrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
            ctx.fillStyle = highlightGrad;
            ctx.beginPath();
            ctx.arc(x - size * 0.3, y - size * 0.3, size * 0.7, 0, Math.PI * 2);
            ctx.fill();
        }

        // Zellen-Positionen
        const cells = [
            // Frontlinie (orange) - unter Beschuss
            {x: 450, y: 650, size: 18, stage: 0, glow: 1.2},
            {x: 380, y: 580, size: 16, stage: 0, glow: 1.1},
            {x: 520, y: 620, size: 17, stage: 0, glow: 1.15},
            {x: 580, y: 700, size: 15, stage: 0, glow: 1.1},
            {x: 420, y: 720, size: 16, stage: 0, glow: 1.0},

            // Mittlere Linie (gelb-grün) - vernetzend
            {x: 650, y: 580, size: 20, stage: 1, glow: 1.3},
            {x: 720, y: 520, size: 19, stage: 1, glow: 1.25},
            {x: 580, y: 500, size: 18, stage: 1, glow: 1.2},
            {x: 770, y: 620, size: 21, stage: 1, glow: 1.3},
            {x: 690, y: 450, size: 19, stage: 1, glow: 1.25},
            {x: 820, y: 560, size: 20, stage: 1, glow: 1.3},

            // Hintere Linie (grün) - integriert
            {x: 920, y: 420, size: 24, stage: 2, glow: 1.5},
            {x: 860, y: 350, size: 23, stage: 2, glow: 1.45},
            {x: 1000, y: 480, size: 22, stage: 2, glow: 1.4},
            {x: 950, y: 300, size: 25, stage: 2, glow: 1.5},
            {x: 1080, y: 400, size: 23, stage: 2, glow: 1.45},
            {x: 1020, y: 340, size: 24, stage: 2, glow: 1.5},
            {x: 1100, y: 500, size: 22, stage: 2, glow: 1.4},
        ];

        // Verbindungslinien
        function drawConnection(x1, y1, x2, y2, stage1, stage2, alpha) {
            const lineGrad = ctx.createLinearGradient(x1, y1, x2, y2);

            if (stage1 === 0 && stage2 === 0) {
                lineGrad.addColorStop(0, '#fbbf24');
                lineGrad.addColorStop(1, '#f59e0b');
            } else if (stage1 === 2 || stage2 === 2) {
                lineGrad.addColorStop(0, '#10b981');
                lineGrad.addColorStop(1, '#34d399');
            } else {
                lineGrad.addColorStop(0, '#eab308');
                lineGrad.addColorStop(1, '#84cc16');
            }

            ctx.save();
            ctx.globalAlpha = alpha;
            ctx.strokeStyle = lineGrad;
            ctx.lineWidth = 3;
            ctx.shadowBlur = 8;
            ctx.shadowColor = lineGrad;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.restore();
        }

        // Verbindungen zeichnen
        for (let i = 0; i < cells.length; i++) {
            for (let j = i + 1; j < cells.length; j++) {
                const dist = Math.hypot(cells[i].x - cells[j].x, cells[i].y - cells[j].y);
                if (dist < 180) {
                    const alpha = Math.max(0.2, 1 - dist / 180) * 0.7;
                    drawConnection(cells[i].x, cells[i].y, cells[j].x, cells[j].y, 
                                 cells[i].stage, cells[j].stage, alpha);
                }
            }
        }

        // Zellen zeichnen
        cells.forEach(cell => {
            drawImagoCell(cell.x, cell.y, cell.size, cell.stage, cell.glow);
        });

        // === SCHMETTERLING ===
        const bx = 1320;
        const by = 280;

        // Magische Aura
        const butterflyAura = ctx.createRadialGradient(bx, by, 0, bx, by, 350);
        butterflyAura.addColorStop(0, 'rgba(16, 185, 129, 0.5)');
        butterflyAura.addColorStop(0.4, 'rgba(52, 211, 153, 0.3)');
        butterflyAura.addColorStop(0.7, 'rgba(110, 231, 183, 0.15)');
        butterflyAura.addColorStop(1, 'rgba(0, 0, 0, 0)');
        ctx.fillStyle = butterflyAura;
        ctx.fillRect(bx - 350, by - 350, 700, 700);

        ctx.save();
        ctx.translate(bx, by);

        // Flügel-Funktion
        function drawWing(flip = 1) {
            ctx.save();
            ctx.scale(flip, 1);

            // Oberer Flügel
            const wingGrad1 = ctx.createRadialGradient(-50, -60, 0, -100, -100, 180);
            wingGrad1.addColorStop(0, '#d1fae5');
            wingGrad1.addColorStop(0.2, '#a7f3d0');
            wingGrad1.addColorStop(0.4, '#6ee7b7');
            wingGrad1.addColorStop(0.6, '#34d399');
            wingGrad1.addColorStop(0.8, '#10b981');
            wingGrad1.addColorStop(1, '#047857');

            ctx.fillStyle = wingGrad1;
            ctx.beginPath();
            ctx.moveTo(-25, -60);
            ctx.bezierCurveTo(-180, -220, -260, -150, -240, -50);
            ctx.bezierCurveTo(-210, 10, -140, 30, -75, 5);
            ctx.bezierCurveTo(-45, -10, -30, -35, -25, -60);
            ctx.closePath();
            ctx.fill();

            // Schatten auf Flügel
            ctx.fillStyle = 'rgba(4, 120, 87, 0.3)';
            ctx.beginPath();
            ctx.moveTo(-25, -60);
            ctx.bezierCurveTo(-100, -150, -180, -120, -170, -50);
            ctx.bezierCurveTo(-150, 0, -100, 15, -60, 0);
            ctx.closePath();
            ctx.fill();

            // Muster
            ctx.fillStyle = 'rgba(52, 211, 153, 0.7)';
            ctx.beginPath();
            ctx.arc(-120, -100, 22, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(-160, -75, 16, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(-100, -60, 12, 0, Math.PI * 2);
            ctx.fill();

            // Unterer Flügel
            const wingGrad2 = ctx.createRadialGradient(-40, 40, 0, -80, 80, 150);
            wingGrad2.addColorStop(0, '#d1fae5');
            wingGrad2.addColorStop(0.3, '#6ee7b7');
            wingGrad2.addColorStop(0.6, '#34d399');
            wingGrad2.addColorStop(0.8, '#10b981');
            wingGrad2.addColorStop(1, '#047857');

            ctx.fillStyle = wingGrad2;
            ctx.beginPath();
            ctx.moveTo(-25, 50);
            ctx.bezierCurveTo(-120, 120, -170, 170, -145, 190);
            ctx.bezierCurveTo(-110, 200, -75, 175, -50, 140);
            ctx.bezierCurveTo(-30, 105, -25, 75, -25, 50);
            ctx.closePath();
            ctx.fill();

            // Muster unterer Flügel
            ctx.fillStyle = 'rgba(52, 211, 153, 0.6)';
            ctx.beginPath();
            ctx.arc(-80, 100, 14, 0, Math.PI * 2);
            ctx.fill();

            ctx.restore();
        }

        // Beide Flügelpaare
        drawWing(-1); // Links
        drawWing(1);  // Rechts

        // Körper
        const bodyGrad = ctx.createLinearGradient(-5, -90, 5, 90);
        bodyGrad.addColorStop(0, '#065f46');
        bodyGrad.addColorStop(0.3, '#047857');
        bodyGrad.addColorStop(0.6, '#059669');
        bodyGrad.addColorStop(1, '#022c22');

        ctx.fillStyle = bodyGrad;
        ctx.beginPath();
        ctx.ellipse(0, 0, 22, 85, 0, 0, Math.PI * 2);
        ctx.fill();

        // Körper-Highlight
        ctx.fillStyle = 'rgba(110, 231, 183, 0.4)';
        ctx.beginPath();
        ctx.ellipse(-7, -10, 8, 50, 0, 0, Math.PI * 2);
        ctx.fill();

        // Fühler
        ctx.strokeStyle = '#065f46';
        ctx.lineWidth = 6;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(-10, -85);
        ctx.quadraticCurveTo(-25, -115, -30, -140);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(10, -85);
        ctx.quadraticCurveTo(25, -115, 30, -140);
        ctx.stroke();

        // Fühler-Enden
        const antennaGrad = ctx.createRadialGradient(-30, -140, 0, -30, -140, 8);
        antennaGrad.addColorStop(0, '#6ee7b7');
        antennaGrad.addColorStop(0.5, '#10b981');
        antennaGrad.addColorStop(1, '#047857');
        ctx.fillStyle = antennaGrad;
        ctx.beginPath();
        ctx.arc(-30, -140, 8, 0, Math.PI * 2);
        ctx.fill();

        const antennaGrad2 = ctx.createRadialGradient(30, -140, 0, 30, -140, 8);
        antennaGrad2.addColorStop(0, '#6ee7b7');
        antennaGrad2.addColorStop(0.5, '#10b981');
        antennaGrad2.addColorStop(1, '#047857');

</html>