Create

Sketch 2026-03-22 16:02

This sketch creates a romantic love counter that displays how long a relationship has lasted in days, hours, minutes, and seconds, set against a beautiful field of 50 procedurally generated sunflowers. Each sunflower is drawn with realistic petals, curved stems, leaves with veins, and a center using the golden angle spiral pattern found in nature.

Open in Editor Remix View in Gallery

🧪 Try This!

Experiment with the code by making these changes:

  1. Change the relationship start date — Edit the relationship duration to match real dates—change 128 to the actual number of days you want to celebrate
  2. Make the background a sunset pink — Change the field color from green to a warm romantic pink by adjusting RGB values
  3. Double the sunflower count — Fill the field with twice as many flowers by increasing the numSunflowers constant
  4. Make the timer box fully opaque — Remove the transparency from the counter box background by changing the alpha value from 220 to 255
  5. Translate the text to English — Change the Spanish greeting to English so the counter reads 'In love for' instead of 'Te amo desde hace'
  6. Make petals longer and more dramatic — Increase petal length variation by adjusting the range in the Sunflower constructor to create more exaggerated flowers
Prefer the full editor? Open it there →

📖 About This Sketch

This sketch combines a relationship timer with a field of beautifully rendered sunflowers. The counter displays the exact relationship duration since a specific date (128 days and 10 hours ago), showing days, hours, minutes, and seconds that update in real time. The sunflowers are drawn using advanced p5.js techniques: bezier curves for organic shapes, the golden angle spiral (137.5°) for the flower center florets, trigonometry for petal rotation, and color gradients for depth. The entire canvas is responsive—when you resize your browser window, the flowers regenerate to fit the new space.

The code is organized into a setup() function that initializes colors and generates the sunflower field, a draw() function that updates the timer and renders everything each frame, a Sunflower class that defines how each flower is constructed and drawn, and helper functions for window resizing and sunflower generation. By reading it, you will learn how to use classes to manage complex objects, how the golden angle creates natural-looking spiral patterns, how bezier curves create organic curved shapes, how push/pop preserves drawing state during transformations, and how Date.now() powers real-time countdowns.

⚙️ How It Works

  1. When the sketch loads, setup() defines a color palette for petals, stems, leaves, and the background, then calculates a target timestamp by subtracting 128 days and 10 hours from the current time. It generates 50 Sunflower objects with random positions in the bottom half of the screen and responsive sizes based on window width.
  2. Every frame, draw() clears the canvas with a light green background, then loops through all sunflowers and calls their display() method to render each one.
  3. The timer portion calculates the difference between the current time and the target timestamp in milliseconds, then converts it to days, hours, minutes, and seconds using division and the modulo operator (%).
  4. The time values are formatted into a two-line Spanish string ('Te amo desde hace' + the numerical breakdown) and displayed in a cream-colored rounded box with a subtle border, centered near the top of the canvas.
  5. Each Sunflower's display() method uses push() to save the drawing state, then translates to the flower's position and draws: a curved stem using bezier(), two organic leaves with veins using bezierVertex(), 45 petals arranged in a circle using rotation and bezier curves, and finally a flower center using the golden angle spiral pattern where small circles are placed at angles of 137.5° increments at distances calculated with the square root function.
  6. When the window is resized, windowResized() calls resizeCanvas() to fit the new dimensions and regenerates all sunflowers so they reposition and rescale for the new canvas size.

🎓 Concepts You'll Learn

Classes and object-oriented designBezier curves and organic shapesGolden angle (phyllotaxis) spiral patternsTrigonometry and rotationPush/pop state managementDate and time calculationResponsive canvas designColor theory and gradients

📝 Code Breakdown

setup()

setup() runs once when the sketch starts. Use it to create your canvas, initialize variables, set up colors, and call any functions that prepare your scene. Everything here happens before draw() ever runs.

function setup() {
  pixelDensity(2);
  createCanvas(windowWidth, windowHeight);
  
  petalColor1 = color(255, 200, 0);
  petalColor2 = color(255, 170, 0);
  centerColor1 = color(120, 60, 10);
  centerColor2 = color(180, 100, 30);
  stemColor = color(50, 160, 50);
  leafColor = color(70, 180, 70);
  backgroundColor = color(220, 255, 220);

  targetTimestamp = Date.now() - (128 * 24 * 60 * 60 * 1000) - (10 * 60 * 60 * 1000);

  generateSunflowers();

  textAlign(CENTER, CENTER);
  textSize(width * 0.035);
  fill(0);
  textFont('Arial');
}
Line-by-line explanation (7 lines)

🔧 Subcomponents:

calculation Color Palette Definition petalColor1 = color(255, 200, 0);

Sets up all the colors used throughout the sketch for petals, stems, leaves, and background in one place

calculation Target Timestamp Calculation targetTimestamp = Date.now() - (128 * 24 * 60 * 60 * 1000) - (10 * 60 * 60 * 1000);

Calculates the relationship start time by subtracting days and hours from the current moment in milliseconds

calculation Text Formatting Setup textSize(width * 0.035);

Makes the timer text responsive by scaling it relative to window width instead of using a fixed pixel size

pixelDensity(2);
Doubles the pixel density for higher resolution on devices with high DPI screens like phones and modern monitors
createCanvas(windowWidth, windowHeight);
Creates a canvas that fills the entire browser window, using the window's current width and height in pixels
petalColor1 = color(255, 200, 0);
Creates a bright yellow color (255 red, 200 green, 0 blue in RGB) and stores it for drawing flower petals
targetTimestamp = Date.now() - (128 * 24 * 60 * 60 * 1000) - (10 * 60 * 60 * 1000);
Gets the current time in milliseconds, then subtracts 128 days (converted to milliseconds) and 10 hours to set the relationship start point
generateSunflowers();
Calls the helper function to create 50 Sunflower objects with random positions and sizes, filling the array
textAlign(CENTER, CENTER);
Centers all future text both horizontally and vertically around the coordinates you give it
textSize(width * 0.035);
Sets the text size to 3.5% of the window width, so it scales responsively when the window resizes

draw()

draw() is where the magic happens—it runs 60 times per second by default. This function updates the timer each frame and renders all your sunflowers. Every variable that changes over time gets recalculated here, which is why the counter updates smoothly.

function draw() {
  background(backgroundColor);

  for (let sunflower of sunflowers) {
    sunflower.display();
  }

  const currentTimestamp = Date.now();
  const diff = currentTimestamp - targetTimestamp;

  let seconds = floor(diff / 1000);
  let minutes = floor(seconds / 60);
  let hours = floor(minutes / 60);
  let days = floor(hours / 24);

  seconds %= 60;
  minutes %= 60;
  hours %= 24;

  const line1 = "Te amo desde hace";
  const line2 = `${days} días, ${hours} horas, ${minutes} minutos y ${seconds} segundos`;
  const timeString = line1 + "\n" + line2;

  const boxPadding = width * 0.02;
  const textHeightForOneLine = textSize();
  const lineHeightFactor = 1.2;
  const textHeightCalculated = textHeightForOneLine + textHeightForOneLine * lineHeightFactor;

  const textWidthLine1 = textWidth(line1);
  const textWidthLine2 = textWidth(line2);
  const textWidthCalculated = max(textWidthLine1, textWidthLine2);

  const boxWidth = textWidthCalculated + boxPadding * 2;
  const boxHeight = textHeightCalculated + boxPadding * 2;
  const boxX = width / 2;
  const boxY = height * 0.15;

  noStroke();
  fill(255, 255, 220, 220);
  rectMode(CENTER);
  rect(boxX, boxY, boxWidth, boxHeight, 15);

  stroke(100);
  strokeWeight(2);
  noFill();
  rect(boxX, boxY, boxWidth, boxHeight, 15);

  noStroke();
  fill(0);
  text(timeString, boxX, boxY);
}
Line-by-line explanation (11 lines)

🔧 Subcomponents:

for-loop Sunflower Rendering Loop for (let sunflower of sunflowers) {

Iterates through all 50 sunflowers and calls their display() method to draw each one

calculation Milliseconds to Time Units Conversion let seconds = floor(diff / 1000);

Converts the millisecond difference into four separate time units (days, hours, minutes, seconds) using division and the modulo operator

calculation Counter Box Sizing const boxWidth = textWidthCalculated + boxPadding * 2;

Calculates the box dimensions by measuring the text width and adding padding, ensuring the box always fits the text inside it

calculation Counter Box Rendering rect(boxX, boxY, boxWidth, boxHeight, 15);

Draws the background and border rectangles with rounded corners (15 pixel radius) that display the timer

background(backgroundColor);
Clears the entire canvas each frame with the light green color, preventing previous frames from showing as trails
for (let sunflower of sunflowers) {
Starts a loop that runs 50 times, once for each Sunflower object stored in the sunflowers array
sunflower.display();
Calls the display() method on each sunflower, which handles all the drawing code for that flower
const currentTimestamp = Date.now();
Gets the current time in milliseconds since January 1, 1970—this updates every single frame
const diff = currentTimestamp - targetTimestamp;
Calculates how many milliseconds have passed since the relationship start date by subtracting the target from the current time
let seconds = floor(diff / 1000);
Converts milliseconds to total seconds by dividing by 1000 and rounding down to a whole number using floor()
seconds %= 60;
Uses the modulo operator (%) to get only the remainder when total seconds is divided by 60—this gives seconds 0-59
const line2 = `${days} días, ${hours} horas, ${minutes} minutos y ${seconds} segundos`;
Uses a template string (backticks with ${}) to embed the four time variables into a Spanish sentence
const textWidthCalculated = max(textWidthLine1, textWidthLine2);
Finds which of the two text lines is longer by comparing their widths, so the box will be wide enough for both lines
fill(255, 255, 220, 220);
Sets the fill color to cream (255 red, 255 green, 220 blue) with 220 alpha (transparency) for the counter box background
text(timeString, boxX, boxY);
Draws the two-line time string centered at the box position using the text formatting options set in setup()

windowResized()

windowResized() is a special p5.js function that p5 calls automatically whenever the browser window is resized. Without it, your canvas would stay the same size or look distorted. This function is crucial for making responsive sketches that work on any screen size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  textSize(width * 0.035);
  generateSunflowers();
}
Line-by-line explanation (3 lines)
resizeCanvas(windowWidth, windowHeight);
Adjusts the canvas size to match the new window dimensions when the user resizes their browser
textSize(width * 0.035);
Recalculates the text size based on the new width so the timer text stays proportionally sized
generateSunflowers();
Regenerates all 50 sunflowers with new random positions and sizes appropriate for the new canvas dimensions

generateSunflowers()

This function creates all the Sunflower objects that will be drawn. It's called in setup() to create the initial field, and again in windowResized() to redistribute flowers when the screen changes size. Separating this into its own function keeps your code organized and reusable.

function generateSunflowers() {
  sunflowers = [];
  for (let i = 0; i < numSunflowers; i++) {
    let x = random(width);
    let y = random(height * 0.5, height);
    let size = random(width * 0.07, width * 0.18);
    sunflowers.push(new Sunflower(x, y, size));
  }
}
Line-by-line explanation (6 lines)

🔧 Subcomponents:

calculation Array Reset sunflowers = [];

Clears the sunflowers array so old flowers don't accumulate when this function is called multiple times

for-loop Sunflower Creation Loop for (let i = 0; i < numSunflowers; i++) {

Loops 50 times to create 50 new Sunflower objects with randomized positions and sizes

calculation Add to Array sunflowers.push(new Sunflower(x, y, size));

Creates a new Sunflower object with the random x, y, and size values, then adds it to the sunflowers array

sunflowers = [];
Creates an empty array, clearing any sunflowers that existed before (important when the window resizes)
for (let i = 0; i < numSunflowers; i++) {
Loops exactly 50 times (numSunflowers = 50), creating a new sunflower on each iteration
let x = random(width);
Picks a random x position anywhere horizontally across the canvas width
let y = random(height * 0.5, height);
Picks a random y position in the bottom half of the canvas (from 50% down to 100%), keeping flowers mostly in the foreground
let size = random(width * 0.07, width * 0.18);
Picks a random size for each flower between 7% and 18% of the window width, so flowers vary in scale
sunflowers.push(new Sunflower(x, y, size));
Creates a new Sunflower object using the random x, y, and size values, and adds it to the sunflowers array using push()

Sunflower class

The Sunflower class is the heart of this sketch. It demonstrates how to organize complex drawing code into a reusable object: the constructor stores initial properties, and the display() method handles all the drawing. By using push() and pop(), each sunflower's transformations don't affect others. The petals use rotation and bezier curves for organic shapes, while the center uses the golden angle spiral (phyllotaxis) pattern found in real sunflowers. This is an excellent example of how math and nature combine in creative coding.

class Sunflower {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.petalLength = random(this.size * 0.4, this.size * 0.6);
    this.petalWidth = random(this.size * 0.1, this.size * 0.15);
    this.numPetals = 45;
  }

  display() {
    push();
    translate(this.x, this.y);

    // Stem
    stroke(stemColor);
    strokeWeight(this.size * 0.04);
    noFill();
    bezier(0, 0,
           this.size * 0.1, this.size * 0.5,
           -this.size * 0.1, this.size * 1.0,
           0, this.size * 1.5);

    // Left leaf
    noStroke();
    fill(leafColor);
    beginShape();
    vertex(0, this.size * 0.6);
    bezierVertex(-this.size * 0.3, this.size * 0.3,
                 -this.size * 0.6, this.size * 0.5,
                 -this.size * 0.5, this.size * 1.0);
    bezierVertex(-this.size * 0.2, this.size * 1.3,
                 -this.size * 0.1, this.size * 1.2,
                 0, this.size * 1.2);
    endShape(CLOSE);
    stroke(stemColor);
    strokeWeight(1);
    line(-this.size * 0.2, this.size * 0.7, -this.size * 0.5, this.size * 1.0);
    line(-this.size * 0.1, this.size * 0.9, -this.size * 0.4, this.size * 1.2);

    // Right leaf
    noStroke();
    fill(leafColor);
    beginShape();
    vertex(0, this.size * 0.8);
    bezierVertex(this.size * 0.3, this.size * 0.5,
                 this.size * 0.6, this.size * 0.7,
                 this.size * 0.5, this.size * 1.2);
    bezierVertex(this.size * 0.2, this.size * 1.5,
                 this.size * 0.1, this.size * 1.4,
                 0, this.size * 1.4);
    endShape(CLOSE);
    stroke(stemColor);
    strokeWeight(1);
    line(this.size * 0.2, this.size * 0.9, this.size * 0.5, this.size * 1.2);
    line(this.size * 0.1, this.size * 1.1, this.size * 0.4, this.size * 1.4);

    // Petals
    noStroke();
    let angleStep = TWO_PI / this.numPetals;
    
    for (let i = 0; i < this.numPetals; i++) {
      rotate(angleStep);
      
      let currentPetalLength = this.petalLength * random(0.95, 1.05);
      let currentPetalWidth = this.petalWidth * random(0.9, 1.1);

      noStroke();
      fill(200, 160, 0, 150);
      ellipse(0, currentPetalLength / 2, currentPetalWidth * 1.1, currentPetalLength * 1.1);

      if (i % 2 === 0) {
        fill(petalColor1);
      } else {
        fill(petalColor2);
      }
      
      stroke(200, 160, 0);
      strokeWeight(0.5);
      
      beginShape();
      vertex(0, 0);
      bezierVertex(-currentPetalWidth * 0.3, currentPetalLength * 0.2,
                   -currentPetalWidth * 0.5, currentPetalLength * 0.4,
                   0, currentPetalLength);
      bezierVertex(currentPetalWidth * 0.5, currentPetalLength * 0.4,
                   currentPetalWidth * 0.3, currentPetalLength * 0.2,
                   0, 0);
      endShape(CLOSE);
    }

    // Center
    noStroke();
    const c = this.size * 0.005;
    const totalFlorets = 400;
    
    for (let i = 0; i < totalFlorets; i++) {
      let angle = i * 137.5;
      let r = c * sqrt(i);
      let floretX = r * cos(angle);
      let floretY = r * sin(angle);
      
      if (i % 2 === 0) {
        fill(centerColor1);
      } else {
        fill(centerColor2);
      }
      
      let floretSize = this.size * 0.025 * (1 + random(-0.1, 0.1));
      ellipse(floretX, floretY, floretSize);
    }

    fill(centerColor1.levels[0] - 20, centerColor1.levels[1] - 20, centerColor1.levels[2] - 20);
    ellipse(0, 0, this.size * 0.15);

    pop();
  }
}
Line-by-line explanation (21 lines)

🔧 Subcomponents:

calculation Constructor - Initialize Sunflower constructor(x, y, size) {

Stores the sunflower's position (x, y) and size, then generates random petal dimensions for visual variety

calculation Stem with Bezier Curve bezier(0, 0, this.size * 0.1, this.size * 0.5, -this.size * 0.1, this.size * 1.0, 0, this.size * 1.5);

Draws a curved stem using four control points—the curve bends naturally rather than being straight

calculation Leaf Shapes with Bezier Vertices beginShape();

Creates two organic leaf shapes using bezierVertex curves and adds vein lines for detail

for-loop Petal Ring Creation for (let i = 0; i < this.numPetals; i++) {

Loops 45 times to create 45 petals arranged in a circle, rotating each one around the center

for-loop Golden Angle Spiral (Phyllotaxis) Center for (let i = 0; i < totalFlorets; i++) {

Loops 400 times to place small florets in a spiral pattern using the golden angle (137.5°) found in nature

constructor(x, y, size) {
The constructor is called when you create a new Sunflower with 'new Sunflower(x, y, size)'—it receives and stores the position and size
this.x = x;
Stores the x position as a property of this sunflower object so the display() method can access it later
this.petalLength = random(this.size * 0.4, this.size * 0.6);
Gives each sunflower slightly different petal lengths (40-60% of its size) for natural variation between flowers
push();
Saves the current drawing state (position, rotation, fill color, etc.) so changes don't affect other sunflowers
translate(this.x, this.y);
Moves the origin to this sunflower's position, so all drawing happens relative to this flower instead of the canvas corner
bezier(0, 0, this.size * 0.1, this.size * 0.5, -this.size * 0.1, this.size * 1.0, 0, this.size * 1.5);
Draws a curved stem by specifying four points—the first and last are endpoints, the middle two are control points that bend the curve
beginShape();
Starts defining a custom shape that will be drawn with vertex() and bezierVertex() commands
vertex(0, this.size * 0.6);
Adds a point to the shape at the starting position (base of the leaf)
bezierVertex(-this.size * 0.3, this.size * 0.3, -this.size * 0.6, this.size * 0.5, -this.size * 0.5, this.size * 1.0);
Adds a curved section to the shape using three points—the curve flows from the previous vertex to the third point
endShape(CLOSE);
Finishes the shape and connects the last point back to the first point, creating a closed leaf
let angleStep = TWO_PI / this.numPetals;
Divides a full circle (TWO_PI radians = 360°) by the number of petals to find the angle between each petal
for (let i = 0; i < this.numPetals; i++) {
Loops 45 times, once for each petal
rotate(angleStep);
Rotates the drawing context by one petal angle, so the next petal is drawn in the next position around the circle
let currentPetalLength = this.petalLength * random(0.95, 1.05);
Adds tiny random variation to each petal's length (95-105% of the base length) so petals don't look perfectly identical
if (i % 2 === 0) {
Checks if the petal number i is even (i % 2 equals 0)—if true, use one color; if false, use another for alternating colors
let angle = i * 137.5;
Multiplies each floret index by 137.5° (the golden angle, approximately 137.5° = 360° / 1.618), which creates a natural spiral
let r = c * sqrt(i);
Calculates distance from center using square root—this creates the expanding spiral effect where florets spread further out
let floretX = r * cos(angle);
Converts the angle and distance into an x-coordinate using cosine trigonometry
let floretY = r * sin(angle);
Converts the angle and distance into a y-coordinate using sine trigonometry
ellipse(floretX, floretY, floretSize);
Draws a small circle at the calculated (floretX, floretY) position—400 of these create the flower center
pop();
Restores the saved drawing state, undoing all rotations and translations so the next sunflower starts fresh

📦 Key Variables

targetTimestamp number

Stores the relationship start date in milliseconds since 1970—calculated by subtracting 128 days and 10 hours from the current time

let targetTimestamp = Date.now() - (128 * 24 * 60 * 60 * 1000) - (10 * 60 * 60 * 1000);
sunflowers array

Stores all 50 Sunflower objects so they can be looped through and displayed every frame

let sunflowers = [];
numSunflowers number

A constant that defines how many sunflowers are created—used in generateSunflowers() to control the loop count

const numSunflowers = 50;
petalColor1 color

Stores a bright yellow color object used for drawing petals on even-numbered iterations

let petalColor1 = color(255, 200, 0);
petalColor2 color

Stores a deeper yellow color object used for drawing petals on odd-numbered iterations, creating depth

let petalColor2 = color(255, 170, 0);
centerColor1 color

Stores a dark brown color used for alternating florets in the golden angle spiral flower center

let centerColor1 = color(120, 60, 10);
centerColor2 color

Stores a lighter brown/orange color used for the other florets, creating texture variation

let centerColor2 = color(180, 100, 30);
stemColor color

Stores the natural green color used for drawing stems and leaf veins

let stemColor = color(50, 160, 50);
leafColor color

Stores the lighter green color used for filling the leaf shapes

let leafColor = color(70, 180, 70);
backgroundColor color

Stores the light green color that fills the background each frame, creating a field effect

let backgroundColor = color(220, 255, 220);

🔧 Potential Improvements (6)

Here are some ways this code could be enhanced:

PERFORMANCE Sunflower display() - petal and floret loops

Each sunflower draws 45 petals × 50 flowers = 2,250 petal shapes per frame, plus 400 florets × 50 = 20,000 circles per frame. With pixelDensity(2), this is effectively 80,000+ draw calls per frame, which can strain lower-end devices.

💡 Consider reducing numSunflowers from 50 to 25-30, or reducing totalFlorets from 400 to 200-250. Alternatively, cache the sunflower display in a createGraphics() buffer that only regenerates when the window resizes, rather than redrawing every frame.

STYLE Global variable declarations

Color variables (petalColor1, petalColor2, etc.) are declared in global scope but not initialized until setup() runs. This violates the principle that global variables should be constants or have clear initial values.

💡 Move all color definitions into setup() as local variables and pass them to the Sunflower class via constructor, or define them as constants with default values at the top of the file.

BUG Sunflower constructor petalLength/petalWidth calculation

Each Sunflower generates random petalLength and petalWidth on construction, but the 'random' values in the petal drawing loop (line in display()) modify them again. If a user calls generateSunflowers() many times (e.g., rapid window resizes), you lose the original petal dimensions.

💡 Store the random variation in the constructor and reuse those values in display(), or document that petal appearance is intentionally randomized each frame for a 'shimmering' effect.

FEATURE draw() - timer display

The timer always shows a hardcoded start date (128 days ago). For this to be a flexible love counter, users need an easy way to set their own relationship start date without editing code.

💡 Add a simple way to set the relationship date—either via URL parameters, a prompt dialog at startup, or by letting users click the box to change the date. Example: `let customDate = prompt('Enter relationship start date (YYYY-MM-DD):');` if it's your first time opening the sketch.

STYLE draw() - box dimension calculations

The box sizing logic (calculating textHeightCalculated, textWidthCalculated, boxWidth, boxHeight) is complex and spread across 10+ lines. This makes it hard to maintain or adjust.

💡 Extract this into a helper function like `getTimerBoxDimensions(line1, line2)` that returns an object with {width, height, x, y}. This makes the draw() function cleaner and the logic reusable.

BUG draw() - text rendering with line breaks

The timer uses `\n` (newline) in the text string, which p5.js's text() function does support, but the line height calculation uses a fixed lineHeightFactor of 1.2. This may not match actual rendering depending on the font and platform.

💡 Test on multiple devices to confirm the box height matches the text height. If issues appear, use textAlign(CENTER, TOP) and manually space two separate text() calls at different y positions instead of relying on line breaks.

🔄 Code Flow

Code flow showing setup, draw, windowresized, generatesunflowers, sunflower

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> generatesunflowers[generatesunflowers] generatesunflowers --> array-reset[array-reset] array-reset --> sunflower-creation-loop[sunflower-creation-loop] sunflower-creation-loop --> sunflower-push[sunflower-push] sunflower-push --> constructor[constructor] constructor --> sunflower-creation-loop setup --> draw[draw loop] draw --> time-conversion[time-conversion] draw --> target-timestamp[target-timestamp] draw --> text-formatting[text-formatting] draw --> box-dimensions[box-dimensions] draw --> counter-drawing[counter-drawing] draw --> sunflower-loop[sunflower-loop] sunflower-loop --> sunflower[sunflower] sunflower-loop --> petal-loop[petal-loop] petal-loop --> stem-drawing[stem-drawing] petal-loop --> leaf-shapes[leaf-shapes] sunflower-loop --> golden-angle-loop[golden-angle-loop] golden-angle-loop --> sunflower-loop draw --> draw windowresized[windowresized] --> generatesunflowers click setup href "#fn-setup" click draw href "#fn-draw" click windowresized href "#fn-windowresized" click generatesunflowers href "#fn-generatesunflowers" click array-reset href "#sub-array-reset" click sunflower-creation-loop href "#sub-sunflower-creation-loop" click sunflower-push href "#sub-sunflower-push" click constructor href "#sub-constructor" click time-conversion href "#sub-time-conversion" click target-timestamp href "#sub-target-timestamp" click text-formatting href "#sub-text-formatting" click box-dimensions href "#sub-box-dimensions" click counter-drawing href "#sub-counter-drawing" click sunflower-loop href "#sub-sunflower-loop" click petal-loop href "#sub-petal-loop" click stem-drawing href "#sub-stem-drawing" click leaf-shapes href "#sub-leaf-shapes" click golden-angle-loop href "#sub-golden-angle-loop"

❓ Frequently Asked Questions

What visual elements does the p5.js sketch create?

The sketch generates a vibrant field of 50 sunflowers with realistic colors and a light green background, simulating a sunny outdoor environment.

Is there any user interaction available in this sketch?

The current sketch does not include interactive elements; it is primarily a visual display of sunflowers.

What creative coding concepts are showcased in this p5.js sketch?

This sketch demonstrates object-oriented programming by creating sunflower objects, as well as the use of color palettes to enhance the visual appeal.

Explore More

Sketch 2026-03-04 21:03

Similar technique — read the docs

Sketch 2026-03-16 15:35

Similar technique — read the docs

P5.js sketch inspired by: "Vinyl scratch"

Similar technique — read the docs

P5.js sketch inspired by: "Xylophone"

Similar technique — read the docs

p5js.ai

Create your own sketches with AI assistance

Gallery

Browse more creative coding examples

User Guide

Learn how to use p5js.ai

Preview

Sketch 2026-03-22 16:02 - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of Sketch 2026-03-22 16:02 - Code flow showing setup, draw, windowresized, generatesunflowers, sunflower
Code Flow Diagram