​

function setup() {

  createCanvas(300, 300);

​

  stroke(255, 0, 0); //_____________ p5.js allow stroke and fill different colors

  strokeWeight(5);

  fill(0, 255, 255);

  print("if you use system fonts, can use \n https://p5js.org/reference/#/p5/textStyle \n https://p5js.org/reference/#/p5/textFont \n https://p5js.org/reference/#/p5/text \n press any key");

​

}

​

function draw() {

  background(200, 200, 0);

  textSize(20);

  textStyle(NORMAL); //NORMAL, ITALIC, BOLD or BOLDITALIC

  text(t, 20, 50);

​

  textSize(30);

  textStyle(ITALIC);

  text(t, 20, 100);

​

  textSize(40);

  textStyle(BOLD);

  text(t, 20, 150);

  textSize(50);

  textStyle(BOLDITALIC);

  text(t, 20, 200);

}

​

function keyPressed() { 

  f++;

  if ( f > 5 ) f = 0;

  if ( f == 0 ) my_font('Default?');

  if ( f == 1 ) my_font('Georgia');

  if ( f == 2 ) my_font('Verdana');

  if ( f == 3 ) my_font('Arial');

  if ( f == 4 ) my_font('Courier New');

  if ( f == 5 ) my_font('Times New Roman');

  if ( key == 's' ) {

    noStroke();

    fill(0);

  }

}

​

function my_font( fs ) {

  print(fs);

  textFont(fs);

  t = fs;

}