(update source, add links to openprocessing) |
No edit summary |
||
(10 intermediate revisions by the same user not shown) | |||
Line 16: | Line 16: | ||
=== Letter J example === | === Letter J example === | ||
[[Image:wild-type-screenshot-1.png|thumb|left|150px]] | |||
<br style="clear:both;"> | |||
* This is an example of a parametric `J` for Processing 3.0. | * This is an example of a parametric `J` for Processing 3.0. | ||
Line 21: | Line 25: | ||
* `tweak` the sketch to play with the parameters. | * `tweak` the sketch to play with the parameters. | ||
=== | === Source Code === | ||
You can also find the source code [http://openprocessing.org/sketch/226349 here] and in the [http://www.openprocessing.org/classroom/25077 Wild Type Class Room] ''OpenProcessing''. | |||
You can also find | |||
Line 70: | Line 69: | ||
== Examples == | == Examples == | ||
' | * [https://en.wikipedia.org/wiki/Metafont Don Knuth's Metafont] (TeX) | ||
* [http://robmeek.com/project/meek-fm/ MeekFM] (Font Synthesizer) | |||
* [http://https://www.prototypo.io/ Prototypo] (Open Source) | |||
* [https://www.youtube.com/watch?v=bcUo9ULvVq4 Project Faces] (Adobe) | |||
== Homework == | == Homework == | ||
# Pick a letter from the alphabet and create your own parametric letter | # Pick a letter from the alphabet and create your own parametric letter | ||
# | # Upload the sketch to OpenProcessing and add it to our class room | ||
# Add a screen shot to your wild-type wiki user page for this course | |||
== Links == | == Links == | ||
* [http://www.openprocessing.org/classroom/25077 Wild Type Class Room] | * [http://www.openprocessing.org/classroom/25077 Wild Type Class Room] | ||
= Generating Fonts = | |||
In this class we learn how to: | |||
* Create your own TTF and Web fonts from scratch using the ''Fontastic'' library. | |||
* Import TTF fonts into Processing using ''Geomerative'' library. | |||
== Homework 2 == | |||
Finish the task you have been working on:<br> | |||
'''Create a simple typographic system from scratch''' | |||
# Document your approach in the wiki | |||
# Create a true type font using the fontastic processing library | |||
# Publish the font file and screenshots on your page | |||
''Some things to keep in mind:'' | |||
* Don't stick to the forms of the letters, think abstract! | |||
* Think about compound glyphs, as in the pie chart font example | |||
* Look at the [[Schrift#Exotische_Schriften|Exotic Writing Systems]] for inspiration | |||
Your second task: | |||
'''Transform a font of your choice using both ''Geomerative'' and ''Fontastic''.''' | |||
# Import a true type font and get the outline using ''geomerative'' | |||
# Do something with the outline of each letter | |||
# Turn the result into a new font using ''fontastic'' | |||
# Publish the font file and screenshots on your wiki page | |||
''Some things to explore:'' | |||
* Look at the examples to figure out how to use the libraries | |||
* Think of a creative transformations! Here are some things you could do | |||
** geometric transformations (reflecting the letters) | |||
** sampling (creating a pixel font based on the original font) | |||
** messing with the outline | |||
** create an abstract glyph based on properties of the original letter | |||
** explore how far you can mutilate the original glyph, without destroying it | |||
== Links == | |||
* [http://www.ricardmarxer.com/geomerative/ Geomerative] | |||
* [http://code.andreaskoller.com/libraries/fontastic/ Fontastic] | |||
* [https://github.com/bitcraftlab/Principia-Textilica-Course/tree/master/04-notation-systems/demos/10PRINT 10PRINT Font] |
Latest revision as of 16:10, 24 November 2015
From Point to Line to Letter
Font Representation
Fonts can be represented as
- Raster Graphics or Pixel Graphics
- Vector-Graphics
- Outlines or Midlines
- Curves or Line Segments
- Circular Arcs or Bezier-Curves
What are the pros and cons of the various representations?
Parametric Letters
Letter J example
- This is an example of a parametric `J` for Processing 3.0.
- It uses midlines rather than the outlines to represent the letter
- `tweak` the sketch to play with the parameters.
Source Code
You can also find the source code here and in the Wild Type Class Room OpenProcessing.
////////////////////////////////////////////////////////
// //
// P A R A M E T R I C >> J << //
// //
////////////////////////////////////////////////////////
// This is a really simple example of parametric type design.
// HOMEWORK:
// Create your own parametric letter
void setup() {
size(400, 400);
noFill();
}
void draw() {
int gap = 60;
int pos = 250;
int maxheight = 320;
int thickness = 20;
int dx = 120;
int dy = 120;
background(0);
stroke(255);
strokeWeight(thickness);
line(pos, gap, pos, maxheight - gap);
arc(pos - dx/2, maxheight - gap, dx, dy, 0, PI);
}
Examples
- Don Knuth's Metafont (TeX)
- MeekFM (Font Synthesizer)
- Prototypo (Open Source)
- Project Faces (Adobe)
Homework
- Pick a letter from the alphabet and create your own parametric letter
- Upload the sketch to OpenProcessing and add it to our class room
- Add a screen shot to your wild-type wiki user page for this course
Links
Generating Fonts
In this class we learn how to:
- Create your own TTF and Web fonts from scratch using the Fontastic library.
- Import TTF fonts into Processing using Geomerative library.
Homework 2
Finish the task you have been working on:
Create a simple typographic system from scratch
- Document your approach in the wiki
- Create a true type font using the fontastic processing library
- Publish the font file and screenshots on your page
Some things to keep in mind:
- Don't stick to the forms of the letters, think abstract!
- Think about compound glyphs, as in the pie chart font example
- Look at the Exotic Writing Systems for inspiration
Your second task:
Transform a font of your choice using both Geomerative and Fontastic.
- Import a true type font and get the outline using geomerative
- Do something with the outline of each letter
- Turn the result into a new font using fontastic
- Publish the font file and screenshots on your wiki page
Some things to explore:
- Look at the examples to figure out how to use the libraries
- Think of a creative transformations! Here are some things you could do
- geometric transformations (reflecting the letters)
- sampling (creating a pixel font based on the original font)
- messing with the outline
- create an abstract glyph based on properties of the original letter
- explore how far you can mutilate the original glyph, without destroying it