Skip to content

Words

The text() function is used for inserting text into the canvas. You can change the font and text size using the loadFont() and textSize() functions. The text can be aligned left, center, or right with the textAlign() function, and, like shapes, text can be colored with fill().

Three columns of the words 'ichi', 'ni', 'san' and 'shi' on a white background. The first column is right aligned, the middle column is center aligned, the left column is left aligned.

require("L5")

-- Define global variables: font and fontSize.
local font
local fontsize = 40

function setup()
  windowTitle('words')

  describe(
    'Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.'
  )

  -- Load the font's file in the canvas's assets directory.
  -- loadFont() accepts .ttf bitmap or .otf files.
  font = loadFont('assets/SourceSansPro-Regular.otf')

  size(710, 400)
  background(250)

  -- Set the text styling to the predefined font and font size.
  textFont(font)
  textSize(fontsize)

  -- Align the text to the right and run the drawWords() function
  -- to generate the left column of text.
  textAlign(RIGHT, CENTER)
  drawWords(width * 0.25)

  -- Align the text to the center and run the drawWords() function
  -- to generate the middle column of text.
  textAlign(CENTER, CENTER)
  drawWords(width * 0.5)

  -- Align the text to the left and run the drawWords() function
  -- to generate the left column of text.
  textAlign(LEFT, CENTER)
  drawWords(width * 0.75)
end

function drawWords(x)
  -- The drawWords() function creates four text() instances,
  -- using the x coordinate supplied by each column created
  -- in setup().
  fill(80)

  text('ichi', x, 80)

  text('ni', x, 150)

  text('san', x, 220)

  text('shi', x, 290)
end

Words: Revised by Kasey Lichtlyter. Edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.