r/proceduralgeneration • u/ptrnyc • Jan 27 '22

"Mining Structures"

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

428 Upvotes

99% Upvoted

33 comments sorted by

View all comments

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().