Setting the Scene: A Canvas of Possibilities

const ratio = 1 / 1;
const prefix = 'Fourier 2';
const features = {};

• Canvas ratio : We’re keeping things perfectly balanced with a 1:1 ratio, ensuring that all our shapes get an equal playground. This square canvas is where all the magic happens.
• Prefix : Every piece of art we generate gets a unique title—this time, it’s "Fourier 2", a nod to the parametric curves that are about to bloom.

Choosing the Colors: A Bold and Gentle Palette

const BackgroundColours1 = ['#CD5C5C', '#F08080', ...];
const BackgroundColours2 = ['#FFFFE0', '#FFFACD', ...];
const ForegroundColours1 = ['#ff4a03', '#ff7803', ...];
const ForegroundColours2 = ['#610803', '#5c2f08', ...];

• Colorful combinations : We’ve got two palettes of background colors and two palettes of foreground colors. This ensures that every piece of art is unique, just like the randomness of nature. You’ll find bold reds, soft greens, and soothing blues blending together in ways that are always harmonious.

Tree Circles: Where Geometry Meets Nature

function drawTreeCircle(ctx, startX, startY, length, angle, depth, branchWidth, color1, color2, radius) {

• Tree circles : Instead of traditional tree branches, we’re growing circles at the ends. These recursive branches split off and expand, like trees in nature, but with a geometrical twist. As the depth decreases, the circles take on different colors, creating an intricate bloom at the ends of each branch.

ctx.arc(endX, endY, Radius, 0, 2 * Math.PI);

• The arc method : This line draws the circles at each endpoint, creating a soft, organic look. It’s like watching a tree grow and bloom—but in pixels, not petals.

Random Generation: A Touch of Chaos

function randomgenerat(number, limits) {
  let A = [];
  for (let i = 0; i < number; i++) {
    A[i] = Math.floor($fx.rand() * (limits[1] - limits[0]) + limits[0]);
  }
  return A;
}

• Random numbers : Here, we’re creating a random generator to make sure our parametric equations and tree branches are never the same twice. This randomness adds an organic, unpredictable element to the artwork, much like the natural variation you find in real trees and curves.

Parametric Curves: The Star of the Show

function drawParametricCurve1(ctx, centerX, centerY, radius, steps, color, Width, color2) {

• Parametric equations : This is where things get fancy! We use parametric equations to draw swirling curves that wrap around the canvas, much like the orbit of planets or the flow of a river. These curves change direction and shape based on the random values generated earlier.

const parametricX = (T) => centerX + R / B1[0] * Math.sin(T / A1[0] + D1[0]);
const parametricY = (T) => centerY + R / B1[0] * Math.cos(T / A2[0] + D1[0]);

• The equations : Using sine and cosine functions, the parametric curves flow around the center of the canvas. These curves are influenced by several variables, creating a beautifully complex pattern with every run.

Drawing the Curves: A Digital Symphony

ctx.arc(x, y, radius / 300 * $fx.rand(), Math.PI * $fx.rand(), Math.PI + Math.PI * $fx.rand());

• Drawing with randomness : Instead of drawing static lines, we’re using random arcs to create patterns within patterns. This adds a layer of spontaneity, making the artwork feel like it’s evolving with every frame.

The Dance of Two Curves

drawParametricCurve1(ctx, w / 2, h / 2, 3 * w / 4, 80, color21, w / 200, color4);
drawParametricCurve2(ctx, w / 2, h / 2, w / 2, 150, color32, w / 200, color4);

• Multiple curves : Here, we’re calling two different parametric curves, letting them overlap and interact with each other. It’s like watching two dancers intertwine and spin across the canvas—each curve influencing the other, creating a unique composition with every execution.

Bringing It All Together: The Canvas Comes Alive

ctx.arc(0, 0, w / 2, 0, Math.PI * 2, true);
drawTreeCircle(ctx, X1, Y1, w / 70, Angle1, 10, w / 300, color11, color11, w / 500);

• Canvas composition : The tree circles and parametric curves work together to create a cohesive, dynamic artwork. With every run, a new visual story unfolds, full of twists, branches, and curves.

Explore and Play

This digital garden is yours to explore! You can play with the code, tweak the parameters, and see what kind of beautiful, unique artwork you can create. Each time, the tree branches and curves will grow in new, unpredictable ways, just like life itself.

For the full code, click here, and share your creations with me on X, Instagram, and Facebook. I’d love to see what you come up with! 🌸✨

And, if you ever want to join us in our digital home, you’re always welcome as our guest. Come, create, and be part of this magical journey with us.

With all my love,

_Frostbond Coders 🌸💻