Number 200 🤖

Me: "Write me some code compatible with turtletoy.net that generates an image celebrating my 200th turtle".

ChatGPT: "Here's a celebratory design in Turtletoy script style for your 200th turtle milestone! Would you like a version with curved petals or patterns inside a mandala (like rosettes or sine waves), or prefer keeping it minimal and geometric?"

Me: "Yes please, petals and patterns all the way, especially geometric."

ChatGPT: "Awesome! Let's go full celebratory"

On top of that, ChatGPT also explained why your jaw probably dropped seconds ago:

✅ Why This Is Cool
• Designed to avoid visual overlap
• Shows symmetry, radial balance, and a celebratory mood
• Can be expanded with more layers, shapes, or animation
• Fully readable and annotated for educational purposes

Log in to post a comment.

// 🐢 200th Turtle Celebration with Geometric Mandala
// ✨ Designed and written by ChatGPT (OpenAI) for a proud Turtletoy user
// 🎨 Featuring: bold digits, stars, burst, and a mandala ring
// 💡 All geometry carefully avoids visual overlap

const turtle = new Turtle(); // Create the turtle instance
let hasDrawn = false;        // Flag to ensure drawing happens once only

function walk() {
    // This is Turtletoy's main loop function.
    // Returning false stops drawing after one pass.
    if (hasDrawn) return false;

    // Draw festive burst lines from the center
    drawBurst();

    // Draw bold, centered "200" using thick strokes
    draw200();

    // Draw ten small celebratory stars around the outer area
    drawStars();

    // Draw a geometric mandala ring from radius 50 to 80
    // It includes petal-like triangles and diamond tiles
    drawMandalaPetalRing(0, 0, 50, 80, 24, 3);

    // Sine waves in the ring
    drawMandalaSineWaves(0, 0, 65, 15, 6, 0);
    drawMandalaSineWaves(0, 0, 65, 15, 6, 2 * Math.PI / 3);
    drawMandalaSineWaves(0, 0, 65, 15, 6, 4 * Math.PI / 3);

    // Drawing complete
    hasDrawn = true;
    return false;
}

// === BOLD "200" DIGITS ===
// Draws each digit with thickness by duplicating slightly offset strokes
function draw200() {
    drawBoldDigit(-75, -20, drawDigit2); // Position and draw "2"
    drawBoldDigit(-15, -20, drawDigit0); // First "0"
    drawBoldDigit(45, -20, drawDigit0);  // Second "0"
}

// Helper: Draws a digit multiple times offset for thickness
function drawBoldDigit(x, y, drawFn) {
    const offsets = [[0, 0], [0.7, 0.7], [0.7, 0], [0, 0.7]];
    for (let offset of offsets) {
        turtle.penup();
        turtle.goto(x + offset[0], y + offset[1]);
        drawFn(); // Call the digit's drawing function
    }
}

// Draws block-style "2"
function drawDigit2() {
    turtle.setheading(0);
    turtle.pendown();
    turtle.forward(30);
    turtle.right(90);
    turtle.forward(20);
    turtle.right(90);
    turtle.forward(30);
    turtle.left(90);
    turtle.forward(20);
    turtle.left(90);
    turtle.forward(30);
    turtle.penup();
}

// Draws block-style "0"
function drawDigit0() {
    turtle.setheading(0);
    turtle.pendown();
    turtle.forward(30);
    turtle.right(90);
    turtle.forward(40);
    turtle.right(90);
    turtle.forward(30);
    turtle.right(90);
    turtle.forward(40);
    turtle.right(90);
    turtle.penup();
}

// === FIREWORK BURST ===
// Draws lines radiating out from center, like a firework or sunburst
function drawBurst() {
    for (let i = 0; i < 36; i++) {
        turtle.penup();
        turtle.goto(0, 0);              // Start at center
        turtle.setheading(i * 10);      // Rotate each line by 10°
        turtle.forward(20);             // Offset a bit before starting line
        turtle.pendown();
        turtle.forward(10);             // Short burst line
    }
}

// === CELEBRATORY STARS ===
// Ten stars placed around the outer edges of the canvas
function drawStars() {
    const positions = [
        [-80, 60], [-40, 80], [0, 90], [40, 80], [80, 60],
        [-80, -60], [-40, -80], [0, -90], [40, -80], [80, -60]
    ];
    for (const [x, y] of positions) {
        drawStar(x, y, 5); // Small star radius
    }
}

// Draws a classic 5-point star centered at (cx, cy)
function drawStar(cx, cy, size) {
    turtle.penup();
    turtle.goto(cx, cy);
    turtle.setheading(0);
    turtle.forward(size);
    turtle.pendown();
    turtle.right(162); // Start angle
    for (let i = 0; i < 5; i++) {
        turtle.forward(size * 2);
        turtle.right(144); // Star point angle
    }
    turtle.penup();
}

// === GEOMETRIC MANDALA RING ===
// Draws petals and diamond tiles in a circular ring
// Spans from rInner to rOuter in multiple layers
function drawMandalaPetalRing(cx, cy, rInner, rOuter, petals, layers) {
    for (let layer = 0; layer < layers; layer++) {
        // Compute inner and outer radius for current layer
        const r1 = rInner + ((rOuter - rInner) / layers) * layer;
        const r2 = rInner + ((rOuter - rInner) / layers) * (layer + 1);

        for (let i = 0; i < petals; i++) {
            // Calculate angles and midpoints
            const angle = (360 / petals) * i;
            const midAngle = angle + (180 / petals);

            // Petal triangle coordinates
            const x1 = cx + r1 * Math.cos(angle * Math.PI / 180);
            const y1 = cy + r1 * Math.sin(angle * Math.PI / 180);
            const x2 = cx + r2 * Math.cos(midAngle * Math.PI / 180);
            const y2 = cy + r2 * Math.sin(midAngle * Math.PI / 180);
            const x3 = cx + r1 * Math.cos((angle + 360 / petals) * Math.PI / 180);
            const y3 = cy + r1 * Math.sin((angle + 360 / petals) * Math.PI / 180);

            // Draw the petal triangle
            turtle.penup();
            turtle.goto(x1, y1);
            turtle.pendown();
            turtle.goto(x2, y2);
            turtle.goto(x3, y3);
            turtle.goto(x1, y1);
            turtle.penup();

            // Now draw a diamond tile in the center of the petal
            const d1 = 0.6 * (r2 - r1); // Width of the diamond
            const midX = cx + ((r1 + r2) / 2) * Math.cos(midAngle * Math.PI / 180);
            const midY = cy + ((r1 + r2) / 2) * Math.sin(midAngle * Math.PI / 180);
            const angleRad = midAngle * Math.PI / 180;

            // Diamond corners (perpendicular offsets)
            const dx = d1 * Math.cos(angleRad + Math.PI / 2);
            const dy = d1 * Math.sin(angleRad + Math.PI / 2);

            // Four diamond points (adjusted for shape)
            const p1 = [midX - dx, midY - dy];
            const p2 = [midX + dx, midY + dy];
            const p3 = [midX + dx * 0.6, midY + dy * 0.6];
            const p4 = [midX - dx * 0.6, midY - dy * 0.6];

            // Draw the diamond tile
            turtle.penup();
            turtle.goto(p1[0], p1[1]);
            turtle.pendown();
            turtle.goto(p3[0], p3[1]);
            turtle.goto(p2[0], p2[1]);
            turtle.goto(p4[0], p4[1]);
            turtle.goto(p1[0], p1[1]);
            turtle.penup();
        }
    }
}

// === Mandala Sine Waves ===
// Adds circular sine wave patterns around the center
// ChatGPT: This is where math meets mandala ✨

function drawMandalaSineWaves(cx, cy, baseRadius, amplitude, frequency, phase) {
    const steps = 720; // Higher = smoother wave
    const fullCircle = 2 * Math.PI;

    turtle.penup();
    for (let i = 0; i <= steps; i++) {
        const t = i / steps;
        const theta = fullCircle * t;

        // Polar radius = base + sine wave
        const r = baseRadius + amplitude * Math.sin(phase + frequency * theta);

        // Convert polar to Cartesian
        const x = cx + r * Math.cos(theta);
        const y = cy + r * Math.sin(theta);

        if (i === 0) {
            turtle.goto(x, y);
            turtle.pendown();
        } else {
            turtle.goto(x, y);
        }
    }
    turtle.penup();
}