# The Setup Phase: The Stage is Set

```js
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.

```js
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.

```js
// 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.

```js
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

```js
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.

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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](https://github.com/reyrove/Sparrow-Hawk) repository on Github for full Code!&#x20;

*With love, always. 🌸*

*\_Frostbond Coders*


Pop-Burst Dreamscape is a vibrant generative artwork created with p5.js, blending the dynamic aesthetics of comic book art with the spontaneity of algorithmic design. Each iteration bursts with bold colors, energetic shapes, and whimsical speech bubbles like "BAM!" and "KAPOW!", creating an immersive visual experience. This piece celebrates the chaotic charm of comic-style visuals, where every grid cell reveals unique patterns, spirals, arcs, and playful symbols. Powered by randomness and comic nostalgia, Pop-Burst Dreamscape invites you to step into a world of color, creativity, and explosive fun.

Pop-Burst Dreamscape

Written by

Editions

Share

Details

stay ahead with our newsletter