The Setup Phase: The Stage is Set

const canvasSize = Math.min(innerWidth, innerHeight); // Dynamic canvas size
let backgroundColor;
const gridSize = 6; // Number of rows and columns in the grid

We start by setting the scene, darling! The canvasSize is dynamically calculated based on the smaller of the browser window’s width or height. Why? Because symmetry, balance, and style are everything. gridSize = 6 sets up a 6x6 grid on this canvas. This is where the action happens.

function setup() {
  createCanvas(canvasSize, canvasSize);
  angleMode(DEGREES);
  noLoop(); // Static artwork

The setup function: Like rolling out the red carpet before the stars arrive! The createCanvas() is like our digital easel, ready for action. We set angleMode(DEGREES) because honestly, who wants to calculate in radians? And noLoop() ensures that the scene stays static—this art doesn’t need to be in motion to knock your socks off.

// Call fxhash preview trigger to generate image preview
$fx.preview();

This one is essential if you're in the fxhash universe! $fx.preview(); is like giving the world a sneak peek. It’s the “coming soon” trailer for our comic book explosion. Without it, this artwork wouldn’t get its shining moment on the fxhash stage.

backgroundColor = color($fx.rand() * 155 + 100, $fx.rand() * 155 + 100, $fx.rand() * 155 + 100);

Setting the stage with a bold, bright, randomly generated background color that screams, "Notice me!" We generate three random values between 100 and 255 for those vibrant red, green, and blue color components. The result? A rich, popping background that sets the tone for the madness to come.

The Draw Phase: Where the Magic Happens

function draw() {
  background(backgroundColor); // Use the random background color

This line makes sure our neon goodness takes center stage. No black canvas here! Just a vibrant pop of color as the backdrop to the explosion of shapes.

let cellSize = canvasSize / gridSize;

With this line, we’re splitting up our canvas into perfect little cells. Think of it as putting on your grid-spandex—everything is divided, evenly spaced, and ready for action.

The Grid of Comic Awesomeness

for (let row = 0; row < gridSize; row++) {
  for (let col = 0; col < gridSize; col++) {
    let x = col * cellSize + cellSize / 2;
    let y = row * cellSize + cellSize / 2;
    drawComicShape(x, y, cellSize);
  }
}

Ah, the grid. Every hero needs structure, and this grid brings it. We’re looping through each row and column of our canvas, placing a comic-style shape in each grid cell with drawComicShape(x, y, cellSize). The x and y coordinates are the center points of each cell—think of them as a meet-up point for shapes to do their thing.

Drawing Comic Shapes: Where the Wildness Begins

function drawComicShape(x, y, size) {
  let shapeType = int($fx.rand() * 5);
  strokeWeight(canvasSize * 0.01); // Bold comic-style outlines
  stroke(0); // Black outline for comic style

Now we’re in the thick of it, baby. Here we randomly pick from five different types of comic-style shapes. The strokeWeight sets the thickness of our outlines—because what’s a comic without bold black outlines? It’s all about that comic book feel.

Type 1: The Flowing Spiral

drawFlowingSpiral(x, y, size * 0.7);

Here we start with the flowing spiral. It's a hypnotic, swirling shape that gives the impression of motion. This shape’s secret weapon is its swirling pattern that loops inward. It’s the classic spiral of comic drama, pulling the eye to its center.

Type 2: The Bezier Curve Dance

drawComicBezierShape(x, y, size);

Next, we hit them with a bezier curve—a shape that’s all about smooth, flowing movement. Imagine it as the curvy sound wave that appears when the bad guy cackles with evil glee!

Type 3: The Arc of Power

drawComicArc(x, y, size * 0.8);

An arc, naturally. Nothing says "ZING!" or "BOOM!" like a beautifully drawn arc, complete with a random start and end angle. A dynamic swoosh that looks like it could’ve come straight from a hero’s punch.

Type 4: The Comic Flower of Energy

drawComicFlower(x, y, size * 0.5);

This one’s fun—a comic flower! No comic scene is complete without a little whimsy. These “flowers” are like the bursts of energy that show up when a superhero lands a dramatic leap!

Type 5: The Orbs of Light

drawComicOrbs(x, y, size * 0.4);

Orbs. They add a magical, mysterious glow to the comic landscape. Soft, round shapes that glow from the center, and just enough sparkle to make you feel like you’re in a realm of superhero mysticism.

Let’s Go Radial

drawRadialPattern(canvasSize / 2, canvasSize / 2, canvasSize * 0.35);

It’s not enough to have shapes—now we add a radial pattern that makes everything swirl around the center. The drawRadialPattern gives our comic the energy of a spinning vortex, a dramatic centerpiece for all the action.

Speech Bubbles: Comic Drama in Text Form

addManyComicSpeechBubbles(10); // Add 10 random speech bubbles

Now for the punchlines! Ten speech bubbles, randomly placed across the canvas, shouting all the classic comic exclamations: “POW!”, “BAM!”, “KAPOW!” Each bubble is lovingly crafted to capture the comic essence we know and love.

Random Comic Colors

function getRandomComicColor() {
  let colors = [
    color(255, 0, 0),      // Red
    color(0, 0, 255),      // Blue
    color(255, 255, 0),    // Yellow
    color(0, 255, 0),      // Green
    color(255, 255, 255)   // White
  ];
  return colors[int($fx.rand() * colors.length)];
}

The colors for our shapes are bright, primary, and scream “COMIC!” Red, blue, yellow, green, white—all bold and designed to make each shape leap off the screen.

Conclusion: A Symphony of Comic Art

That’s the magic behind "Pop-Burst Dreamscape". Every line of code dances together to create a vibrant explosion of comic-book action. It’s a world where generative art meets the thrilling aesthetics of comic strips, all powered by p5.js and a sprinkle of generative randomness.

This piece is a celebration of pop art, spontaneity, and bold expressions. Whether it’s the swirling spirals, the dramatic arcs, or the speech bubbles filled with dramatic exclamations, this piece exudes energy. And that’s the beauty of it, darling. Whether you're a fan of comics or generative art, this one’s bound to bring some joy to your screen.

Check Sparrow Hawk 's repository on Github for full Code!

With love, always. 🌸

_Frostbond Coders