The Art of Waves: Unveiling the Beauty of Fourier Series

Transforming complex waves into simple, elegant patterns

In the world of signals and waves, the Fourier Series is a fascinating concept. It might sound technical, but at its core, it’s about breaking down complex waves into simpler components. Imagine turning a chaotic, jagged line into smooth, flowing curves. This isn’t just math—it’s the foundation for compressing data, analysing signals, and creating animations.

But here’s the magic: with just a few circles rotating at different speeds, we can recreate any wave pattern, no matter how complex. This code we developed uses the Fourier Series to animate these patterns right before your eyes. As the circles spin, they trace a wave, showing how even the most intricate shapes can be built from simple, repetitive motions.

Why does this matter? Understanding concepts like these can spark innovative thinking for marketers, C-level executives, and anyone in the business world. It’s about seeing the potential in breaking down complexity into manageable parts—whether in data analysis, creative design, or strategic planning.

See It in Action

Check out and interact with this mesmerising animation, defining different numbers of rotating circles here.

Try It for Yourself

Curious to see the code? Even if you're not a tech expert, look—you might be inspired by how simplicity can lead to stunning results.

let time = 0;
let wave = [];
let slider;

function setup() {
  createCanvas(800, 400);
  slider = createSlider(1, 10, 5);
}

function draw() {
  background(0);
  translate(200, 200);

  let x = 0;
  let y = 0;

  for (let i = 0; i < slider.value(); i++) {
    prevx = x;
    prevy = y;

    let n = i * 2 + 1;
    let radius = 75 * (4 / (n * PI));
    x += radius * cos(n * time);
    y += radius * sin(n * time);

    stroke(255, 100);
    noFill();
    ellipse(prevx, prevy, radius * 2);

    fill(255);
    stroke(255);
    line(prevx, prevy, x, y);
    ellipse(x, y, 8);
  }

  wave.unshift(y);

  translate(200, 0);
  line(x - 200, y, 0, wave[0]);

  beginShape();
  noFill();
  for (let i = 0; i < wave.length; i++) {
    vertex(i, wave[i]);
  }
  endShape();

  time += 0.05;

  if (wave.length > 250) {
    wave.pop();
  }
}

If you like this kind of animation, we have dozens of it for free with open/sourced code here. Also, check our Substack to dive deep into the visualisation of Pi and Perlin Magic animations.