WEEK 7: Tut 12, 14

by Sarah Shultz

Tut 12: Working with fonts

Displaying text: you can enlarge or condense the rectangular area that holds the text, here i've set the rectangle x to 20, which is too small for all the text to wrap around and thus it is off the page

  • Show Sketch
/** @peep sketchcode */
size(100, 100);
background(204);
fill(0); 
String s = "Response is the medium"; 
text(s, 10, 20, 20, 50);

Displaying text in different colours: changed opacity and added randomness to the colour of the text, offset shadow by 2, put it all in a for loop because thats easier than writing code over and over again

  • Show Sketch
/** @peep sketchcode */
size(600, 300);
background(204);
String s = "my name's Sarah :)"; 
textSize(50);
 
fill(0, 64);
 
for (int x = 100; x < 115; x = x+ 2) {
  for (int y = 100; y < 115; y = y+ 2) {
    text(s, x, y);
    fill(random(0, 255), random(0,255), random(0,255), random (100, 255));
  }
}

Fonts: ideally this text would be displayed in the font i uploaded! IT is a fun script, woo

  • Show Sketch
/* @pjs font=/uploads/smeishultz/16086/files/font1.ttf; */
/** @peep sketchcode */
size(100, 100);
background(204);
PFont font1 = createFont("/uploads/smeishultz/16086/files/font1.ttf", 32);
textFont(font1);
size(100, 100);
background(204);
fill(0); 
String s = "Response is the medium"; 
text(s, 10, 20, 80, 50);

Changing the appearance of a font: hello, goodbye!

  • Show Sketch
/* @pjs font=/media/css/Chunkfive-webfont.ttf; */
/** @peep sketchcode */
size(500, 200);
int x = random(75, 130);
int y = random (100, 300);
 
background(random(100,255));
PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 72);
textFont(font);
fill(0, 160); // Black with low opacity 
fill (random (100, 255), random (10, 156), random (100, 150), random (100, 255));
text("hello,", random(75,150), 80); 
fill (random (100, 255), random (10, 156), random (100, 150), random (100, 255));
text("goodbye",random(x, y),random (x, y), 80); 
text("goodbye",random(x+1, y+1),random (x+1, y+1), 80);

Animated Text: fun bouncy animated text,

  • Show Sketch
/* @pjs font=/media/css/Chunkfive-webfont.ttf; */
/** @peep sketchcode */
 
String scrollingText = "This is a long sentence that I've just written to show you how easy it is to animate text in Processing.";
 
float x;
float dx = -1;
 
void setup() {
  size(200, 200);
  PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 72);
  textFont(font);
  x = width;
}
 
void draw() {
  background(204);
  fill(0);
  textAlign(LEFT, RIGHT);
  fill(100, random (0,255), random(0,255), random (100, 255));
  text(scrollingText, x, height/2 + random(10,20));
  x += dx;
  if (x <= -textWidth(scrollingText)) x = 200;
}

Comments

Nobody has said anything yet.