I made a selfie filter that adjusts a photo with style transfer and poseNet. The filter is exaggerated and influenced by anime style, similar to filter apps like Meitu app.
This is a continuation of my final for Machine Learning for the Web. I added options for users to add their own text overlays inspired by typesetting used in Shoujo manga.
Typesetting in Manga
I’m interested in the relationship between text and images in comics. For this project, I used conventions used in Shoujo manga (Japanese comics aimed for young girl audiences) because it is so nostalgic for me. Although originally, the text would be Japanese and thus the typesetting would be based on the Japanese language, there is now standards for manga translations to English. These are used by fan translation groups as well as official US print releases. I found this reddit thread that has collected references to different fonts and typesetting conventions.
A good manga translation typesetting guide
Visual Inspiration
I chose to focus on the white text bubbles and floating text that’s used for sound effects and asides.
Users can type what they want to be in text bubbles or sound effects in comma separated strings. Users click on the canvas to add text bubbles. The sound effects are placed randomly based on points of eyes from PoseNet.
To do
I want users to be able to upload their own photos and download the result.
I’m interested in if animating the text would add anything.
Also, the webpage needs to be cleaned up and made to look nicer.
My sketch #5 is also my prototype for my final idea. I want to create interactive memes with p5. My goal is to create at least 4 for next week.
I chose memes because they are kind of like typesetting on a page. The font and spacing of the text add to the meaning and humor of the meme. It also interplays with images and type conventions.
For this test, I recreated an old meme I made with Photoshop in 2017.
In the p5 version, the text animates when the mouse hovers over the image. This was mainly a test to see if I can translate a static image to animated text. However, I would like to experiment more with revealing the humor of a meme using the interactive capabilities of javascript.
I was inspired by the work of a tattoo artist, notcoolneverwas. This artist often deconstructs a sharp medival style font into strokes and a more loose/sketchy style.
The final result I got was not exactly like the reference images. But I think the sketchy and scribbly elements fit the style of the artist’s work. I don’t fully understand the different types of paths and when they are called (part of opentype.js library), but it was interesting to explore this library.
I combined assignments from Computational Approaches to Typography and Machine Learning for the Web. For this project, I made an asemic writing generator that responds to user-set gestures.
I was inspired by this work by Cecil Touchon. I wanted to experiment with writing the ‘text’ in a pleasing graphic layout.
I broke down the asemic text generation into 4 elements:
I made a selfie filter that adjusts a photo with style transfer and poseNet. The filter is exaggerated and influenced by anime style, similar to filter apps like Meitu app.
This is a continuation of my final for Machine Learning for the Web. I added options for users to add their own text overlays inspired by typesetting used in Shoujo manga.
I chose to focus on the white text bubbles and floating text that’s used for sound effects and asides.
