Die Garten
Inspired by Aleksandra Jovanić and Zancan's art style
Log in to post a comment.
// ── how many flowers and how big ──
const numFlowers = 12; // min=1, max=100, step=1
const minSize = 20; // min=1, max=100, step=1
const maxSize = 70; // min=5, max=250, step=1
const spacing = 100; // min=-200, max=200, step=5
const numPetals = 6; // min=2, max=150, step=1
const stemLength = 50; // min=0, max=150, step=2
const wobble = 5; // min=0, max=17, step=1
Canvas.setpenopacity(-0.6);
const turtle = new Turtle();
// ── simple random number helper ──
let seed = 42;
function random() {
seed = (seed * 16807) % 2147483647;
return (seed - 1) / 2147483646; // returns 0 to 1
}
function randomBetween(min, max) {
return min + random() * (max - min);
}
// ── draw a stem straight down from (x, y) ──
function drawStem(x, y) {
turtle.penup();
turtle.goto(x, y);
turtle.pendown();
for (let i = 1; i <= 12; i++) {
turtle.goto(
x + (random() - 0.5) * wobble, // ← jiggle
y + stemLength * (i / 12)
);
}
}
// ── draw one petal pointing in a given angle ──
function drawPetal(x, y, angle, size) {
const petalLength = size;
const petalWidth = size * 0.25;
const pts = 20;
turtle.penup();
turtle.goto(x, y);
turtle.pendown();
// left edge: from base to tip
for (let i = 0; i <= pts; i++) {
const t = i / pts;
const along = petalLength * t; // how far along the petal
const across = petalWidth * Math.sin(t * Math.PI); // how wide at this point
turtle.goto(
x + Math.cos(angle) * along - Math.sin(angle) * across,
y + Math.sin(angle) * along + Math.cos(angle) * across
);
}
// right edge: from tip back to base
for (let i = pts; i >= 0; i--) {
const t = i / pts;
const along = petalLength * t;
const across = petalWidth * Math.sin(t * Math.PI);
turtle.goto(
x + Math.cos(angle) * along + Math.sin(angle) * across,
y + Math.sin(angle) * along - Math.cos(angle) * across
);
}
}
// ── draw a wobbly circle (like a contour line) ──
function drawWobblyCircle(x, y, radius, phase) {
const pts = 36;
turtle.penup();
turtle.goto(x + radius, y);
turtle.pendown();
for (let i = 1; i <= pts; i++) {
const angle = (i / pts) * Math.PI * 2;
// add wobble using sine waves
const r = radius
+ Math.sin(angle * 2 + phase) * wobble * 0.6
+ Math.sin(angle * 3 + phase) * wobble * 0.4;
turtle.goto(x + Math.cos(angle) * r, y + Math.sin(angle) * r);
}
}
// ── draw one complete flower ──
function drawFlower(x, y, size) {
// 1. stem
drawStem(x, y);
// 2. petals — evenly spaced around the center
for (let i = 0; i < numPetals; i++) {
const angle = (i / numPetals) * Math.PI * 2; // spread around full circle
drawPetal(x, y, angle, size);
}
// 3. two wobbly rings at the center (like Zancan's contour style)
drawWobblyCircle(x, y, size * 0.15, 0);
drawWobblyCircle(x, y, size * 0.30, 1.5);
}
// ── place all flowers on a loose grid ──
const cols = Math.ceil(Math.sqrt(numFlowers)); // how many columns
for (let i = 0; i < numFlowers; i++) {
const col = i % cols;
const row = Math.floor(i / cols);
// grid position, then nudge randomly so it's not too rigid
const x = (col - cols / 2) * spacing + randomBetween(-10, 10);
const y = (row - cols / 2) * spacing + randomBetween(-10, 10);
// random size for each flower
const size = randomBetween(minSize, maxSize);
drawFlower(x, y, size);
}