This course stretched our understanding of what is possible. If you ever coded HTML websites back in the 90’s, today’s development is something completely different, yet still utilizes some HTML and CSS. The strength and power of THREE.js and Vue.js was shown to us, while some aspects may still remain a mystery or out of reach right now. Being able to access RhinoCommon, Rhino3DM and Rhino.Compute from anywhere with internet is a pretty exciting thing. Rhino.Compute is pretty new and it has taken off, dare I say the full impact to Architecture and Design has yet to be seen.
Our first assignment was to make a Grasshopper definition that would run through Hops (a Rhino plugin that connects to Rhino.Compute). Sadly, I had not realized that the top of my form utilized a custom plugin that our teacher did not have installed. Thus, we learned that with Rhino.Compute the plugins need to be installed on that server for the definition to function. Below are a few GIFs of the interaction it would have shown.
This is the height of the random surface.
This is the length and width of the rectangle.
This is the random seed variation
Our later assignments started to deal with web geometry with THREE.js, utilizing Rhino.Compute locally, then Rhino.Compute in the cloud. Finally we all learned Vue.js components and how to create Single Page Applications (SPAs).
With THREE.js, we worked with orbit controls, scene creation with lighting setup and camera setup. With the use of raycasting we were able to us the cursor location to select geometry with embedded user attributes from our Rhino file that is loaded through the Live Server option within VS Code. Personally, with a large model the main problems encountered were tackling the lighting and camera placements to get the geometry to properly render and be visible immediately upon the Live Server initiating the page.
Beyond accessing a Rhino .3dm file with javascript that runs / changes the base html document, our class moved onto engaging Rhino3dm and Rhino.Compute locally to drive a grasshopper definition through a locally hosted web page. I produced a simple twisted shape with sliders to adjust the twist rotation, length and the scale of one end versus the size of the other end.
Our next steps were into the UNKNOWN, well all of this was unknown to me and now it has become known. At the time, it was a lot to understand. It brought me back to my early computer engineering days, before I switched to Architecture, when C++ was breaking my brain. Thanks to the efforts and tutelidge of our faculty assistant Justyna, I was able to pull through and gain an understanding. Our support sessions were essential in my ability to understand the complex subject.
Upon completion of this initial toe dipping effort into the world of Vue.js, components and the THREE.js geometry viewer, the class was directed to the Final Project. We were instructed to develop a web app (via grasshopper definition thru Vue.js) that could only utilize a single plugin (to be loaded on the remote Rhino.Compute server) that would provide interactivity and insight to the user.
I was fretting about what my project would be, a fellow classmate directed me to some interesting topics by Chuck Hoberman. I was struck by his Adaptive Frit installation at the Harvard GSD where lights would turn on and the frit would expand to cover the window.
I was inspired to develop my own digital mechanism for a similar function yet with a different end goal. My web app would utilize Ladybug Tools sun hour component to sample a generic window at 200 locations. The center of these cells became the central frit circle where seven other frit circles hid in a shallow depth. As each cell gained more sun hours throughout the day, the frit would grow and then retract back into the center as the sun set. The user can select the day of the year, rotation of North, and the city where the analysis would be taken. Each time the sliders or drop down menu are changed or selected the web page calls to Rhino.Compute it runs the routine and returns the average sun hours across the 200 cells inside of the window. This project is also partly related to software engineering and the concept of long term laziness. I would love to research a way to physically produce this digital idea, hopefully it could be run on solar power the frit was blocking, even if the frit were located inboard of the glazing. There would also be an option to turn off the mechanism, potentially in the winter an occupant would want the solar heat gain and choose to turn the system off.
It is amazing that our class went from almost nothing, limited to no knowledge of web development, to functioning and informative web applications built on tools in which we already contain experience.
Below please check out my short 3 minute Final Presentation video.
