Banksy in us (Merry Christmas in NYC)


Banksy in us



I was inspired by Banksy’s works and graffiti on the Brooklyn street. I have been considered that every individual can be a great topic for artwork like Banksy’s works. That is why I choose the title as Banksy in us.



I would like to make a bit hilarious postcard which can deliver pleasure to receivers.
To begin with, users will face the hilarious gifs, and they need to mimic the pose of gifs. If users make the pose like the last pose of the gifs, the photo will be taken by using the screen capture. The photo will be composited with the decorated street of NYC’s Christmas. And then, users will send the photo to others via e-mail, and they will print the card out as a hardcopy.



Face Recognition(landmarks, matching), Processing, Computational Media, Animation(GIF), Visual Design, UX/UI design, Graphic Design



The project is based on Face Recognition and Thresholding functions. As for the former, I will apply face landmarks via faceosc(openframeworks) to extract and match with facial features of users. Especially, I will try to detect information about the position and size of eyes, nose and mouth. As to the latter, thresholded pictures will be composited with the cityscape of NYC.


User Scenario

01. Selecting a GIF that a user wants to mimic it.
02. Watching and practicing a GIF that selected.
03. Mimicking a pose of GIF on the screen.
04. Selecting a postcard which is composited with NYC’s street to send an e-mail.
05. Printing a postcard



This project is based on UX experience by using FACE RECOGNITION. Users’ face will be captured if they can match a facial expression with the GIFs that I applied. And then, I’m going to use their face by utilizing THRESHOLDING effect to compositing their appearance with a cityscape of NYC. In the end, it would be sent and shared through an online service.



By engineering this project, I was able to learn how to code with processing and to apply tons of libraries from Github. Although I have been worked over 3 years as a UX designer in Korea, coding myself was the first time in my life. Also, I learned a lot how to apply video contents to development tools. I hope to have a great exhibition which can deliver happiness to all users.


FINAL – Merry Christmas in NYC


FINAL – Merry Christmas in NYC

I would like to make a bit hilarious postcard which can deliver pleasure to receivers.

To begin with, users will face the hilarious gifs, and they need to mimic the pose of gifs. If users make the pose like the last pose of the gifs, the photo will be taken by using the screen capture. The photo will be comprised with the decorated street of NYC’s christmas. And then, user will send the photo to others, and they will receive the card as a hardcopy.

To engineer the postcard, I will utilize face matching function. First, i’m going to embed some gifs into the p5 to extract face information. And then, i will apply faceosc(openframeworks) to match with the face of users. Especially, i will try to detect information about the position and size of eyes, nose, and mouth.

To make an actual postcard, i will take a photo for users by using threshold function to extract outlines from the photo, and i will apply compositing with some NYC photos.

The output will be like those pictures, and i was inspired by banksy’s works.

Plus, i will utilize those devices to make a great quality.



I wanted to make a short animation by using sticky monster characters, mic and sound function. To begin with, I added mic function to import sound which can move character’s mouse back and forth by reacting voice level.  Plus, I loaded an image from sticky monster lab and added beatbox sound with mouse toggling function.


06 Serial Communication


I wanted to make a digital piano which can be played by a keyboard, communicating with Arduino. The system that I made can be responded when a user is pressing the designated keys.

To begin with, I tried to add the serial communication function by setting some keys ( ‘a’, ‘w’, ‘s’, ‘e’, ‘d’, ‘f’, ‘t’, ‘g’, ‘y’, ‘h’, ‘u’, ‘j’, ‘k’) which can display the notes on the P5(“C”, “C#”, “D”, “D#”, “E”, “F”, “F#”, “G”, “G#”, “A”, “A#”, “B”, “C”) respectively.

Plus, I added a keyPressed function to engineer a keyboard interaction. Finally, I connected P5 with Arduino via serialEvent.



05 Object-oriented & Class


05. Object-oriented & Class

This week assignment aims to design a sketch in an object-oriented and class, so I wanted to try using images in my work. I loaded a dozen of images to my sketch.

At the first, I considered of creating balls with a goalkeeper as he is practicing to keep the bouncing balls. Therefore, I loaded some balls which can be controlled by the mouse by using an image and a class function. They are bouncing in the frame to make a score, avoiding a goalkeeper.

04. Recursion


04. Recursion

In this week, I concentrated on studying fractal geometry by utilizing ‘Recursion’ function. I started the work, imitating the reference. And then, I modified some values to make a fractal icecream corn. By doing so, I was able to understand the relationship between grouping and recursion.

P5 – Fractical Icecream

To be honest, I wanted to make a totally fractal drawing by using hexagon and triangle because the hexagon is made by six triangles. However, I did not complete the drawing because of a technical ability. Also, when I was trying to apply some functions, the web-based P5 did not work due to a memory problem I guess.


03. Button Switch


03. Button Switch

I wanted to make a beautiful Winter Wonderland. If a user clicks the button, snow is falling down like winter. Also, I wanted to add the changeable BG color, responding actual time with scroll-bar. However, because of my technical ability, I made the simple snowy world by using Button switch.



02 Week – An Interactive Artwork of Mondrian


02. Animation

I wanted to design the animation on the artwork of Mondrian by utilizing the functions that I learnt from the last class. Under the basic structure of an artwork, I added some movements and color animations which can be controlled by the mouse. Especially, I truely practiced changeable functions randomly by var or let.

First, I made moving circle objects on the basic structure to eliminate the original frame because I wanted to change to various colored works. And then, I added an appearing white screen with falling colorful snow to make a transition. Lastly, the artwork is continuously changing when someone is clicking the mouse on the work.

– Main Functions : var circleX,Y / let r,g,b = random(number) / mouseX,Y / var x = random(0, width);

Here is the sketch for you, Tri it!



01 Week – Mondrian


01. Introduction and Drawing

I’m fascinated with artworks of emerging artists.

This summer, I designed a social art service called BBuzzArt as a UX designer. The service is an art social platform and art-market which can globally connect between emerging artists and art-lovers. I truly believe that the service will be a helpful incubator and healthy ecosystem for global emerging artists.

I have a plan to create an interactive museum by using a bunch of painting and photograph on winter show. So I would like to focus on designing interactive image-transition system. Although I’m not sure yet, I will probably try to extract Pantone colors and objects from artworks by using HTML color data and google image recognition system. The data will be a great source to design artistic transition called data visualization.

In the ICM Wiki page, I like to admire NYC Street Trees, Urban Layers, Jennifer Steinkamp and teamlab.




The first work is an artwork of Mondrian.

I set up Canvas (500×520) because the work is not square even though it seems an exact square. Plus, I sketched basic composition with four-narrow rectangles to make a proper proportion. Also, I added sub-lines by drawing short lines. And then, I filled the lines in dark gray color and added no-fill function.

After making a composition, I designed colored rectangles. I measured an exact point from existing lines to draw main objects. I found out the color from HTML color picker (). Consequently, I filled in four colors by using color function.

Github Link >


+ Problem & Solution

A drawing artwork was not easy compare to designing that by using Adobe. Actually, it was the very first work because I’ve never used coding tools before. To make a better output, I need to eagerly understand how to code and practice various works.