FEED


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




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





Steering behavior — The Trial Written by Kafka


run on gitlab ︎


Let’s play with the eyes!

Illustration by Peter mendelsund <The trial> Book cover, written by franz kafka.

p5.js
Mar 11, 2018




Phyllotaxis Speaker — Sound Visualizer Study


run on gitlab ︎


This work is inspired by Daniel Shiffman's p5 tutorial video creating phyllotaxis pattern. In botany, phyllotaxis or phyllotaxy is the arrangement of leaves on a plant stem. Phyllotactic spirals form a distinctive class of patterns in nature.

In fact, this is a kind of sound visualizer. Phyllotaxis pattern-shaped holes in the speaker are bouncing balls that react to amplitude and frequency of sound.

Amplitude of sound affects diameter of bouncing-trigger factor. Meanwhile, frequency of sound affects position (or direction from centroid of speaker) of the factor.

p5.js
Jan 16, 2018

Particle Speaker  — Sound Visualizer Study


run on gitlab ︎


This work is a kind of homage to Matthias Müller's facinating 3D audio visualizer built with 3ds Max / Krakatoa / Fumefx / After Effect.

Because this is based on webgl, this does not perform as powerful as Matthias's work, but this has the advantage of being implemented in real time on the Internet.

You can modify the visualizer or play / pause the background audio with GUI. Also, you can 3D orbit the viewport, and by clicking "restCamera" button, swich to original viewport.

three.js
Jan 05, 2018





Dot Wave


run on gitlab ︎


p5.js
Dec 17, 2018





Dot Font


run on gitlab ︎


You can write own word.

p5.js
Dec 05, 2017




Dot Metaball


run on gitlab ︎


p5.js
Apr 20, 2018




Fluffy Noise


run on gitlab ︎


p5.js
Jul 12, 2018




Flow Noise


run on gitlab ︎


p5.js
Apr 02, 2018





Color Gradation


run on gitlab ︎


p5.js
Apr 17, 2018




Disruption of Circle


run on gitlab ︎


p5.js
Mar 29, 2018




Emerging 3D Noise


run on gitlab ︎


p5.js
Apr 16, 2018




Water Ripple


run on gitlab ︎


p5.js
Dec 12, 2017




Matisse, Icarus


run on gitlab ︎


Henri Matisse, 1947, Icarus. 
Plate VIII from the illustrated book <Jazz>.

p5.js
Mar 15, 2018




Magritte, Golconda


run on gitlab ︎


Rene Magritte, 1953, Golconda.

p5.js
Mar 10, 2018




Tracking Face with Bubbles


run on gitlab ︎


︎ Webcam and chrome browser needed.

clmtrackr.js
Mar 12, 2018




Mario Eats Mushroom


run on gitlab ︎


︎ Keyboard needed.
You can play game with arrow key ︎︎.

clmtrackr.js
Apr 11, 2018





Card Fall


run on gitlab ︎


Ending simulation of MS card game <Solitaire>.

p5.js
Sep 29, 2017




Color Dot Webcam


run on gitlab ︎


︎ Webcam and chrome browser needed.

p5.js
Dec 06, 2017