Ramen Kaleidoscope Maker
For my Coloring Book assignment in Hand Held, I was tasked to create a drawing tool for the web, using the <canvas> element and a lot of math in JavaScript.
I built a Ramen Kaleidoscope Maker. Try making your own ramen!
Some of my favorite pieces, created my me and my friends:
Process
I actually found it very difficult to get inspired for this assignment. The week earlier, I created 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/
So with the Coloring Book assignment this week, I knew I wanted to utilize some of these brushes that I had already created. I started by combining the three brushes into one page. While it was fun to make drawings with my personalized brushes, I didn’t think the application had enough meaning to other users. This mattered a lot to me because I like to optimize for fun and enjoyment in the things I create.
This screenshot was taken after I had decided on my ramen concept
I then browsed through OpenProcessing for inspiration and found a few kaleidoscope drawing tools:
I got inspired because the shapes created are so effortlessly beautiful. 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 wanted 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.
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