New to Typophile? Accounts are free, and easy to set up.
Type Controller
Posted by Joshua_Koomen in
11 Feb 2010 — 7:26am
11 Feb 2010 — 7:26am
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.
User login
Support our Sponsors
11 Feb 2010 — 7:54am
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
}
}
11 Feb 2010 — 8:24am
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!
11 Feb 2010 — 8:38am
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.
11 Feb 2010 — 8:41am
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.
11 Feb 2010 — 8:41am
I love the analog dials controlling the digital creation. It's like an old mixing board for type.
11 Feb 2010 — 8:58am
- 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.
11 Feb 2010 — 4:45pm
http://en.wikipedia.org/wiki/GRASS_%28programming_language%29
hhp
11 Feb 2010 — 5:38pm
I am not sure how you input the skeleton, (Looks like hard coding points) but it seems quite possible to do curves.
11 Feb 2010 — 5:45pm
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?
12 Feb 2010 — 12:29am
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.
15 Mar 2010 — 2:40am
*UPDATE*
I released a web based version on http://www.haagseletters.nl.
15 Mar 2010 — 6:51am
Very cool!