You can take a look at shared links and remix or learn something new from it. By the way, don’t hesitate to share your creations with me. #OpenDesign
You can take a look at shared links and remix or learn something new from it. By the way, don’t hesitate to share your creations with me. #OpenDesign
Draw with body parts like a princess.
I was developing my third experiment where font changes size based on human’s position in front of a screen. There was a little detail — drawn eyes followed person’s eyes movement.
How does it work? A canvas is used for drawing elements. It drew eyes every second using eye positions from camera, then it clears the canvas and repeats these actions.
Drrrrraw-clear-draw-clear-draw-clear.
Accidentally, I deleted a code line that clears the canvas and got a beautiful art with repeating eyes:
I don't know haha.
Princess Parts is about acid colors, Windows XP and grunge aesthetic.
I was influenced by brand Lime Crime, especially, their VENUS collections. This influence gave me an idea of grunge style and a motto “We live in time of grunge princesses”.
What is grunge for me? It’s neon, acid colors, something bright and dark, seasoned well with a little piece of Tumblr aesthetic. To be honest, I finally understood it after I almost finish working on the experiment.
There is what is grunge:
#52FF00 and #FF66D4 were picked randomly. Colors #FF00D5 and #FF0000 were gotten in experiments with filters.
There is what inspired me:
These Windows XP windows reminded me about my first game for Android tablets.
Oh, I made it in 2016!
I didn’t know about design and tried to design a start screen where you see a name of the game and can press start button. I was inspired by seapunk. There are my “designs”.
By the way, I didn’t know about design tools and made these windows on my tablet using a lot of glitch editor apps.
For Princess Parts, I wanted to pick something cursive, but bold. Lobster was great for this.
There are fonts I wanted to use for buttons and windows:
I had 5 ideas for brushes:
I combined Rococo arts with words.
By the way, the idea “words like “right knee”, “left eye”” reminds me about my art is called “Verbal portrait of a beautiful human” (in Russian “Словесный портрет красивого человека”).
The human on the picture is drawn with words (names of body parts). There are no shapes, no faces, no personality. And you have an ability to imagine this ideal human in your mind, because everyone has their own ideal of beauty and will imagine something unique.
TensorFlow.js PoseNet model detects princess body parts ＜3
p5.js helps to work with canvas and camera
ml5.js for easy work with PoseNet
Cool guide how to work with everything above if you don't know
To define features, I brainstormed possible ideas for art creation. In a middle of the process, I felt stuck a bit and decided to create a prototype and conduct a small research which features other editors for drawing provide. I didn’t finish the research, because a creation of a prototype was more effective.
Idea generation:
Prototype picture:
After I finish it, I went into human’s drawing process and made an HJM (UJM) for drawing with idea selection.
I wanted to avoid giving users too much unnecessary choice.
So, I defined three stages of drawing: when a human starts to do it, when he is in process, and when he stops doing it. Then I defined basic functions that are needed for these three stages.
Maybe, this question seems a bit insignificant, but it’s not. There are possible solutions I came up with:
The second idea is the best. (By the way, it minimize amount of choices.)
The answer is obvious — I need to give an ability to draw with all brushes at moment.
I even made a not funny meme about a situation might be if there would be an ability to draw only with one body part at moment.
TensowFlow detects: nose, eyes, ears, shoulders, elbows, wrists, hips, knees and ankles.
Initially, I wanted to use hands, eyes, knees and ankles. Because these parts of body won’t be in camera view at one moment (except of cases when a human wants to draw with a few brushes).
BUT THEN!! I got an idea that a human can draw with chest! Also, in process, I decided to remove ankles from the list, because they are detected awry.
Brushes are eyes, hands, chest, and knees.
That’s math issues (not only biology). Only shoulders positions are needed for this. If you want take a look how it is implemented in code, you can find it on 116th code line (public/posenet.js).
My drafts:
I love playing with filtres and initially, I wanted arts to look like this:
But, fortunately, it was impossible in my case. I cried a bit because of that (no, I didn’t) and started experimenting with filters in p5.js. You can take a look on all experiments with filters and code on “arts and experiments” page on Figma file.
The art on the background is the first thing I created after I started work on this experiment. I made it and picked colors randomly. The same art (but inverted) was put on the process screen.
Problem: TensorFlow needs time to load. A human can suppose nothing is working while loading.
Solution: show loading process.
Initially, I wanted to make a progress bar with stars in a window. But then I got an idea green matrix is much better than window. I spent some time on CodePen to try examples of green matrix and use something in code. But matrix implementation was a bit difficult, because significant portion of code are needed to be changed. And I’m determined to make it easier using CSS animation.
There is a list of things I was going to place on the draw screen:
Sharing on Twitter and coping a picture weren’t realised because of coding issues. For the first feature, Twitter API and authentication were required, it’s a bit problem. Also, I couldn’t make coping a picture (if I understood correctly it’s impossible).
I used the same pink navigation window as on the main screen, but with red close button. Also, I got an interesting bug stroke near the “home” button. I wanted to get rid of this stroke, but I didn’t know how to do this and it looked cool.
There are how navigation window could be:
Also, you might like my other experiments:
Fix Posture — detects your posture and blurs a screen if it’s poor. Made with TensorFlow.js PoseNet model, ml5.js and p5.js.
Make me big — changes font based on your position in front of your computer. Made with TensorFlow.js PoseNet model, ml5.js and p5.js.
Smile and like — a fictional social network where you need smile to like something. Made with face-api.js.
Mood-AI-Design — changes design based on your emotions. Made with face-api.js.