FEED


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


Animation Logo with JavaScript


run on gitlab ︎

The logo of "Haru Book stay" is designed in the shape of the sun and moon. There are three programs in the "Haru book stay": book stay, picture book club, and art play. To bring the features of the logo design to the homepage, we created a responsive logo that fills the moon according to the scroll position. This work was created using JavaScript only, without the help of other scripts, to speed up the website.

JavaScript
Nov 11, 2019





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, 2019


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