Typophile

Type Controller

Joshua_Koomen

Hello all interested readers,

I've been working on a script, build in Processing Java, that enables me to draw lines on another line. I created a "skeleton" as a typeface in XY-code. These lines will connect other lines that will give some sort of weight to the shapes.

Visual example of the story I am telling above this line:

Through a device that I build I can send values (from 0 till 1023 because of the 10k system) to my serial port (USB). I attached 4 potentiometers to my IO-board that I will use to remodel the shapes I show above. I also have a red button to make a tiff file.

here's a small preview of that device I built:

I programmed the software to give the shorter lines, as you can see at the top of this topic, an variable angle. This angle is based on the input of the potentiometers. I can also make the lines larger so that it creates a bolder version.

I just drag one end of the line and change the XY-position. This wil result in: changing the angle and the total lenght of the line itself.

I also wanted to program an italic function for the whole letter. I didn't want to just angle the entire shape, I wanted to make a "good" italic.

It took me some math skills, and a lot of time to program it. I also connected the value of a potentiometer to the italic function, so you can shape it all by turning the knobs.

*No keyboard or mouse involved, except for typing your texts*

I also managed to let the serifs "shrink" as the italic kicks in.

Italics:

The results:

I hope that this topic will generate a discussion that will help me to expand the functions.

Joshua_Koomen

Here's the code that explains why the 'a' changes when it's slanted/italic...

void draw_a () {

sensorValue = arduino.analogRead(sensorPin); // reads the knob
int range = ((sensorValue)/19); // range for the italic function

if (range > 20) { // if the range is greater then 20, then the shape should be like this

int y;
y = 100 - range; // 100 is x height

rLine( 20 , 100 , 70+ range*(100-y)/60 , y );
rLine( 20+range , 40 , 20 , 100 ); //range is controlled by knob
rLine( 20+range , 40 , 70+range , 40 ); //range is controlled by knob
rLine( 70+range , 40 , 70 , 100 ); //range is controlled by knob
rLine( 70 , 100 , 80 , 100 );

translate(spacing+11, 0);
}

if (range < 20) { // if the range is lower then 20, then the shape should be like this

// now the xy coordinates to make the letter

rLine( 20+range , 40 , 70+range , 40 ); //range is controlled by knob
rLine( 20+range/2 , 70 , 70+range/2 , 70 ); //range is controlled by knob
rLine( 20 , 100 , 80 , 100 );
rLine( 70+range , 40 , 70 , 100 ); //range is controlled by knob
rLine( 20+range/2 , 70 , 20 , 100 ); //range is controlled by knob

translate(spacing+11, 0); // spacing system

}

}

Theunis de Jong

Hey, nice gadget!
(Can't help thinking a pure software/mouse version would be easier, but then it wouldn't be as much fun.)

Can we expect a Wii version soon? Make Font Creation a game for the masses!

Joshua_Koomen

Theunis,

Yes, I realise that a pure software/mouse version would be easier, but I must admit, I love to build installations.

That Wii version is a good idea... it makes me want to look for possibilities (I'm sure I can hack a Wii-mote for input).

I'm using an Arduino IO-board for controlling the electronics. There are several tutorials about hacking the Wii-mote for use in an Arduino installation.

Kottis

I don't understand any of the technical stuff, but that thing is seriously cool! As for expanding the functions, how about some general size knobs (height, width), colour knob, rotation knob (so you can make a rotalic). If you could make different sizes of type in different colours, this would be a neat way to produce flyers or posters etc.

aluminum

I love the analog dials controlling the digital creation. It's like an old mixing board for type.

Joshua_Koomen

- As for expanding the functions, how about some general size knobs (height, width), colour knob, rotation knob (so you can make a rotalic). If you could make different sizes of type in different colours, this would be a neat way to produce flyers or posters etc. -

Hello Kottis,

Yes it would be nice to build in a height and width function. I already thought about colour and rotation, but I don't want to make a "design machine" of it. I think colour could be fun, but rotation is, for my taste, a bit to much.

When I push the red button the scripts writes a vector PDF of the typed and modelled letters. So I can do advanced tricks in Indesign/Illustrator with the letters.

Thanks for the suggestions.

Hrant H Papazian

http://en.wikipedia.org/wiki/GRASS_%28programming_language%29

hhp

Bruno Bruno

I am not sure how you input the skeleton, (Looks like hard coding points) but it seems quite possible to do curves.

Bruno Bruno

And I love your italic idea, (to generate an italic from a roman)!

I do have a question about that: Is the top of the italic a still a combination of two lines overlapping each other, because your skeleton still has three "horizontal" lines?

Joshua_Koomen

Bruno - Is the top of the italic a still a combination of two lines overlapping each other, because your skeleton still has three "horizontal" lines? -

All I do is lower (or rise) one end of the line when I turn the knob. I programmed the lines so that there's always a connection between the lines. So when you make an italic, the lines stick together, thanks to this line of code:

y = 100 - range; // 100 is x height

rLine( 20 , 100 , 70+ range*(100-y)/60 , y );
rLine( 20+range , 40 , 20 , 100 ); //range is controlled by knob
rLine( 20+range , 40 , 70+range , 40 ); //range is controlled by knob
rLine( 70+range , 40 , 70 , 100 ); //range is controlled by knob
rLine( 70 , 100 , 80 , 100 );

If you draw it on a, for example, grid paper you will see the appearing of an 'a'. The range part will change the values by adding up.

Example:

70+ range*(100-y)/60 , y )

=

70+ 59*(100-y)/60, y // 59 will be the range data.

I hope I answered your question correctly.

Thanks for your input.

Captured from web.archive.org on 14 Feb 2010. view this capture