Banksy in us (Merry Christmas in NYC)

Link

Banksy in us

 

Inspiration

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.

 

Description

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.

 

Keywords

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

 

Background

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

 

Implementation

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.

 

Conclusion

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

Link

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.

08 WEEK

Link

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.

http://alpha.editor.p5js.org/vinskim/sketches/SJGqoh8R-

 

06 Serial Communication

Link

https://alpha.editor.p5js.org/vinskim/sketches/ryI23yXT-

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.

 

ARDUINO CODE

05 Object-oriented & Class

Link

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.

https://alpha.editor.p5js.org/full/Sywk_9chW

04. Recursion

Link

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.

Github

03. Button Switch

Link

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.

P5

Github

02 Week – An Interactive Artwork of Mondrian

Link

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!

Github

 

01 Week – Mondrian

Link

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.