Work    Feed    Blog    About    Contact





FEED


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




Crop and Drag


run on gitlab ︎

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.

three.js, verb.js
Jun 19, 2020




HEAVY is Snake ~~~


run on gitlab ︎

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




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