今天我們要講到文字變化了，耶~~~~

p5.js彈性非常大，揉合度也很高，可以把圖檔字形通通都丟進去做變化，load文字的方式非常非常簡單

需要加載字形的話，首先把文字檔載下來，然後用loadFont()丟進 preload() 裡面就好了ㄏㄏ，乍看之下是不是滿簡單的呢~

preload() 需要在setup ()之前被調用，是以非同步(異步加載)的方式事先加載外部文件，像是圖片和文字等等，只要定義了preload() ，setup()將等到其中的文件都完成加載後才執行。

可能有人會問，不能寫在一起嗎?放在setup不行嗎?其實流程可以這樣解釋，如果我們在setup來引入外部文件，在文字或圖片載完之前，可能就執行完setup呼叫draw了，這樣在畫圖上會攢生很嚴重的問題，所以我們要使用preload()，而除了loadImage、loadJSON、loadFont、 loadStrings等這些有特別與p5進行註冊函式之外，其他都不能在 preload 中。

好，大概解釋差不多了~那我們來看一下程式結構吧，下面範例使用loadFont()函式來引入文字字體，在引入文字的時候只要是用相對路徑，但其實絕對路徑也行

引入程式結構

let font;

function preload(){
  font = loadFont('index18/TextMeOne-Regular.ttf');

}

整體結構

它的整體結構大概會長這樣

let font;

function preload(){
//引入文字
  font = loadFont('index18/AlexBrush-Regular.ttf');
}


function setup(){
//設定字體大小
//設定整個畫布使用引路的字形
}


function draw(){
//放上文字，用文字作畫做動畫
}

實作範例

這裡用到了以下函數

• textFont()
  使用什麼字形
• textAlign()
  文字對齊
• textSize()
  文字大小
• textWidth()
  取得文字字串的寬度
• text()
  上文字的函數，需標註文字內容與位置