Replicating Art With JS

Today I found this photo of a beautiful painting, and after some research I was able to identify name and author:

YAYOI KUSAMA

Infinity-Dots [HOFS], 2014

Acrylic on canvas

130.3 x 97 cm

(btw please check out her other work from same collection, wicked!)

It looks really nice, and more importantly, it looks like something that could be replicated using Javascript.

I spent some time looking at it, and decided to use simplest approach – some kind of sine function with slight modifications. As for the library, i decided to go with plain old JS.



Details

First, lets take a closer look at the details of the picture it self.



We can notice few things:

Circles are not perfect

They have border

The smaller they get the more distorted they are.

This picture might strike you as an “easy” reproduction, but its not. Take a look at all those fine dots, they don’t overlap at any point.

And even that it looks like that there is main pattern of sine-like-waves, its quite more likely that the artist was doing vertical stripes of largest dots, and then just patiently filled in the rest (my theory, i might be completely wrong). I did few initial tests, and it was clear to me that to achieve near-perfect replication one would have to introduce some kind of hit-test, or to preserve position of previously drawn dots.

I didn’t want to do such thing, i wanted to have something as similar as i can, using only simple commands, and plain JS.

Results

I started work, and tried some simple approaches, here are some results



First naive attempt, simple sine function.

It clearly didn’t work in next attempt i tried to not overlap circles, but gaps were too big:

In next few shots i tried to experiment with spacing, and just watching not to overlap circles:

Better results, but still not near original.

Finally, with a little bit more tweaking, this is what i got:

Not perfect, but close enough, with code only.

This was really fun experiment, and even though i didn’t get to replicate picture in full detail, it was quite impressive to see that you could produce some really nice looking graphics with just few lines of code. On our case, this was all the code necessary to produce final image:

Complete source code for this example.

Also click here for Live Demo.

This was hell of an journey. Next time I will pick some different (but equally challenging) piece and try to do the same thing.

Artist:

Yayoi Kusama [wikipedia]

Yayoyi Kusama [other works]

Yayoi Kusama [Google Images]

Author: Dragan Bajcic

Twitter: @kodisha

Update:

User blackle left WAY better implementation in the comments, her results are even better!



Nice!

You can see her demo here.