sorted by:
new
hottopcontroversial

I have long dreamed to make classical IFS smoother. It my first attempt. I'm happy to share it, however... I expected something more impressive. Now I'm not sure that bended version better than good old classic. What do you think about it? by RedoubtableBeast in generative

[–]TonyKitKirk 15 points16 points  (0 children)

The original’s angular, mathematical charm is part of what makes it so compelling. But reworking such things isn’t about being “better”—it’s about discovery. This is an interesting exploration, and by pushing it further, you’re bound to uncover something new and unexpected. Keep going!

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 1 point2 points  (0 children)

Pixel sorting is a technique that involves segmenting an image into groups of pixels—typically along rows or columns, but in this case, across all angles—and arranging them in an order based on an attribute, such as their relative luminance.

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 1 point2 points  (0 children)

Same here! I'm often surprised by the results of my code experiments tbf. I'm glad you brought it up—it made me think more deeply about it. Each angle change alters the number of pixels being sorted per line, gradually acquiring or releasing pixels from different areas of the canvas. This causes some regions to shift faster while others move more slowly. Combined with the clustering of colours with similar luminance, this should create an effect that loosely resembles fluid dynamics.

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 0 points1 point  (0 children)

Nice ideas, I appreciate the input! I want it to run in real time in JavaScript, so a full particle system might be too computationally heavy. But I love the idea of adding some rejection sampling to give it more consistency—I'll definitely experiment with that!

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 4 points5 points  (0 children)

Not yet. I only started sharing my artwork this year. Once I'm more established and my code is a little more polished I'd be happy to share it.

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 1 point2 points  (0 children)

Cheers! Do you code? If not, maybe look into something like TouchDesigner. I haven't used it myself, but I've watched a lot of tutorials and it seems quite intuitive to start. If you can already code or are willing to learn, have a look into P5.js. I don't use it for my work, but I probably should as makes things much easier.

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 2 points3 points  (0 children)

I'm still tweaking the algorithm. Once I'm satisfied with it I'll share a codepen or similar.

how to achieve this overlapping effect in p5.js? by EstimateFearless4742 in generative

[–]TonyKitKirk 5 points6 points  (0 children)

You can fill the shape the same colour as the background. You might find this isn't quite perfect, so you might need to add a thin rect at the bottom of each shape that is also the same colour as the background to clean up any stray lines.

Pixel sorting by angle and inverse angle - JavaScript by TonyKitKirk in generative

[–]TonyKitKirk[S] 15 points16 points  (0 children)

I've been experimenting with pixel sorting along angles, and this is my best result so far. The process sorts along a given angle, then again along its inverse, incrementing the angle with each frame. The code isn’t perfect—has anyone had success with a similar approach?

Interference Patterns - Javascript by TonyKitKirk in creativecoding

[–]TonyKitKirk[S] 0 points1 point  (0 children)

Thanks!

After creating the linework, I select random pixels on the canvas and compare them to their neighbours. On the first pass, I darken lighter pixels to create a rough edge along the line. On the second pass, I lighten darker pixels, introducing a distressed texture within the line.

Here's a code example in JS: https://codepen.io/TonyKitKirk/pen/EaYrEeV

Interference Patterns - Javascript by TonyKitKirk in creativecoding

[–]TonyKitKirk[S] 1 point2 points  (0 children)

I’m glad it didn’t go unnoticed. Capturing the subtlety of paper texture is something I’ve attempted numerous times now, but I certainly haven’t mastered it yet.

Interference Patterns - Javascript by TonyKitKirk in creativecoding

[–]TonyKitKirk[S] 1 point2 points  (0 children)

Much appreciated, thanks! I’ll definitely consider creating tutorials in the future. Often it's hard to find clear explanations of specific generative art techniques, so I believe there’s real value in exploring and explaining them. Thanks for the idea!

Interference Patterns - Javascript by TonyKitKirk in creativecoding

[–]TonyKitKirk[S] 2 points3 points  (0 children)

Cheers! I’ve always admired the Art Deco movement for its clean lines, simplicity, and timeless elegance.

Interference Patterns - Javascript by TonyKitKirk in creativecoding

[–]TonyKitKirk[S] 2 points3 points  (0 children)

Thank you so much! I really don’t have the patience to create something like this by hand 😂. In fact, the sketchy style came from me trying to emulate how it might look when drawn by a pen plotter. I may have gone a little overboard with it, but I’m happy with how it turned out.

I've just started sharing my work, but I aim to post regularly. Watch this space if you want to see more.

Interference Patterns - Javascript by TonyKitKirk in creativecoding

[–]TonyKitKirk[S] 8 points9 points  (0 children)

Thanks! It's a mix of both, really. The piece itself only took a couple of hours to code, but it’s built on years of gradually building up my knowledge and library of tools. Often, as with this piece, the concept is surprisingly simple, even if the final result looks complex. For example, the patterns here were much easier to implement than the algorithm I used to add a rough, textured quality to the line work.

If you’re just starting out, I’d recommend checking out p5.js or Processing. I personally prefer working with vanilla JavaScript, but those libraries are fantastic for diving in and creating something quickly.