A long time ago in a galaxy far, far away…
Do you have somewhere to go in the metaverse?
Here are some stairs for you (live link here).
Going Somewhere Preview
Going Somewhere Collection
I have always liked architecture, especially high ceilings and grand stairs. Stairs are so structured and lead you to places. It is a passage through space that opens more possibilities. They are like useful sculptures.
I have also always liked the fire escapes in New York. They provide some texture to the building facades.
So this is a first step to mimicking architecture and space in generative art.
Do Ho Suh’s dream-like space is definitely another inspiration source.
I hope one day to create some space that is James Turrell-like with code.
One aspect I love about generative art is the technical aspect.
So I will try to be as open as I could about the implementation and give credit where it’s due. That’s the spirit of open-source and I believe sharing is better for the community and myself to iterate and learn.
I had two technical goals for this project:
- Get into 3D rather than 2D in p5.js or three.js
- Learn basics of shader/webgl
These are technologies I haven’t played with before and I was excited to learn.
For the 3D part, I followed the documentation of p5.js on Geometries. The webgl coordinate system is slightly different from the regular p5.js (where origin is on the top left of the canvas). In 3D (wegbl) mode, the origin is in the center of the canvas, which kind of makes sense but took a few minutes to get.
Then the shader part is a bit tricky. I found understanding the rendering pipeline useful before diving in the tutorials, especially understanding the concept of vertex, and rasterization.
Then I used the matcap example from aferriss and some cool matcaps curated by nidorx. The stairs are composed of 3d primitive box, and I arranged them with different height, width, and spinning angles and different textures.
Finally, to give the stairs a floating in space feeling, I added many random spheres floating in the space.
Some resources I referenced: