Thursday, March 14, 2013

Hello World! Processing with Handwritten Fonts

This post will be a record of some fun I've been having with Processing, using fonts from Family Typeface project.
Fort those who don't know what Processing is, it is:
Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks.
(via Wikipedia)

Processing.js uses JavaScript to allow Processing to be viewed on Web browsers. HOWEVER dealing with font files with Processing.js seems to get complicated (alsoko: Using custom fonts with processing.js) so I'm skipping that for now. I'm just gonna demonstrate it using screengrabs here. Any Processing.js font use tip is appreciated. The alsoko link above was a good read actually, tells useful things like it's better to use a .ttf files (of which I wasn't doing).

Any how, here are few directions that I've been trying:



1) Outputting using all fonts

When you have so many fonts, manually changing them is a pain in ass. Hence employing an automated process becomes greatly helpful.
Displaying “Hello!” in sequence of otf files turned out to be surprisingly easy.
What, on the other hand, turned out to be difficult was creating line breaks when each column reaches the height. I cheated by doing math myself and manually specifying the values for when to line break. That's sort of ridiculous and the code gets ugly as you can see bellow. Naturally, I need to find a better way of doing this, but this whole process of testing and figuring out things by myself is a part of the learning curve so it's all good (and fun).


2) Random font

Everytime you click the window, different font is being used:
It shades slowly so different typefaces overlap.
This code is pretty straight:


3) Type and random font

A variation from the idea above–when screen is being clicked, it changes the font. Difference is that instead of having a preset text, users can type in whatever text they want to display.
I used Andreas Schlegel's Control IP5 library for the textfield.
This has a lot of potential, me thinks.



For now things are basic but I'm hoping to build from those ideas. If this develops into some cool collision of analogue and digital, that would be super exciting.

プログラミングって数学ですねー。少なくともわたしのやろうとしている範囲の表現では、高度な数学を知っていることよりも、中学レベルの数学を「完璧」に出来るということが重要な気がします。なかなか自分の思ったようにいかないのが悔しいけれど、証明問題を解く感覚に似ていて楽しい。中高のとき、証明問題を解くの好きだったことを思い出します。
そういう意味では、本性的に向いている気もするし、細かい集中力に欠けていたりしてあまり向いていない気もしたり。どちらにせよ、もっとコードを使って表現出来るようになりたいです。