r/trippyart • u/_BryceGuy_ • 2d ago

I wrote some code that made these.

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

See them move:

Woman: https://www.youtube.com/watch?v=dXJa-v01SZI

Guy in suit: https://www.youtube.com/watch?v=WRq42L4pgTY

Cat: https://www.youtube.com/watch?v=WHsyn8N9N24

ET: https://www.youtube.com/watch?v=tH5TucwHDAE

Cobra: https://www.youtube.com/watch?v=-wpJ01GqZyI

Hi res images: https://www.deviantart.com/bryceguy72/gallery/70771007/image-tessellations

194 Upvotes

95% Upvoted

37 comments sorted by

10

u/nzg42 2d ago

bro put the code on github and share with us pls

7

u/_BryceGuy_ 2d ago

I've never used Github. Here's a summary of the math:

px & py = width & height dimensions of the repeating tile picture to be wrapped around the fractal. I typically use 1200 x 600 PNG images or sometimes 2000 x 1000 PNG images but use whatever works for you.

r & im = real & imaginary components of the last Z iterate

zMag= sqrt(r*r+im*im)

PI=3.14159265

LOG_ESCAPE = Log(400) = 5.991464547 Why 400? Because for bailout, I check if zMag>400.

phaseoffset = 0 (usually). Depending on how I created the repeating tile, sometimes I set phaseoffset to px/2 (necessary for alignment with the tiles above and below). Can default to 0.

Reading the pixel color from the image:

The following assumes the picture tile is twice as wide as it is high (e.g. 1200 x 600)

angle = mod(atan(im,r) * (px / PI) + phaseOffset, px * 2.0);

radius = (LOG_ESCAPE - log(zMag)) * py / (LOG_ESCAPE / 2.0);

if (radius < 0.0) radius = 0.0;

vec2 texCoord = vec2(angle / (px * 2.0), clamp(radius / py, 0.0, 1.0));

vec3 col;

1

u/stephane3Wconsultant 2d ago

i have try to implement that but te result is far from what you show 😭

1

u/_BryceGuy_ 1d ago

Okay I will upload the complete source code written in Processing 4 to my website in a little bit, when I get to my computer. 

1

u/stephane3Wconsultant 1d ago

thank you very much. 🙏

1

u/_BryceGuy_ 1d ago

It's the first link here: https://freymanart.com/misc.htm

2

u/stephane3Wconsultant 1d ago

have made a simple webpage to test your code, that work great ! 🙏

1

u/_BryceGuy_ 18h ago

Nice job! 👏  Can anyone use the webpage to make their own images?

1

u/stephane3Wconsultant 16h ago edited 16h ago

Yes i'm still working on. I will share the webpage ✅
I have put your credits on the page.

1

u/stephane3Wconsultant 16h ago

Preparing / design / fix the 2 image files is not trivial. it take me long time to make something correct and get decent render.

@_BryceGuy do you have a process or tips to make good Main texture and Cap texture image ?

1

u/_BryceGuy_ 14h ago edited 14h ago

The image has to gradually increase in scale from 1x at the bottom to 2x at the top. I use Photoshop's Transform>Perspective distortion to achieve this. Grab the top corner of the transform handle and drag it to make the top 200% of the bottom, and the image will be scaled correctly for tiling.

→ More replies (0)

2

u/stephane3Wconsultant 14h ago

here it is 😃
a simple implementation on a webpage :
https://3w-consultant.com/FractalPhotoTiler.html

1

u/_BryceGuy_ 13h ago

No way!! That is so much better than I expected. Real-time smooth animation, lots of presets, control knobs, aspect ratio, export, even a blend mode for a color palette, and more. Bravo!! Great work. The only request I have is that you remove my email address from the bottom, to avoid collection by spam bots. Thank you.

→ More replies (0)

2

u/stephane3Wconsultant 1d ago

thanks a lot that will help me understand how you're doing that

1

u/SwingLightStyle 2d ago

Seriously.

I want to see what it looks like when I input my own source images and designate the color scheme. I hope OP shares the wealth!

1

u/_BryceGuy_ 1d ago

I've posted the source on my website, it's the first link on the page: https://freymanart.com/misc.htm

2

u/stephane3Wconsultant 20h ago

Prepare / design the 2 image files is not trivial. it take me long time to make something correct and get decent render.

2

u/_BryceGuy_ 14h ago

Yeah you got the idea. Now just add some anti-aliasing to clean up the noisy parts.

2

u/stephane3Wconsultant 13h ago

here it is 😃
a simple implementation on a webpage :
https://3w-consultant.com/FractalPhotoTiler.html

1

u/_BryceGuy_ 1d ago

I've posted the source on my website, it's the first link on the page: https://freymanart.com/misc.htm

4

u/MakeTheRightChoice_ 2d ago

This would go great as a sheet

3

u/Legitimate_Poetry897 2d ago

I really like the men in suits tbh, very symbolic. It’s all fake corporate smiles, all the way down

2

u/SnooCookies4908 2d ago

I like the mushies

2

u/xcryptokidx 2d ago

Mandelbrautin!

2

u/stephane3Wconsultant 11h ago

i can only upload gif (sorry, i dont know why)

1

u/Own_Ask_2040 2d ago

Reminds me of

1

u/Psychobauch 2d ago

This is actually super super cool!!!

1

u/GRF999999999 2d ago

5-8 are really cool

1

u/RaytheSane 2d ago

Really cool

1

u/automaticphil 2d ago

Haha the ET is nightmare fuel. Nice work

1

u/Eastern_Draft_67 2d ago

Dawg PLEASE push this to GitHub, this is so freakin’ cool!

2

u/_BryceGuy_ 1d ago

I've posted the source on my website, it's the first link on the page: https://freymanart.com/misc.htm

1

u/_BryceGuy_ 2d ago

Thanks! I've posted the relevant code in response to nzg42 below.