Bitmap Text

play︎

All text on screen is on bitmap. Then, how does bitmap affect the appearance of letters? In this curiosity, we visualized how text changes on bitmaps of various scales. Users can write text directly on this page and manipulate fonts, sizes, color, and pixel sizes in real time and download as image(jpg).

To implement this artwork, we used paper.js to analyze text written in common Google Web fonts, and visualized in vector(svg) using two.js.

paper.js, two.js
Jul 16, 2020

Fun with Seoul CCTV Live

play︎

Using live traffic cctv data of city Seoul, I tried to project 'Time' to the '3-demensional cubic space'.
Real-time CCTV video from all over Seoul provided by the Seoul Metropolitan Police Agency is analyzed through the background detection of OpenCV.js to extract moving objects.

In the 3-demensional space implemented by THREE.js, an axis orthogonal to a live streaming video is set as 'Time', and extracted images are constantly translated in the opposite direction of the axis to visualize the 'Time' information from the past to the present of the moving object and fuse 'Time' with '3D Space'.

⚠️ Due to browser’s security policy, this page runs only on PC and Mac...
❌ Mobile device...

opencv.js, three.js
Jul 8, 2020

HEAVY Crop and Drag

play with your photo ︎
play with artist’s works ︎

 HEAVY, a female artist magazine, means weighing a lot in English, but in Japanese it means snake. So, HEAVY's logo has the shape of a crawling snake. For HEAVY exhibition held in June 2020, we worked on space installation and some interactive art. We tried to fuse the image of the artist's work with the shape of a crawling snake in various ways in all works.

As one of the interactive art made for the exhibition, the focus of the artwork on this page was on drawing the shape of the snake from the artist’s work image itself. When a part of the image is cropped and dragged, a crawling snake's shape is revealed in the image. Repeatedly cropping and dragging various part in the image, users can transform the image in a fun way.

︎ We have developed the above project a little further so that any user can upload or take a photo. Using this artwork, photographer Qin xione has been worked on it, which can be found in July 2020 issue of MilkX magazine.
Photographer : Xione Qin @qinxione
Model : Huiwon Kim @huiwonwow


three.js, verb.js
Jun 19, 2020

HEAVY is Snake ~~~

play︎

HEAVY, a female artist magazine, means weighing a lot in English, but in Japanese it means snake. So, HEAVY's logo has the shape of a crawling snake. For HEAVY exhibition held in June 2020, we worked on space installation and some interactive art. We tried to fuse the image of the artist's work with the shape of a crawling snake in various ways in all works.

As one of the interactive art made for the exhibition, the artwork on this page used three.js to visualize crawling snakes in 3D space and verb.js to create smooth NURBS path that each snake will crawl. Also, using orthographic projection mapping of three.js, each snake's skin is made up of the artist's work images from the magazine.

three.js, verb.js
Jun 19, 2020