FALL 2020
COMPUTATION // JAVASCRIPT // HTML/CSS // INTERACTION DESIGN // VISUAL DESIGN
RAMEN KALEIDOSCOPE MAKER
I built a Ramen Kaleidoscope Maker for the web browser using the <canvas> element and JavaScript. Try making your own ramen!
Some of my favorite pieces, created by my friends and me:
PROCESS
This is an assignment for the Hand Held class at ITP. The brief was to create a drawing tool for the browser.
Experimentation
I started by exploring different brushes I could create through JavaScript. I programmed three different web browser brushes for the first time. These brushes were created based on my own interest in the colors and shapes that were generated by the equations I wrote in JS, with a lot of trial and error involved.
Try Pen 1: https://4x20h.csb.app/
Try Pen 2: https://lpxuu.csb.app/
Try Pen 3 (my favorite!): https://zpnf8.csb.app/
Analysis
I combined the three brushes into one page to get a sense of how different strokes can combine with one another. What I realized was that, for the average user, it would be much easier to come up with something to draw if the tool had provided a starting point, a concept, or some limitations to work with. Having a clear concept or guidelines would also provide clearer meaning to the user as they are creating their artwork. I wanted to optimize for fun and enjoyment.
Concept Finalization
I browsed through OpenProcessing for inspiration and found a few kaleidoscope drawing tools:
I was drawn to this method because the shapes created are so effortlessly beautiful, which makes the process fun with little effort. The drawing path is clearly guided. The problem I saw with this format is that the imagery could get repetitive, boring, or insignificant after playing with it briefly. I still needed a clear purpose for my tool.
The inspiration for ramen came from me taking a quick break and scrolling through Tumblr to find irresistible photos of anime food. Though I’ve done another ramen-themed project during my first semester, I love the food enough to dedicate multiple projects to it. The shape of the bowl is round, perfect for the kaleidoscope effect. I had a vague vision in my head of a trippy kaleidoscope artwork with ramen ingredients, though not really knowing how it would actually turn out. The idea was really abstract, and I had to just start building it to see how it would turn out.
Execution
I adjusted the vector code for Pen 3 to look more like stringy, yellow ramen noodles, Pen 2 to look like scallions and corn. The egg was my favorite to make, as it is such a crucial part is ramen aesthetic.
The result turned out even better than I had anticipated! This was a really challenging assignment, in both design process and code. But it is this kind of projects that reminds me why computation is so damn neat. My little seed of a whacky idea turned into a platform for people to explore their creativity and create amazing artwork that I couldn’t envision!
Big thanks to my teacher Max Bittker for the super thorough tutorial videos and for always being on call when I need assistance. I would not have been able to figure out the kaleidoscope effect without him! Also a special thank you to Casey Liang for helping me with the crazy programming math, and for being with me through all the anxiety! This project could not have turned out like this without him.
The current site works better on desktop. It’s still kind of buggy, but I’m hoping to get more time to develop the idea into something more polished!
Github repo: https://github.com/falsesugar/ramen-kaleidoscope