Piter Pasma on Warpcast

Content pfp

0 reply

0 recast

0 reaction

Piter Pasma pfp

per request here's how I created the artwork in theoretically possible to follow, slightly unordered steps: STEP 23) use the random seed "GenArt-BanNER" which you can tell is truly random and not at all cherry picked to look the nicest. Compare for instance this one which has seed "GENART-EXPLANANANANA" ⬎

8 replies

6 recasts

70 reactions

Piter Pasma pfp

so first you gotta build a Rayhatcher, you can read about it here: https://www.fxhash.xyz/article/rayhatching-evolution it's very easy the Rayhatcher is basically a flow field and everybody knows how to do flow fields right? otherwise Tyler Hobbs explains flow fields here: https://www.tylerxhobbs.com/words/flow-fields and I used the algorithm from the paper here: https://web.cs.ucdavis.edu/~ma/SIGGRAPH02/course23/notes/papers/Jobard.pdf Then we gonna raytrace, the result of which gets you a light(x,y) function, and also a normal(x,y) function which represents surface orientation. Bbbback to the flow field, we modulate the line distance according to light(x,y) and the flow field direction is based on the normals (cross product with arbitary vector, project to 2D, normalize) and that's it really

2 replies

0 recast

6 reactions

Piter Pasma pfp

you know how raytracing is easy when you use shaders and SDFs? if not, go read Inigo Quilez until you do: https://iquilezles.org/articles/raymarchingdf/ and all the other articles, bask in the infinite wisdom as your INT goes 🚀 and your skill tree sprawls to the horizons 🎇

1 reply

1 recast

5 reactions

Piter Pasma pfp

... turns out raytracing is ALSO easy when you use JS and SDFs and it looks a little something like this: A=([x,y,z],[a,b,c],t=1)=>[x+a*t,y+b*t,z+c*t]; // 3D vector addmul IX=(SDF,ro,rd,t=0,h)=>{for(;t<MAXD&&(h=fudge*SDF(A(ro,rd,t)))>SURFD;t+=h);return t} // raytrace intersect func but feel free to write your own

1 reply

2 recasts

5 reactions

Piter Pasma pfp

And then, you need to git gud. Probably even gudder. So, head back to reading Inigo Quilez! And also the great articles about SDFs for Universal Rayhatcher: https://www.fxhash.xyz/article/getting-started-with-universal-rayhatcher https://www.fxhash.xyz/article/rayhatching-a-ufo-scene https://www.fxhash.xyz/article/revolving-twisting-and-transforming-sdfs%21 https://www.fxhash.xyz/article/how-strangerintheq-used-rayhatching-to-create-a-castle https://www.fxhash.xyz/article/rayhatching-a-truchet-tiling

1 reply

1 recast

5 reactions

Piter Pasma pfp

To figure out how to make an SDF for shattered stuff, actually turns out to be (slightly) easier in JavaScript than in shaders, whoohoo! it's cause you can recursively slice an SDF with planes and that requires a tree-like structure which JS is better at than shaders. Also figure out a sort of optimization algo for where to put the slices so that it looks nice. this is always fun in genart cause it doesn't need to be perfect, just good enough. this means you can do randomized stochastic optimization and Monte Carlo your way out of a wet paper bag It was originally designed to shatter a sphere, but then I tried shattering a wall and it also looked nice

1 reply

0 recast

5 reactions

Piter Pasma pfp

but what about all the cool slicy lines that go over everything, they're not part of the Rayhatcher, how'd I do that? well you can extend the raytracer to also calculate a material(x,y) returning an integer number that tells you that if the number is different, then it's also different materials. and what do we do with different materials, we draw a line between them. at least that is what we do today.

1 reply

0 recast

6 reactions

Piter Pasma pfp

Put the flow field in a box for a minute (even better, put it in an SVG layer), cause we're going to marching triangles this. That's like marching cubes, but in 2D and with triangles--making it much simpler than marching cubes. Do a triangular grid and whenever two vertices of a triangle are different material, line-piece goes there. When done, connect the long list of line pieces so they're now a list of polygons. The polygons trace the edges of the materials now, woopwoop. And then and then ... draw the polygons! For the banner image, I drew them three times with slightly random offsets so they look scratchy

1 reply

1 recast

5 reactions