warping images

[miriam_e]

For a couple of weeks I've been trying to work out how I might create my own procedural textures like those in POV-Ray. Partly this is an intellectual exercise, but partly it's because I'd like the versatility of being able to control textures myself when I make virtual worlds.

Today I think I've solved a crucial part of the problem. I used a simple pattern of waves and distorted them in a way that if taken further can create marble and granite textures.

Here is how I did it:

I began by making a very orderly heightfield of straight, parallel, sawtooth waves (so named because they ramp up from black to white in a linear gradient, then down again in a linear gradient, which if you graph their values look like the teeth of a saw). I made that using ImageMagick. Here's how...

Make a gradient:

convert -size 512x32 gradient: -rotate 90 ramp.png



Duplicate it reversed horizontally to make a single full sawtooth wave:

convert ramp.png \( +clone -flop \) +append sawtooth_1.png



Duplicate it multiple times to make 8 waves:

convert sawtooth_1.png +clone +append +clone +append +clone +append sawtooth_8.png



Okay. That's the nice orderly image that I want to mess up and distort. To do the next step I need a displacement map to tell G'MIC how much to displace each pixel in the image I want to distort. G'MIC can produce a number of noise images. Its "turbulence" command, is perfect for making a nice displacement map.

Generate a blank canvas of 255x255x1 (X,Y,Z) with one color channel so that it is grayscale. (3 channels would be 3 color rgb) Then add turbulent noise with a radius of 80 pixels, so that large structures dominate. All the other parameters, leave at their default settings.

gmic 512,512,1,1 turbulence 80 -o turbulence_80.png



Now we warp the orderly image with the turbulent noise image :

gmic turbulence_80.png sawtooth_8.png -warp[-1] [-2],1,2,2,1 -n[-1] 0,255 -o sawtooth_turbulence_80_warp.png



Ta-da!!!!

Hard to believe this took me so long to work out. Interestingly, GPT-4 was almost no help at all... other than the fact that it introduced me to G'MIC, which I hadn't heard of before. GPT-4 slowed me down by sending me off on several wild goose chases with its terrible efforts to write code.

Comments

[greylock]

I am not 100% sure, but I suspect the HTML (is it HTML still?) is wonky. Or my browser is.
But you have given your comment a swanky left banner.

[miriam_e]

Hmmm... what web browser are you viewing it in? It looks fine in my firefox...

[miriam_e]

The first image is tall and thin, so I decided to left align it. The second image is also tall and thin so I right aligned it. The other images are square so I let them sit between the paragraphs.

[miriam_e]

Actually... you're right... it looks messy and weird. I'll remove the alignment and let the thin images take up space. Less confusing that way.

[greylock]

You see! It does look better this way!

(I am sad it took me so long to work out which Firefox I am using: Version 130.0.1 (64-bit. On the other hand, I did manage to remove Pocket from my toolbar, and discovered an eyedropper tool, so it was a net positive).

[miriam_e]

It does look better. :)

Yeah, I got rid of Pocket from my toolbar a while back too. It kinda seems unnecessary, since I keep my bookmarks organised obsessively. Speaking of which, a lot of people don't realise they can backup their bookmarks so that if their system crashes they don't lose them. Go to Bookmarks > Manage Bookmarks (Ctrl Shift O). That opens the Bookmarks window. Pull down the "Import and Backup" menu. I prefer to explicitly backup my bookmarks to HTML, naming it "bookmarks" + the current date. This means I can view the bookmarks using any web browser and easily search them using text-oriented tools.

An eyedropper tool? I wonder where that came from. Mine doesn't have that. :(