We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Discussion › Exhibition › Designing Typefaces Using Processing.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Designing Typefaces Using Processing. (Read 2141 times)
Solomon
Designing Typefaces Using Processing.
Feb 8th, 2008, 6:24pm  
I am a 3rd year Graphic Design student at The Arts Institute at Bournemouth, and for my Final Major Project I am investigating the implications of Processing on Typography.

Inspired by the Reed Kram and Clemens Weisshaar partnership, who created a computer program to design furniture, I have decided to try to create a computer program to create a typeface.

Empowering my computer's imagination.

I have developed a code which places random lines and curves onto a page, and by running this code enough times I have created a typeface.

I'm a bit stuck, as I have no idea what I am doing.  This is the first time I have had to tackle computer coding and I was just wondering if anyone is doing anything similar.

Advice?

Cheers!

Solomon
Back to top
 
 
Jarl
Re: Designing Typefaces Using Processing.
Reply #1 - Feb 8th, 2008, 6:50pm  
Are you interested in enabling a user to create a font that they can then use in say, Illustrator or Word?
Back to top
 
 
fjen
Re: Designing Typefaces Using Processing.
Reply #2 - Feb 8th, 2008, 7:14pm  
i started to collect some a while ago:
http://bezier.de/typegenerators/

let me know if you find anything new please.

F
Back to top
 
WWW  
Solomon
Re: Designing Typefaces Using Processing.
Reply #3 - Feb 10th, 2008, 10:10pm  
Is there a way of saving the output of processing automatically each time it is run.  Say for instance as a .tiff or .jpeg file?

CHEERS!!
Back to top
 
 
JohnG
Re: Designing Typefaces Using Processing.
Reply #4 - Feb 10th, 2008, 10:16pm  
See http://processing.org/reference/saveFrame_.html and http://processing.org/reference/save_.html
Back to top
 
 
Solomon
Re: Designing Typefaces Using Processing.
Reply #5 - Feb 11th, 2008, 12:46pm  
Thanks for the reply there but I tried those and they save each file as the same thing, even though it say on the website that they do versions.

This is the coding that I have been using:

void setup(){
 size (400, 400);
 background (255);
 smooth();
 noLoop();
}

void draw(){
 float a = random (0, 100);
 if (a < 50){  
   float b = random (1, 40);
   strokeWeight(b);
   float c = random (20, 380);
   float d = random (20, 380);
   float e = random (20, 380);
   line (c, d, c, e);
 }

 float g = random (0, 100);
 if (g < 50){
   float h = random (1, 40);
   strokeWeight(h);
   float i = random (20, 230);
   float j = random (20, 380);
   float k = random (20, 380);
   line (i, j, k, j);
 }

 float f = random (0, 100);
 if (f < 50);{
   float h = random (1, 40);
   strokeWeight(h);
   float i = random (20, 230);
   float j = random (20, 380);
   float k = random (20, 380);
   float l = random (20, 380);    
   line (i, j, k, l);
 }

 float m = random (0, 100);
 if (m < 50){
   float n = random (1, 40);
   strokeWeight(n);
   float o = random (20, 380);
   float p = random (20, 380);
   float q = random (20, 380);
   float r = random (20, 380);
   line (o, p, q, r);
 }


 float s = random (0, 100);
 if (s < 50){
   noFill();
   float t = random (1, 40);
   float u = random (1, 40);
   float v = random (1, 40);
   stroke (t, u, v);
   stroke (0, 0, 0);
   float o = random (20, 380);
   float p = random (20, 380);
   float q = random (20, 380);
   float r = random (20, 380);
   float w = random (20, 380);
   float x = random (20, 380);
   float y = random (20, 380);
   float z = random (20, 380);
   bezier(z, y, x, w, r, q, p, o);
 }

 float t = random (0, 100);
 if (t < 50){
   noFill();
   float i = random (1, 40);
   float j = random (1, 40);
   float k = random (1, 40);
   stroke (i, j, k);
   stroke (0, 0, 0);
   float o = random (20, 380);
   float p = random (20, 380);
   float q = random (20, 380);
   float r = random (20, 380);
   float w = random (20, 380);
   float x = random (20, 380);
   float y = random (20, 380);
   float z = random (20, 380);
   bezier(z, y, x, w, r, q, p, o);
 }

saveFrame("######.tif");

}

As you can see its all about random lines being placed on a page.
Back to top
 
 
JohnG
Re: Designing Typefaces Using Processing.
Reply #6 - Feb 11th, 2008, 12:50pm  
You can use the current time as part of the filename to make it unique:

Code:
String filename=""+year()+nf(month(),2)+nf(day(),2)+"####.tif";
saveFrame(filename);


Back to top
 
 
Solomon
Re: Designing Typefaces Using Processing.
Reply #7 - Feb 11th, 2008, 1:42pm  
Hey JohnG, you are an absolute star for replying and so quickly. However I want to make hundreds of these images.  

So using the date isn't a good way of making the files different as I can only do one a day.  Any other thoughts?

Thanks mate you're genius.
Back to top
 
 
FrankBerg
Re: Designing Typefaces Using Processing.
Reply #8 - Feb 11th, 2008, 1:49pm  
you can expand JohnG's example with hour() , minute() , second() and mills()

fb
Back to top
 
 
fjen
Re: Designing Typefaces Using Processing.
Reply #9 - Feb 11th, 2008, 5:18pm  
http://www.dyntypo.com/
Back to top
 
WWW  
Solomon
Re: Designing Typefaces Using Processing.
Reply #10 - Feb 19th, 2008, 4:09pm  
Hey Jarl,

I am now at the stage in the design process where I would like to start learning about how to make the typeface that I am designing useable in other computer programs.  If you could help me out here that would be fantastic and I would be very appreciative.

Cheers,

Solomon
Back to top
 
 
Solomon
Re: Designing Typefaces Using Processing.
Reply #11 - Feb 19th, 2008, 10:00pm  
Thanks for the messsage Jarl, I'll look into it and let you know if I work anything out.

Next question is I am looking at the patterns created when put through a animation created by progessing.  I have a code that creates a pattern that I like but it always starts at the top left hand corner so I can't see the whole pattern.  I want it to appear in the center.

If anyone could look at my code and see where I'm going wrong that would be fantastic.

cheers!

Solomon.
Back to top
 
 
Solomon
Re: Designing Typefaces Using Processing.
Reply #12 - Feb 19th, 2008, 10:01pm  
Anyway this is the code:

float beginX = 20.0;
float beginY = 10.0;
float endX = 70.0;
float endY = 80.0;
float distX;
float distY;
float exponent = 3.0;
float x = 0.50;
float y = 0.50;
float step = 0.01;
float pct = 0.0;
int direction = 1;
PFont font;
//String letters = "";
float angle = 200.200;

void setup() {
 size (400, 400);
 noStroke();
 smooth();
 font = loadFont ("HelveticaNeue-48.vlw");
 textFont (font);
 distX = endX - beginX;
 distY = endY - beginY;
}

void draw(){
 fill (255, 2);
 rect (0, 0, width, height);
 pct += step * direction;
 if ((pct > 1.0) || (pct < 0.0)){
   direction = direction * -1;
 }
 if (direction == 1) {
   x = beginX + (pct * distX);
   float e = pow(pct, exponent);
   y = beginY + (e * distY);
 } else {
   x = beginX + (pct * distX);
   float e = pow(1.0-pct, exponent*2);
   y = beginY + (e * -distY) + distY;
 }
 
 fill (0);
 angle = angle + 0.02;
 translate (70, 40);
 rotate(angle);
 text ("A", x, y);
}
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›