Filed Under #computationaltypo

Final: Filter with Manga Text

alt text 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

alt text I chose to focus on the white text bubbles and floating text that’s used for sound effects and asides.

I used Wild Words and Augie fonts.


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. alt text

alt text alt text

alt text

alt text

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.

link to github repo

try the demo here

Written on December 12, 2018

Interactive Meme

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.

View this post on Instagram

A post shared by INSTAHO MEMEQUEEN HYBRID (@ada.wrong) on

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.

link to p5 sketch

Written on December 5, 2018

Fonts as Data: Tattoo Type Generator

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.

View this post on Instagram

A post shared by Toronto @SevenEightTattoo (@notcoolneverwas) on

View this post on Instagram

A post shared by Toronto @SevenEightTattoo (@notcoolneverwas) on

I used a free medival style font and offseted the lines and quadratic curves. I based my code off of an example by Allison.

alt text

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.

link to p5 sketch

alt text

Written on November 28, 2018

Asemic Writing Teachable Machine

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.

alt text

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:

  • writing strokes
  • long writing strokes
  • spaces
  • new line and carriage return

Each of these actions correspond to a gesture that can be set by the user. The image classification code is based off of this ml5 example of KNN Classification on Webcam Images with mobileNet.

ml5 KNN Classifier documentation

my github repo with code

live demo

Some outputs: alt text !alt text !alt text !alt text

Written on November 7, 2018