Generative art always fascinated me. Literally, it’s a combination of numbers that code uses to create beautiful pictures. But which numbers?

1, 2, 3, 4, 5,..

Numbers can be random, it can depend on the date, times of the day, stars, a number you imagined, etc. But what if your body will be used as an input? What if your body will create art?

Just imagine how you dance, and your dance creates art…

Is it possible? It’s possible with Disco Dance.

To make it, I used TensorFlow.js MoveNet library that detects the human body and returns the positions of body parts as output. IT RETURNS NUMBERS.

Numbers create art.

I was thinking about how it could be implemented in art: it could be an animated 3d character, static image art, animated generative art, ASCII art, mathematical operations. There are a lot of possibilities of how to use these numbers, but I decided I want to immortalize the moment of how you dance in a minimalistic way on the blockchain.

This is how the idea of Disco Dance was created.

#OpenDesign overview

🌙 Project

🍄 Technology I used

🪐 Tutorials that helped me

💅🏻 Art style

Actually, I tried to find art style for a long time. I drew sketches, experimented with code, but I liked anything. So, I decided to choose simple art made of lines and ellipses for this version because the main thing for me is to show the idea and no matter of how it looks. Simple art brings some benefits: 1) it will be rendered well on most devices, 2) simple art is chipper gas price, 3) simplicity of the art is the best for HTML aesthetic.

There are some sketches:

💘 Moodboard

Which associations do come to your mind when you think about “Disco Dance”?
I think about neon colors, something dark, night, pink, red lights...

What does come to your mind when you think about html and blockchain?
Pixels, ASCII art, array of numbers for me.

Which of all these things have been implemented in Disco Dance?
Nothing haha.

But I would like to work on it, I have some ideas. (:

My inspiration:

🍃 UX/UI and design

User Journey Map

Site Map

Sketches

This is how design could have looked like

Little design details

Japanese

I’m a big fan of the Japanese culture and learned this language in the past. I like using Japanese letters in design and combine it with different languages because it creates a unique style.

Acid green graffiti

It’s my artist’s signature. It reads like “monolesan”. I just felt that design needs something green and informal. I drew it here.

Font

I was blessed when I was lucky to find Road Rage font, it happened accidentally when I wanted to set Roboto font. It suits my green logo graffiti very well, and I also like its description given by author “Road Rage is a return to the days of grunge” because this is what I am aiming to show in my work.

🍣 Artificial Intelligence

I used TensorfFlow.js Move Net library which allows detecting human body parts in real time.

I allow a user to dance for a few seconds (it’s 100 frames). As a result, I receive 17 keypoints for each body part 100 times. 17*100 = 1700 numbers. 1700 gives smooth animation. But I prefer something raw, so I save 17 keypoints 50 times by reducing every second frame. 17*50 = 850 numbers. 850 gives abrupt animation.

🌚 Contract

Writing the contract was the most difficult part of this project. Initially, I made (and even minted) the contract that saves all art code and data with numbers to the blockchain directly. This is how it worked:

But I didn’t estimate the gas price for minting an art. It was too high! The cost ranged from 0.15eth to 0.2eth. The formula of how to estimate the gas price:

Cost = Amount of Gas Consumed x Gas Price


Store html file (base64 format) to the blockchain:

Cost = 9.1M x 17 Gwei = 154M Gwei = 0.154 ETH


And I found a great way to reduce the gas cost — just upload art to IPFS. It minimized the price from 0.154eth to 0.002eth, because the contract saves just an ipfs link with a json file.


Store IPFS link to the blockchain:

Cost = 0.151M x 17 Gwei = 2.56M Gwei = 0.002 ETH


Of course, it depends on the current gas price, but anyway, now it’s much better.

💚 What I would like to add in the future

I would like to continue working on this project and develop fancier art and add generative music to create the real disco.

If you would like to contribute to this project or just want to say hi, text me xoxo@monolesan.com

Thanks for reading.