Processing+-+Images+on+Sketches


 * Note: These instructions are for working on the offline version of Processing, not on sketchpad.cc, though your code will probably still work on sketchpad.cc.

Making text appear on your Processing sketches is not too hard! It takes three basic steps: 1. Make a variable for storing your font. 2. Load your font and make it the current font. 3. Tell Processing what to type and where on your sketch.

Step 1: Make a variable for storing your font: Fonts are stored in a data type called PFont. So to create a new font, we need to make a **global variable** with type PFont as in: code format="java" PFont currentFont;

void setup { }

void draw { } code Step 2: Load your font and make it the current font.

The first part of this is really **important**. Go to Tools>Create Font... We have to make sure that the font we want to use is readily available in the data folder for your sketch. Pick a font and a size for your current project. Copy the font name from the bottom of the screen (use Ctrl + C).

Then add code to your sketch to load in the font. To load the font, we use loadFont and to make it the default font we use textFont. Be sure to add ".vlw" to the end of the font name. For example: code format="java" PFont currentFont;

void setup { currentFont = loadFont("Serif-48.vlw"); //Serif is the font created! textFont(currentFont, 48); //currentFont is the font variable, 48 is the size }

void draw { } code Step 3: Tell Processing what to type and where to put it on the sketch

In your draw function (usually) you can use the text function to draw text. For example: code format="java" PFont currentFont;

void setup { size(400, 400);//note: the size changed here! currentFont = loadFont("Serif-48.vlw"); textFont(currentFont, 48); }

void draw { text("Hello", 100, 100); //will print "Hello" at (100, 100) } code You can change the color of the writing using the fill command (as you would with a shape.

Try it: 1. Write your name on the screen. Now, can you make your name appear in the middle of your sketch? 2. Make a moving marquee - text that moves across your screen. 2. (Challenge problem: Make two-player tic-tac-toe. To start, just make the X's and O's appear on the screen when you click. If you want a special challenge, make Processing determine when one person has won!)