No edit summary |
(update source, add links to openprocessing) |
||
Line 26: | Line 26: | ||
==== Source Code ==== | ==== Source Code ==== | ||
Here is the source for our little "J" example. | |||
You can also find it [http://openprocessing.org/sketch/226349 here] and in the [http://www.openprocessing.org/classroom/25077 Wild Type Class Room] ''OpenProcessing''. | |||
<source lang="java"> | <source lang="java"> | ||
//////////////////////////////////////////////////////// | |||
// // | |||
// 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() { | void setup() { | ||
size(400, 400); | size(400, 400); | ||
noFill(); | noFill(); | ||
} | } | ||
void draw() { | void draw() { | ||
int gap = | int gap = 60; | ||
int pos = | int pos = 250; | ||
int maxheight = | int maxheight = 320; | ||
int thickness = | int thickness = 20; | ||
int dx = | int dx = 120; | ||
int dy = | int dy = 120; | ||
background(0); | background(0); | ||
stroke(255); | stroke(255); | ||
Line 49: | Line 65: | ||
} | } | ||
</source> | </source> | ||
Line 59: | Line 76: | ||
# Pick a letter from the alphabet and create your own parametric letter | # Pick a letter from the alphabet and create your own parametric letter | ||
# Put the source code and a screen shot onto your user page for this course | # Put the source code and a screen shot onto your user page for this course | ||
== Links == | |||
* [http://www.openprocessing.org/classroom/25077 Wild Type Class Room] |
Revision as of 13:56, 27 October 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.
Screenshot
to be done
Source Code
Here is the source for our little "J" example. You can also find it 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
to be done
Homework
- Pick a letter from the alphabet and create your own parametric letter
- Put the source code and a screen shot onto your user page for this course