Making pixels misbehave with distortion

Reality is kind of boring

One of my favourite things about creative coding with shaders is just how easy it is to completely break the rules of reality. You can create effects and outputs that are completely alien, or impossible in the real world.

Distortion is one of those things that might look complicated on the surface, but is actually pretty straightforward once you understand it. I think it's one of the most fun effects to experiment with.

The basic idea is straightforward: take your UV coordinates and move them around. That's pretty much it! It's a simple technique, but the results can be dramatic.

3 new distortion utilities

I've added three distortion utilities to Fragments that cover some really fun, common distortion effects you might want to use. Each one takes UV coordinates (aspect-corrected coordinates provide best results) and transforms them in a different way.

Wave distortion

Wave Distortion creates ripples by applying sinusoidal displacement to your UVs. Think water ripples, heat waves, or rhythmic visual effects.

You control the frequency (how many waves), amplitude (how strong), angle (which direction), and time offset (for animation). Combine multiple wave distortions at different angles and you get some really interesting interference patterns.

The trick with waves is layering them. One wave looks okay. Two or three waves at different frequencies and angles? That's where it gets interesting.

Swirl distortion

Swirl Distortion twists pixels around a center point. The rotation is strongest at the center and falls off with distance, creating that classic vortex effect.

This one is great for transitions, artistic effects, or simulating fluid motion. You can animate the strength parameter over time to create dynamic swirling effects.

Bulge distortion

Bulge Distortion creates lens-like effects. Positive strength values push pixels outward (bulge), negative values pull them inward (pinch). It's like looking through a magnifying glass or fisheye lens.

The power parameter controls the falloff curve, so you can make it subtle and smooth or dramatic and sharp.

Why these utilities work well

All three utilities follow the same philosophy: simple inputs, clear outputs, and they combine well with other techniques.

Use aspect-corrected UVs for best results, and they all work with any texture or pattern you throw at them. You can chain them together, animate them, or use them as building blocks for more complex effects.

The code is also straightforward. No black magic or complicated math that you need to look up every time. Once you understand what each parameter does, you can use them from memory.

Novel interactions

Where distortions really shine is when you combine them.

Start with one distortion, then feed those distorted UVs into another distortion. Each one compounds on the previous one. You can create effects that would be incredibly difficult to achieve with just one distortion type.

Try applying a wave distortion first, then a subtle bulge distortion. Or combine two wave distortions at perpendicular angles. The combinations are endless.

What's happening with Fragments

It's been a while since I've given an update about the platform and what's been added, and what's coming in the future:

A new technique: Interactivity

I'm working on a new technique all about Interactivity that covers everything you need to make your shaders respond to user input. Things like mouse tracking, cursor trails, click effects, and more. This is something I get asked about a lot, so I'm excited to get it out there.

This is a really broad topic, so I wanted to try and boil things down into a couple of really interesting key use cases:

• Mouse tracking - Follow the mouse and update values in real-time. Move a camera around a scene, follow the mouse with a value, or use the mouse to control the position of a texture.
• Cursor trails - Create a trail of your cursor as you move around. This is a really fun effect to play with, and can be used to create some really interesting visual effects.
• Click effects - Create an effect when you click on the screen. This one is a little different, where I wanted to create a buffer for values that are triggered by a click. I had some fun playing with this for a sequencer I was working on.

I'm hoping to get this out in the next couple of weeks, so keep an eye out for it!

Discord community is live

There's now a Discord community server for Fragments subscribers. You can access it through your Polar portal in your account settings.

It's a space to share your work, ask questions, get feedback, and connect with other creative coders working with shaders. I'm really excited to see what people create, and to be able to help out with any questions you might have.

THREE.js 181

The new version of THREE.js is now available, and I've updated Fragments to use it, including all of the boilerplate projects and utiltiies. Check them out here:

• R3F Boilerplate Project
• Vanilla Boilerplate Project

Experience updates

Now that Fragments is starting to grow, it's becoming pretty clear that I'm going to have to make some updates to the user experience to make it more accessible and easier to use.

I have some ideas I want to explore - particularly around the utilities section. I want to turn this more into a dashboard kind of experience so that each utilitiy is extremely easy to find, grab, and use.

More to come on that in the future!

Gratitude

When I first started Fragments, I had no idea if anyone would actually be interested in it - so I'm incredibly grateful to everyone who has supported me and the platform. Almost 100 creative coders, shader artists and design engineers have joined in over the last couple of months.

I think it's an incredible milestone for this ambitious project I've been working on solo. You're all amazing, and I hope you make some awesome stuff with what you learn!

Join in!

These three distortion utilities are available now in Fragments, along with 10 techniques, 36+ utilities, and 120 sketches with full breakdowns.

If you haven't unlocked Fragments yet, you can sign up here to get access to everything.