363
edits
m (→3D ALPHABET) |
No edit summary |
||
(35 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
== PARAMETRIC LETTER == | == PARAMETRIC LETTER == | ||
For the first homework I created the capital letter R in Processing | For the first homework I created the capital letter R in Processing and named my variables <br> | ||
Code can be viewed on [http://www.openprocessing.org/sketch/226645 OpenProcessing] <br> | 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]. | |||
[[Image:parametric-r.png|thumb|left|150px]] | |||
<br style="clear:both;"> | |||
== TYPOGRAPHIC SYSTEM == | |||
Our task was to create a typographic system from scratch using the Fontastic library and export it as a TrueType-Font. <br> | |||
The characteristic of my font is inspired by the [http://www.dmc-usa.com/Education/Technique-Overviews/Cross-Stitch/~/media/Media/Education/Technique%2031/Cross%20Stitch%20311/CF_PartialStitches_v3.ashx?h=305&w=400 cross stitch] and the [https://en.wikipedia.org/wiki/Zigzag_stitch zigzag stitch], therefore I named it ''Stitchfont''. <br> I've used the X, /, \ to imitate a stitching pattern and converted my [https://www.dropbox.com/s/bdo5w9jzle2o2c8/idee-stitched.png?dl=0 analogue sketch] into code. <br> | |||
The lower-case letters are a bit thinner than the upper-case ones, but got the same shape. <br> | |||
<br style="clear:both;"> | |||
== 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 == | ||
Simple H, animated with the Ani library, that turns into a house | 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'. <br> | |||
Code can be viewed on [http://www.openprocessing.org/sketch/247518 OpenProcessing] <br> | Code can be viewed on [http://www.openprocessing.org/sketch/247518 OpenProcessing] <br> | ||
Line 19: | Line 43: | ||
== EXAMPLES CREATED WITH DRAWBOT == | == EXAMPLES CREATED WITH DRAWBOT == | ||
[[Image:drawbot_1.png|thumb|left| | We had a nice workshop, where we had been introduced in [http://www.drawbot.com DrawBot] and [http://doc.robofont.com RoboFont]. <br> | ||
[[Image:drawbot_2.png|thumb|left| | Our task was, to explore DrawBot and create a few designs by arranging glyphs or typography in an interesting way. | ||
[[Image:drawbot_3.png|thumb|left| | |||
[[Image:drawbot_4.png|thumb|left| | [[Image:drawbot_1.png|thumb|left|170px]] | ||
[[Image:drawbot_2.png|thumb|left|170px]] | |||
[[Image:drawbot_3.png|thumb|left|170px]] | |||
[[Image:drawbot_4.png|thumb|left|170px]] | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 43: | Line 70: | ||
for better resolution: [[File:kafgenstein_geometric.pdf|thumb|left|150px]] | for better resolution: [[File:kafgenstein_geometric.pdf|thumb|left|150px]] | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 49: | Line 75: | ||
A few glyphs of my geometric alphabet turned into 3D! <br> | A few glyphs of my geometric alphabet turned into 3D! <br> | ||
I modeled some glyphs in Blender to type »WILD TYPE« and displayed them in Processing | I modeled some glyphs in Blender to type »WILD TYPE« and displayed them in Processing using the PeasyCam-library. <br> | ||
I modified the basic-code, because in some way it didn't worked well for me. Code can be viewed on [http://www.openprocessing.org/sketch/300725 OpenProcessing]. | I modified the basic-code, because in some way it didn't worked well for me. Code can be viewed on [http://www.openprocessing.org/sketch/300725 OpenProcessing]. | ||
Line 61: | Line 87: | ||
[[Image:typo-glitch-new.png|thumb|left|200px]] | [[Image:typo-glitch-new.png|thumb|left|200px]] | ||
[[Image:typoglitch-2.png|thumb|left|200px]] | [[Image:typoglitch-2.png|thumb|left|200px]] | ||
<br style="clear:both;"> | |||
== OCR FONTS == | |||
Our task was to create a Glyph-Recognition App, that recognizes our grid-based created glyphs and provides us with visual feedback. <br> I used Photoshop for creating my letters and the [http://nyatla.jp/nyartoolkit/wp/?page_id=166 NyARToolkit], especially the PNG-Marker example as a basis for my code, changed it a bit <br> and added some ambient light. If the camera recognizes a glyph, it displays the related letter from my 3D alphabet as visual feedback. <br> [http://www.openprocessing.org/sketch/303200 Take a look at the code]. | |||
[[Image:wide.png|thumb|left|400px]] | |||
<br style="clear:both;"> | |||
[[Image:letter-w.png|thumb|left|170px]] | |||
[[Image:letter-i.png|thumb|left|170px]] | |||
[[Image:letter-d.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.] == |
edits