o4-mini-high: Filters, Fun, and Fluidity - Crafting Visual Magic with the new OpenAI model

Exploring generative AI through code and colour, this sketch blends filters, motion, and creativity using the new o4-mini-high

One night, fuelled by a bit too much coffee and an open tab on OpenProcessing, I set myself a familiar challenge — the kind I’ve revisited hundreds of times:

"How can the new o4-mini-high from OpenAI help me create something epic, interactive, and lightweight in p5.js — with zero dependencies — that visualises the concept of filters in a way that’s beautiful, fast, and clever"

I’ve tried this kind of thing with all types of models. Over the last couple of years, I’ve created over 200 OpenProcessing sketches, from hand-tuned noise and shader hacks to procedural simulations and audio-reactive systems. I’ve explored it all. So when I picked up this new generative AI model called o4-mini-high, I didn’t come in blind — I came in with a full benchmark backlog (both my own and all the official ones out there).

The Prompt That Sparked It All

I kicked things off with a strong ask:

"Create a JavaScript file that runs in OpenProcessing using p5.js. It should have a unique visual effect involving complex mathematics, physics, and chemistry. Make it epic, interactive, and responsive to all screen sizes. The theme is: 'Filters'."

It delivered a full-on reaction-diffusion simulation based on the Grey-Scott model in volume. Technically, it was impressive: Laplacians, matrices, offscreen buffers, and visual filters tied to mouse coordinates. But it felt heavy.

Great on paper. Not something I’d keep running on my phone.

Simplify to Amplify

So I dialled it back:

"Too slow and too complex, make something epic with less complexity."

This is where o4-mini-high surprised me. It pivoted without losing the thread. Out came a beautiful, hypnotic wave, drawn with trigonometric curves. Click to change filters. MouseX controls the complexity of the waveform. It was instantly engaging, light, and smooth on desktop and mobile.

Here is the final result:

Why It Works

• Performance-First: It avoids all the grid complexity: just sine waves and one elegant shape.

• Interactivity: Simple and intuitive — click to shift the filter, move to modulate the shape.

• Expressive: Each filter dramatically transforms the visual with just a few lines of code.

But Is It the Best Model Ever?

I’ve seen a lot. And honestly, while the buzzwords around "benchmarks" always make headlines, I haven’t seen this model outperform everything else yet. o4-mini-high has potential — and it’s impressive in this lightweight creative flow — but it hasn’t eclipsed the weird magic I’ve found in some of the more raw or niche tools I’ve used before, like o1.

That said, the speed and context awareness were refreshing. It glistened. It adapted. It didn’t just give me more code—it gave me better ideas.

The Final Code

One shape. One-click interaction. One mouse-based control.

The whole thing felt less like I was writing code and more like I was shaping an idea in real time.

And it works. Here is the code, try it on:

// Epic Colour Ripple – interactive & vibrant
let t = 0;
let paletteIndex = 0;

let palettes = [
  ['#ff5f6d', '#ffc371', '#47cacc'],
  ['#6a11cb', '#2575fc', '#ff6a00'],
  ['#e1eec3', '#f05053', '#ed4264'],
  ['#00c3ff', '#ffff1c', '#ff7e5f'],
  ['#4ca1af', '#c4e0e5', '#fbc2eb']
];

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  noFill();
  strokeWeight(2);
}

function draw() {
  background(0, 0, 10);

  translate(width / 2, height / 2);
  let waves = map(mouseX, 0, width, 2, 20);
  let points = 200;
  let baseR = min(width, height) * 0.25;
  let palette = palettes[paletteIndex];

  beginShape();
  for (let i = 0; i < TWO_PI; i += TWO_PI / points) {
    let offset = sin(i * waves + t) * 40;
    let r = baseR + offset;
    let x = r * cos(i);
    let y = r * sin(i);

    let cIndex = floor(map(i, 0, TWO_PI, 0, palette.length));
    stroke(palette[cIndex % palette.length]);
    vertex(x, y);
  }
  endShape(CLOSE);

  t += 0.02;

  // Overlay UI
  noStroke();
  fill(255, 200);
  textSize(14);
  textAlign(LEFT, TOP);
  text(`Click to change colour palette\nCurrent: ${paletteIndex + 1}/${palettes.length}`, 10 - width / 2, 10 - height / 2);
}

function mousePressed() {
  paletteIndex = (paletteIndex + 1) % palettes.length;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Try It Yourself

This was never about AI replacing creativity. It was about testing its rhythm—can it groove with the way I work, think, and tweak?

Turns out, it can.

Not every response was perfect, and not every idea landed. But with the right back-and-forth, o4-mini-high feels more like a creative companion than a tool.

If you're into visual code, generative art, or are just curious about where these models are heading, give it a shot. It's not (yet) the absolute best I've used, but it might just become it.

Drop the final code into OpenProcessing or the p5.js editor and click and move your mouse. Trust me, you’ll get it.

If you're working on your own AI art/code experiments, let me know—I'm always up for comparing notes.

Here’s to filters — in art, in perception, and prompt engineering.