Strings, text and font

When we want to print messages with println we use text in “quotes”.
Technically we are passing a string as parameter. You can handle text as variable as long as you declare the proper type.

Declaration and assignment:

var name = "paolo";

Also strings:

var text1 = "666";
var text2 = "two words";
var text3 = "text on \nTwo lines";
var text4 = " "; //space
var text1 = "6$%#@# AaBb()";

Concatenation:

var name = "paolo";
var lastName = "pedercini";
var nickName = "pizza";
var fullName = name + " \"" + nickName + "\" " + lastName;

function setup() {
  createCanvas(300, 300);
  background(0);
  fill(255);

  text(name + " " + lastName, 15, 30);

  text(fullName, 15, 60);
}

function draw() {

}

Formatting Text

You can change text color, it’s the same as the fill, and alignment.

function setup() {
  createCanvas(300, 300);
  background(0);

  fill(255,255,255);

  //alignment
  textAlign(CENTER);
  text("This text is centered.", width / 2, 60);
  textAlign(LEFT);
  text("This text is left aligned.", width / 2, 100);

  //change fill + alpha
  fill(255,255,255, 100);

  textAlign(RIGHT);
  text("This text is right aligned.", width / 2, 140);
}

function draw() {

}

Fonts

Download a font an try to load it. Make a simple clock.
For free fonts check dafont and google fonts.

var myFont;
function preload() {
  myFont = loadFont('assets/custom-font.ttf');
}

function setup() {
  fill('#ED225D');
  textFont(myFont);
  textSize(36);
  text('p5*js', 10, 50);
}

Posted in