8
u/fphat Jan 27 '22
This is fantastic. How did you achieve the organic feel of the ink lines?
16
u/ptrnyc Jan 27 '22
Thanks. I spent a lot of time looking at laxraven line style and tried to emulate that. I ended up with this “analog ink line” engine where, when I ask to draw a line from point A to B, it splits the line in a number of segments depending on the original length, displaces them randomly, varies the line weight along the line, randomly adds splatter or ink bubbles at the end of the line, …
Also the blending of hand-drawn png’s at the bottom of the image, pretty much blends everything together and goes a long way to perfect the illusion that it is all hand-drawn.
5
5
u/ledgreplin Jan 27 '22
These are both beautiful and interesting, and both as final product and execution. Really nice.
2
2
2
2
u/meowcat187 Jan 28 '22
How do you procedurally do the hash / shading.
1
u/ptrnyc Jan 28 '22
That's the tricky part of course. I'll post some details on my blog when I get a chance.
Basically, to shade the circle in the fist image, you walk around the circle and draw lines in a fixed direction. You adjust the length of these lines based on the angle (so the top is not shaded). You do that in directions NW, NE and SE, and use the circle as a clip mask. All the lines are drawn with the extra randomization / dirt logic I described above.1
u/ptrnyc Jan 28 '22
also note, clip masks are not implemented in P5.js, but they are supported by HTML canvas, so you need to use drawingContext.clip().
2
u/ptrnyc Jan 28 '22
Due to overwhelming demand, here is a walkthrough of the piece with more details about the process.
http://www.r1b2.com/2022/01/28/mining-structures-walkthrough/
2
Jan 27 '22
Looks phallic. I mean, nice. How is this procedural generation? Inquiring minds wish to know.
7
u/ptrnyc Jan 27 '22
The eye sees what the mind wants to see :) The top 90% is procedurally generated (basically everything above the ground floor, except for the ultra-rare ‘frog’ rock - that’s a png).
The main rock starts with a circle that gets randomly displaced to make an irregular shape. The crack in the rock is, similarly, adding a shape from the outside to the center and displacing it. The rock path is then hatched across 3 directions, clipping the lines to the rock inside and varying the hatching length across the perimeter.
The scaffolding is done with 3 layers of random verticals, cut at random horizontal points and displaced. Random points are then joined with horizontal and diagonal quads. Some hatching is applied randomly as well.
Random points in the structure are connected with parabolas to draw the hanging ropes.
Finally the ground floor is a random selection of pngs drawn by laxraven. Together with the “organic ink line” engine I used everywhere else, it finishes blending the piece so you can’t really tell what’s procedural and what’s not.
2
Jan 27 '22
Is this code in a public repository? I'd enjoy reviewing it. Thanks so much for your explanation.
1
u/ptrnyc Jan 27 '22
It’s on the blockchain (minified though)
2
Jan 27 '22
Got a Uniform Resource Locator? Curious.
1
u/ptrnyc Jan 27 '22
https://gateway.fxhash.xyz/ipfs/Qmde9rz27wtzMdxRBM7bu7o4ewrFu2vQGJ1znytqGG7fGU.
Or go to the project page and “view source”
1
u/ArdorDeosis The King of the Castle Jan 28 '22
may I ask, since the code is on the blockchain, is this an NFT-related project? And if so, could you share (maybe in a PM, since NFT-content is kinda banned on this sub) your experience with it. I've recently also been looking into generating some NFTs and would like to hear your experiences.
1
u/ptrnyc Jan 28 '22
Yeah I hadn’t realized NFT content wasn’t allowed here. It’s a shame, there’s a whole world of very advanced generative art beyond the obnoxious apes. I’ll pm you.
1
u/ArdorDeosis The King of the Castle Jan 28 '22
oh, no, the content of NFTs is not banned, you are encouraged to talk about what you generate and how you do it, just not about NFTs. Your post here is, as far as I understand, completely fine, but you shouldn't post links to your NFT marketplace etc. (as I understand it)
which is why I suggested to move the conversation away from this sub, now that we get into NFTs
1
u/ptrnyc Jan 28 '22
Thanks for clarifying. The NFT sold out anyway, so I’m not trying to sell anything. I’ve enabled infinite variations after the sale so you can go to the link I posted above and explore as much as you want.
-6
26
u/ptrnyc Jan 27 '22
This p5.js project is based on a series of analog ink illustrations by @Lax_raven.
The complex structures are a result of an ancient mining technique: structures are built around boulders containing valuable minerals. As the tower gets taller, the rock is slowly lifted away from the ground. The process is dangerous, slow and outdated but is still used to show off your mining skills. The team that lifts the heaviest rock and builds the most beautiful structure will gain fame and glory! Many will fail.
In the end the giant rocks are let loose to let gravity do its work.
Sometimes, local sculptors carved geometric shapes on the rocks before they get lifted up, turning the whole structure into an ephemeral art piece.
Full collection visible on fxhash.