Hello, I'm Jongmin Kim, an interactive developer. Today, I'd like to introduce my personal project, "Form Follows Function," which was launched in 2012. Form Follows Function features a circular card layout on the main page, and when you click on each card, you can experience various interactions built with HTML5 on the website. Although WebGL now works well on mobile devices, back in 2012, mobile devices could only handle simple canvas drawings. To ensure that the same experience could be provided on devices like iPads and mobile phones, I did not use WebGL. Instead, I focused on optimizing performance to showcase a substantial amount of animation without WebGL. What I personally find special about this website is that it combines my design and artwork with HTML5 technology to create interactive experiences. While there were already many websites showcasing HTML5 examples, I believe the unique combination of minimalist design and engaging interactions with the then-emerging HTML5 technology set it apart from others. This resulted in a polished and differentiated product. Thanks to this project, I was fortunate to receive awards such as the Red Dot Award, One Show Award, and Webby Award, among others. This project had its origins in the idea of utilizing HTML5 features like transform and rotation to create a gallery. However, an interesting idea emerged from this initial concept. Rather than simply displaying images, I thought it would be more engaging to have interactive content associated with each thumbnail. I organized my thoughts and planned to create an interactive user experience using code and design posters to represent these interactions. However, when I created it, I found that the posters on the main screen lacked consistency in design, which left me somewhat unsatisfied. Then, a turning point came when my wife injured her finger while cooking with a new knife she had bought. When I opened the first aid kit to apply some medicine, I was captivated by its design. It was a first aid kit from a company called Best Made Company. The moment I saw it, inspiration struck. Drawing inspiration from this, I redesigned the main screen to resemble labels with different colors and added variations in size based on proximity to create a sense of volume, ultimately enhancing the overall quality of the project. The content that appears when you click on each card was inspired by things I love. Let me introduce them one by one. During a trip to Japan, it started raining, and I took a photo from a glass-walled pedestrian bridge in Shibuya. This resulted in a unique photo, and I drew inspiration from it to create the "Bokeh" section. Bokeh refers to the aesthetic quality of the blur in the out-of-focus areas of a photograph, often resembling blurred light orbs. I created randomly moving balls on an HTML5 canvas and applied the globalCompositeOperation property of the canvas to make the areas where the balls overlapped appear brighter, mimicking the appearance of light. Personally, I have a great appreciation for the master of Pop Art, Andy Warhol, and his works. Among them, "Campbell's Soup" gives me a feeling as if I've displayed an Andy Warhol artwork in my own home, adding a touch of artistic flair. Inspired by this, I created a section that represents Campbell's Soup in 3D. but it conveys a dual sense, as if Andy Warhol's artwork has been translated into 3D. To create the cylindrical shape in 3D, I divided a flat surface into 24 segments and tilted them at 15-degree angles, connecting them in a curved manner to form a cylinder shape. I then applied the Campbell’s Soup image to it and added interactions that allow it to rotate and tilt based on the movement of the mouse or fingers. In truth, it could have been any cylindrical image, but the fact that it's Campbell's Soup adds an interesting twist. It was my intention to create a sense of artistry that goes beyond typical beverage cans or other cylindrical objects. While I only recreated Campbell's Soup, I aimed to convey a dual expression that makes it feel like an Andy Warhol masterpiece has come to life in 3D. I've had the opportunity to see this artwork when I visited the MoMA Museum in New York. It consisted of multiple Campbell's Soup images individually framed, coming together to form one impressive piece. I found it truly captivating. Inspired by this, I decided to recreate the exhibit's presentation in its original wooden frames on the web. I used CSS3's 3D capabilities to craft the wooden frames, allowing them to appear three-dimensional depending on the perspective. One of Andy Warhol's distinctive features was his use of the silkscreen printing technique for mass production. This approach was likened to the mass production of items in a factory, leading to the term "The Factory" to describe his studio. It's how he was able to use so many different colors in the same piece, which is why you see Andy Warhol's paintings that are the same painting, just in different colors. Inspired by Andy Warhol's unique style, I adjusted the Hue values in the images to create a diverse range of colors. The dynamic color representation that smoothly changes based on the mouse's position adds a unique touch. It distinguishes the web-based experience from static artworks hung in a museum, infusing it with the dynamic interaction characteristic of the web, providing a fresh perspective. Personally, the works of the surrealist artist René Magritte, whom I greatly admire, have been a source of inspiration for many artists. In particular, his painting "Golconda," featuring gentlemen in suits falling like raindrops, served as a motif for a scene in the movie "The Matrix." Inspired by this, I created a graphic of a gentleman with an umbrella to depict the image of rain falling. I incorporated an interaction where the rain's direction changes based on the movement of the mouse, adding a dynamic element to the falling rain motion. Among René Magritte's works, there is a piece titled "The Empire of Lights." In this painting, the street is depicted as nighttime, while the sky appears to be daytime, creating a coexistence of day and night. I was inspired by this artwork at MoMA. I combined the concept of bright backgrounds with dark objects, or the reverse, with an algorithm representing the growth of trees. When you click the screen, trees start growing. In the bright background resembling daytime, dark trees grow, while in the dark background resembling nighttime, vibrant and brightly colored trees emerge. I used HTML5's Canvas for this project, and the representation of the colorful and bright trees involved the use of the globalCompositeOperation property, similar to the Bokeh section. Vincent van Gogh's artwork is something that I believe very few people dislike, and I'm certainly a huge fan as well. Whenever I look at van Gogh's works, I'm deeply impressed by his unique brushwork and vibrant colors. I wanted to capture that in my own artwork, and this section represents my attempt to do so. In this section, I extract colors from van Gogh's paintings and pixelate them, creating a mosaic-like effect. However, it's not just about showing the original image alongside the pixelated one. I added a resizing effect to convey that the pixelation is happening in real-time. So, when you resize the image, you see the corresponding pixel image. The way the mosaic changes depending on the size of the image is an intriguing aspect. The van Gogh section was even displayed at the Vincent van Gogh Museum in the Netherlands. It appeared as one of van Gogh's works created by artists from various countries in an installation piece installed at the museum's entrance. It was a delightful experience to have my work exhibited in the museum of the place where van Gogh was born. The museum kindly sent me tickets as a token of gratitude for my participation. However, at the time, my wife was pregnant, and I felt uncomfortable leaving her alone to travel to the Netherlands, so I couldn't go. It's a memory that has stayed with me to this day. This section represents space in Spacetime, a personal favorite theme of mine. I aimed to convey the vastness of the universe by allowing viewers to rotate through a 360-degree view of space. To achieve the 360-degree 3D representation, I created a square-shaped box and positioned the camera's perspective at the center of the box. The unique aspect here is that it's not about viewing the box from the outside, instead, it's about looking at the box's walls from the inside. To enhance this experience, I added an interaction where the box rotates based on the movement of the mouse. I created a sequence of space images and set them as the background, allowing me to depict a 360-degree 3D universe. This section represents time in Spacetime. I created an analog-style flip clock using CSS3's 3D capabilities. This section focuses on the detailed movement of a flip clock, such as the slight recoil when one side of the clock falls off. This section was inspired by New York City, where I was living at the time. New York is a beautiful city, and the view of Manhattan from the outskirts of the city has a different feel than the view from inside the city. I used HTML5's Canvas to create a reflection of New York on the water. To add an element of fun, I incorporated an interaction where you can adjust the intensity of the water's ripple effect using plus and minus buttons. When I first worked on a project in New York, I created a wave effect using Flash. For this project, I recreated the wave effect using JavaScript. I varied the movement of the wave patterns and introduced color changes at overlapping points to complete the design. You have the option to choose between two colors: blue and rainbow. I also created an interaction where the waves move based on the movement of the mouse. This section was inspired by Edvard Munch's "The Scream" and expressed using HTML's Canvas drawing. I aimed to capture the chaotic and complex emotions characteristic of "The Scream" using Bezier curves to create rapidly drawn lines that convey a sense of frenzy. I incorporated an automatic drawing feature, but I also added an interaction that allows you to use the mouse to draw thicker lines, enhancing the overall experience and making it more engaging. Robert Smithson, who expanded his artistic endeavors beyond traditional galleries to embrace vast landscapes as his canvas, is renowned for his spiral designs. Inspired by this, I used CSS Transform properties such as Rotate and Scale to arrange objects in a spiral pattern. I then deconstructed a text about Robert Smithson and placed different parts of the text into each object. To enhance the dynamic feel, I added screen transitions that reveal the spiral and incorporated continuous animations, making the experience more lively and engaging. This section draws inspiration from the technique of triangulating images, one of the various ways to transform images. Instead of simply displaying a photograph taken in New York, I decided to incorporate it into the project using the triangulation technique. I added an interaction that allows you to specify the area for the triangular mosaic using the mouse, making it more engaging and interactive. Clay animation, particularly the work of "Wallace and Gromit," which I am a fan of, is one of my favorite movie genres. Among them, the scene where the baby sheep, whose wool has been entirely sheared, shivers in the cold stands out. In reality, clay animation involves painstakingly moving each frame by hand, and scenes like this one that require rapid motion are incredibly labor-intensive. When this scene with the shivering sheep was released in 1995, many people praised it as a groundbreaking achievement in clay animation, surpassing its limitations. This section was created as a tribute to this astonishing feat. On the screen, you can see the sheep walking, and if you catch one of them, it shivers while conveying the message, "Don't eat me." Wiper Typography is one of the signature artworks of Form Follows Function (FFF). I got inspiration from rainy days through bus windows and typography magazines, but I had a vague idea of using raindrops to create typography, and I couldn't figure out how to execute it I spent several days contemplating it, and then one morning, I woke up with a sudden burst of inspiration. So, I created this section in just 30 minutes before heading to work. It's an episode about concentration, and I often find myself thinking deeply about one thing, even in my dreams This unique experience has made it one of my favorite artworks. I've used it for advertising design in FWA's Japanese magazine, The designer John Maeda, who is the legend of my field, tweeted it, and used it on the cover of my book. Recently, I displayed it on the screen of a Tesla Model 3 and filmed this driving video. I tend to engage in many seemingly pointless activities, but I believe that these activities keep me diligent. Personally, I don't have any hobbies outside of work. I don't play games or watch TV. I simply find working to be the most enjoyable activity. That's why I create these personal projects. Even though they don't bring in money and involve challenging technologies and design, I've learned a lot from them. Moreover, what I've learned has helped me grow and has been useful in real projects. As a result of this work, I received a job offer from Google, where I have been working since. If I hadn't pursued personal projects like this, no one would have known what kind of designer I am or what I excel at. I think it's important to keep building a portfolio of designs that you want to do, even if it's just for yourself, rather than just saying you want to do something. Such a portfolio plays a significant role in defining who you are as a designer. This project won many awards, but winning the Red Dot Award, one of the world's top three design awards, meant something special to me. It means a lot to me because it means that a design that I did purely because I liked it, without any interference from other people's opinions or clients, has been recognized, and it also means that there are a lot of people who like it. Thank you for watching.
