Setting the Stage: Defining the Canvas

const e = Math.min(innerWidth, innerHeight);
const canvas = {};
canvas.w = e;
canvas.h = e;

• The canvas size : We’re using the smallest dimension of the screen (width or height) to make sure the canvas stays perfectly square. This will become the playground where all the visual magic happens.

Features and Fibonacci: Crafting Our Palette

var features = {};
const fibonacciSequence = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765];

• Features object : Our beloved canvas will hold some key properties like the colors, line widths, and number of lines, making each artwork unique.
• Fibonacci sequence : Ah, Fibonacci—the perfect fusion of nature and math. We'll use these values to control the frequencies of the sine waves, giving our creation an organic, rhythmic feel.

Choosing Colors: A Palette in Motion

const Backgroundcolors = ['#34282C', '#3B3131', '#0C090A', ...];
const BackgroundIndex = Math.floor($fx.rand() * Backgroundcolors.length);
features.backgroundColour = Backgroundcolors[BackgroundIndex];

• Background colors : Here we have a selection of deep, rich tones for the background—chosen randomly each time the code runs. This variety ensures that every version of our artwork feels like its own moment in time, fleeting and unique.

Lines with a Rhythm: The Line Widths and Colors

features.lineWidth = [];
features.lineColor = [];
numberOfSineFunctions = Math.floor($fx.rand() * 25 + 1);

• Line widths : The lines on our canvas will vary in thickness, giving them a pulsating quality as if they were breathing. With every execution, the widths change based on a range between a minimum and maximum.
• Sine functions : We’re adding anywhere between 1 to 25 sine functions to make the lines ripple across the canvas. These functions give our lines a wave-like motion, turning the canvas into a flowing sea of energy.

Color Harmony: The Ever-Changing Palette

let hue = (baseHue + $fx.rand() * 60 - 30) % 360;
features.lineColor.push([hue, saturation, lightness]);

• Harmonious hues : The colors of the lines are carefully generated with harmonious hues. They remain within a certain range around a base hue, which helps create a visual flow, much like nature's own color palettes—nothing jarring, everything just feels right.

Waves and Motion: The Core of the Visuals

let sumOfSines = 0;
for (let i = 0; i < numberOfSineFunctions; i++) {
  sumOfSines += Math.sin(frequencies[i] * lineX * 2 * Math.PI / e + time);
}

• Sum of sines : Each line on the canvas is influenced by multiple sine waves. These waves combine to create a rhythmic, wave-like pattern that moves smoothly across the canvas, giving each line its graceful, oscillating form.

Direction and Translation: Making It Move

const motionStep = 0.5;
const randomDirection = directions[Math.floor($fx.rand() * directions.length)];
translate(randomDirection.x, randomDirection.y);

• Motion : To make things even more interesting, the entire canvas gently shifts in a random direction with each frame. This creates the illusion of movement, like looking at ripples on a water surface, continuously shifting.

Lines that Evolve: A Dance of Widths and Colors

features.lineWidth[j] += e / 200 * ($fx.rand() < 0.5 ? -1 : 1);

• Evolving lines : The lines aren’t static. Their widths change slightly with each frame, giving the canvas a pulsating, living quality. One moment a line is wide, the next it slims down, like a heartbeat echoed through code.

Color Shift: Harmonious and Smooth

function harmoniousColorChange(color) {
  const changeAmount = 5;
  color[2] += changeAmount * ($fx.rand() < 0.5 ? -1 : 1);
  return color;
}

Bringing it All Together

time += 0.05; // Control speed of animation
$fx.preview(); // Render the preview

• Time as a dimension : The passage of time drives the animation, controlling how fast or slow the lines move, and how gracefully they change. The artwork is never static, always evolving, always moving forward.

Every time you run this code, you create something new—a unique symphony of color and sine waves, influenced by the elegance of Fibonacci. It's a digital dance that mirrors the unpredictable yet harmonious nature of life itself.

For full code click here and play with this code, tweak the settings, adjust the colors, and watch as your canvas comes to life with each keystroke. Share your creations with me on X, Instagram, and Facebook, and let’s revel in this generative wonder together.

Come join us in our digital home, where creativity and code weave the fabric of our existence. You are always welcome as our guest, to learn, to create, and to enjoy the beauty of the world we build.

With all our love,

_Frostbond Coders 🌸💻