텍스트 함수

텍스트 함수 쓰기.

• draw() 함수 안에서 text() 함수만 쓰면 된다.

• https://p5js.org/ko/reference/#/p5/text

• 폰트는 개별적으로 추가해보기.

/** 글로벌 변수 쓰는 곳 **/

function setup() {
   /** 캔버스 초기 설정 관련 함수들 **/
}

function draw() {
    textSize(20);
    textAlign(CENTER);
    translate(width*0.5, height*0.5);  // 이제 기준점이 캔버스의 중앙이 됨.
    scale(0.5);                        // 텍스트도 scale 적용 가능.
    text("H", 0, 0);
    pop();
}

기본 텍스트 관련 함수들

• text()함수: https://p5js.org/ko/reference/#/p5/text

• function preload() { } : 스케치 이전에 업로드한 파일들 로드. 3d에서는 필수

• textSize() : 폰트 사이즈를 지정 (px 단위)

• textAlign(): 폰트 정렬.

응용 1: 키보드를 눌렀을 때 반응하게 하는 법

• https://p5js.org/ko/reference/#/p5/keyPressed

응용 2: 키보드 인풋 박스를 사용하는 법

• https://p5js.org/ko/reference/#/p5/createInput

---

폰트 추가하는 법

폰트 로딩 관련 함수들

• function preload() { } : 스케치 이전에 업로드한 파일들 로드. 3d에서는 필수

• loadFont() : 업로드한 폰트 불러오기. 3d에서는 필수

• textFont() : 폰트를 지정. 3d에서는 필수

폰트 찾기

• https://noonnu.cc/

• https://fonts.google.com/

폰트 업로드: 구글 폰트에서 가져오기

• 구글 폰트

• 단계별 스크린샷

폰트 업로드: 파일 직접 업로드 하기

• 파일 업로드: otf, ttf 형식

• 3D 캔버스에서는 폰트 파일을 업로드해야함.

• noonnu 에서 원하는 폰트가 있으면 미리 다운 받아놓기.

• openprocessing 스케치에서 오른쪽 탭 메뉴의 Files 에다가 드래그앤 드랍으로 업로드할 수 있음.

직접 업로드한 폰트 파일 사용하는 법

예제: https://p5js.org/ko/reference/#/p5/text

let myFont;                 // 폰트 파일 정보를 담을 변수 생성
function preload() {
  myFont = loadFont('inconsolata.otf');  // 폰트 파일 미리 로딩해오기
}
function setup() {
  createCanvas(100, 100);
  textFont(myFont);             // 폰트 지정하기
  textSize(width / 3);          // 폰트 사이즈
  textAlign(CENTER, CENTER);    // 폰트 정렬 설정
}
function draw() {
  text("hello", 50, 50);        // 텍스트 입력(글자, x위치, y위치)
}

---

---

---