Soni Hahn is a multidisciplinary UX designer based in New York
menu_pattern.jpg

Akinori X Code

Akinori X Code

 
 

Akinori x Code

Dynamic pattern generator for Akinori Oishi's character


Overview

Role: UX / UI Design and Web Development
Individual Work for NYU ITP's "Printing Code" class taught by Rune Madsen
Fall 2015

Akinori X Code is a pattern generator that creates unique sets of patterns, inspired by character drawings of the artist Akinori Oishi.  A distinguishing feature of Akinori's artwork is that he manually draws hundreds of the same character repetitively with slight variations to make patterns on a larger scale. This fact proposed a good opportunity to do something fun with code while giving me the chance to study the principal of his drawings which I admire. So I set out  build a software to re-produce his patterns. 

Utilizing Rune.js and the Rune.Noise plug-in to add Perlin noise functions, I mimicked the look and feel of the organic hand-drawings. Each character contains unique strokes and the overall patterns are generative . Users can download their unique patterns in vector format (.svg) afterwards. 

 
Akinori drawing for Pictoplasma conference in 2014. Credit: Left ©Pictoplasma  / Right ©Stripburger

Akinori drawing for Pictoplasma conference in 2014. Credit: Left ©Pictoplasma  / Right ©Stripburger


Picking the right characters

Photos from Google image search

I studied all of Aki's characters and hand picked the ones that can most easily yet interestingly be re-created through code. Rune.js provides functions to form a shape using  paths, ellipses, and polygons, so to begin I chose the characters that were made up of the most primitive shapes then applied Perlin Noise to each stroke to give them life.


Generative Logo

 

The characters in the header act as a generative "logo" which is randomized every second.


Final Product

Users can choose specific characters to generate and can apply a gray or color mode. A  'Randomize' button will generate more patterns if wanted.  Afterwards, users can choose to download the patterns as an .SVG file. 

pattern1.gif