(add link for source-code and a photo) |
No edit summary |
||
(9 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
For the first homework I created the capital letter R in Processing and named my variables <br> | For the first homework I created the capital letter R in Processing and named my variables <br> | ||
by the guidelines of the [http://typedia.com/learn/only/anatomy-of-a-typeface/ Anatomy of Typeface]. | by the guidelines of the [http://typedia.com/learn/only/anatomy-of-a-typeface/ Anatomy of Typeface]. | ||
Code can be viewed on [http://www.openprocessing.org/sketch/226645 OpenProcessing] | Code can be viewed on [http://www.openprocessing.org/sketch/226645 OpenProcessing]. | ||
[[Image:parametric-r.png|thumb|left|150px]] | [[Image:parametric-r.png|thumb|left|150px]] | ||
Line 16: | Line 16: | ||
The lower-case letters are a bit thinner than the upper-case ones, but got the same shape. <br> | The lower-case letters are a bit thinner than the upper-case ones, but got the same shape. <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
== TRANSFORM A FONT == | == TRANSFORM A FONT == | ||
'' | For transforming the font we imported with the library Fontastic, we had to use Geomerative. I've decided to display the points of a letters <br> as strokes and triangles and dissort them on the y-axis. Finally we had to export the transformed font with Fontastic, but I didn't get it right. <br> Maybe I'll invest some more time soon, to fix this... Temporary code [http://www.openprocessing.org/sketch/337897 here]. <br> | ||
[[Image:geomerative-first.png|thumb|left|370px]] | |||
[[Image:geomerative-second.png|thumb|left|370px]] | |||
<br style="clear:both;"> | |||
[[Image:triangles-first.png|thumb|left|370px]] | |||
[[Image:triangles-secons.png|thumb|left|370px]] | |||
<br style="clear:both;"> | |||
== ANIMATED LETTER == | == ANIMATED LETTER == | ||
Line 44: | Line 46: | ||
Our task was, to explore DrawBot and create a few designs by arranging glyphs or typography in an interesting way. | Our task was, to explore DrawBot and create a few designs by arranging glyphs or typography in an interesting way. | ||
[[Image:drawbot_1.png|thumb|left| | [[Image:drawbot_1.png|thumb|left|170px]] | ||
[[Image:drawbot_2.png|thumb|left| | [[Image:drawbot_2.png|thumb|left|170px]] | ||
[[Image:drawbot_3.png|thumb|left| | [[Image:drawbot_3.png|thumb|left|170px]] | ||
[[Image:drawbot_4.png|thumb|left| | [[Image:drawbot_4.png|thumb|left|170px]] | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 98: | Line 100: | ||
[[Image:letter-d.png|thumb|left|170px]] | [[Image:letter-d.png|thumb|left|170px]] | ||
[[Image:letter-e.png|thumb|left|170px]] | [[Image:letter-e.png|thumb|left|170px]] | ||
<br style="clear:both;"> | |||
== [https://www.uni-weimar.de/medien/wiki/GMU:Wild_Type/Jessica_Hüttig/ParticleHarshType Click here to see my final project.] == |
Latest revision as of 16:36, 15 September 2017
This is the »Wild Type« page of — Jessica Hüttig
PARAMETRIC LETTER
For the first homework I created the capital letter R in Processing and named my variables
by the guidelines of the Anatomy of Typeface.
Code can be viewed on OpenProcessing.
TYPOGRAPHIC SYSTEM
Our task was to create a typographic system from scratch using the Fontastic library and export it as a TrueType-Font.
The characteristic of my font is inspired by the cross stitch and the zigzag stitch, therefore I named it Stitchfont.
I've used the X, /, \ to imitate a stitching pattern and converted my analogue sketch into code.
The lower-case letters are a bit thinner than the upper-case ones, but got the same shape.
TRANSFORM A FONT
For transforming the font we imported with the library Fontastic, we had to use Geomerative. I've decided to display the points of a letters
as strokes and triangles and dissort them on the y-axis. Finally we had to export the transformed font with Fontastic, but I didn't get it right.
Maybe I'll invest some more time soon, to fix this... Temporary code here.
ANIMATED LETTER
Simple H, animated with the Ani library, that turns into a house when you press the mouse
and will be destroyed when you press the key 'd'.
Code can be viewed on OpenProcessing
EXAMPLES CREATED WITH DRAWBOT
We had a nice workshop, where we had been introduced in DrawBot and RoboFont.
Our task was, to explore DrawBot and create a few designs by arranging glyphs or typography in an interesting way.
WRITING SYSTEM
Yay, just another geometric alphabet, that I created in RoboFont.
The idea was, to rotate every letter 90 degrees clockwise and to simplify them into filled geometric forms, like triangles and squares.
If the letter has a Counter, I tried to show this with a gap inside the geometric form or between two geometric forms of one letter.
I actually created only upper-case letters, but for the Kafgenstein-example in Processing, I used the same forms for the lower-case ones.
Otherwise you would only see the first character of a noun. Missing punctuation characters are unfortunately displayed as unfilled rectangles.
Take a look at the pretty pictures. ;)
for better resolution: File:Kafgenstein geometric.pdf
3D ALPHABET
A few glyphs of my geometric alphabet turned into 3D!
I modeled some glyphs in Blender to type »WILD TYPE« and displayed them in Processing using the PeasyCam-library.
I modified the basic-code, because in some way it didn't worked well for me. Code can be viewed on OpenProcessing.
OCR FONTS
Our task was to create a Glyph-Recognition App, that recognizes our grid-based created glyphs and provides us with visual feedback.
I used Photoshop for creating my letters and the NyARToolkit, especially the PNG-Marker example as a basis for my code, changed it a bit
and added some ambient light. If the camera recognizes a glyph, it displays the related letter from my 3D alphabet as visual feedback.
Take a look at the code.