FEED


artifacts we create in our daily process
commoners.gitlab.io ︎


Moving SVG with Paper.js


development process ︎
run on gitlab ︎


I used paper.js library to animate SVG images draw with the adobe illustrator. Each icon recognizes the window frame and bounces off. Particularly, at the bottom of the window, which is continuously waving itself, SVGs dynamically bounces off. They also hit each other and bounce off in the opposite direction.

When you mouse over SVGs, they turn white. Also, when they overlap each other, color blend filter works so that the color of the intersected areas changes in a certain way. However, this color-changing does not work in Internet Explorer because IE lacks the technology to implement the filter.

I've posted the development process of this project on our blog. If you are interested in the SVG and paper.js libraries, please visit our blog page.

p5.js
Dec 11, 2018


Subdivided Face — Amore Pacific Tailored Solution Commercial Development


run on gitlab ︎


We developed a prototype of the AMOREPACIFIC ‘Tailored Solution’ in 2017. After a limited customer testing phase, it is currently in the commercial development stage of the project. The program development will be completed in December this year and ‘Tailored Solution’ will be launched in the first half of next year.

At this moment, we are trying to apply various interactive technologies and designs to the program in order to integrate facial dimension measurement using 3D scanner, skin quality measurement using skin scanner and mask production using 3D printer within the program.

The artwork on this page used the actual algorithm that subdivides face to subparts based on the measured data from 3D scanner and Skin scanner.

You can see that the lines that subdivide the face into subparts are constantly moving according to the ‘perlin noise’ value. The Noise value is scaled by BGM's amplitude. Also, you can 3D orbit the viewport and zoom in / out with mouse.

three.js
April 3, 2019






Starfield with Leap Motion


run on gitlab ︎


This work is 2-dimensional starfield built with p5.js library.

With 'Leap Motion' device, you can make and move a black hole which pulls moving stars near it.
Basically 'Leap Motion' detects your both hands separately. In this project, 'Leap Motion' detects your sing hand's palm and the palm's 2-dimensional coordination is allocated to the black hole's centroid.
If 'Leap Motion' device is not connected to your computer, stars will just travel in the space and a black hole doesn't show itself.

p5.js
Dec 11, 2018







Pixel Drawing — The Original Mac Icon by Susan Kare


development process ︎
run on gitlab ︎


This work is inspired by the new york times' article, 'The Woman Who Gave the Macintosh a Smile.'
This woman, Susan Kare is an artist and graphic designer who created many of the interface elements and typefaces for the Apple Macintosh in the 1980s.

Below is one paragraph in the article.
“If the Mac turned out to be such a revolutionary object — a pet instead of a home appliance, a spark for the imagination instead of a mere work tool — it is thanks to Susan’s fonts and icons, which gave it voice, personality, style, and even a sense of humor.”

p5.js
Apr 25, 2018