p5.js의 구조와 예제코드

p5.js의 학습참고링크

p5.js 홈페이지

p5 자바스크립트와 ml5 머신러닝라이브러리

p5.js 홈페이지를 들어가보면 무슨 기능이 있고 어떻게 사용해야하는지 잘 설명되있다.

게다가 따로 조작 할 필요 없이 페이지 전체에 한국어 번역을 자동으로 해준다.

그 외에 위키독스에 있는 p5 자바스크립트와 ml5 머신러닝라이브러리 라는 전자책을 참고했는데

p5.js의 기능들을 어떻게 응용하고 구현해 나아가는지 잘 설명해준다.

p5.js- 버튼으로 크기 조절과 위치조절 예제

p5의 각종 메서드를 시험적인 구현을 하기에는 p5 에디터가 제격이다.

여기서 구현해 본걸 실제 로컬 디렉토리에 순환적인 작업을 진행했다.

let x = 200;
let tSize = 22;
let button1, button2, button3, button5;

function setup() {
  createCanvas(400, 100);
  createP('');
  button1 = createButton('왼쪽');
  button1.position(0, 130);
  button1.size(100, 30);
  button1.mouseReleased(left);

  button2 = createButton('오른쪽');
  button2.position(300, 130);
  button2.size(100, 30);
  button2.mouseReleased(right);

  button3 = createButton('커진다');
  button3.position(0, 260);
  button3.size(100, 30);
  button3.mouseReleased(bic)

  button5 = createButton('작아진다');
  button5.position(300, 260);
  button5.size(100, 30);
  button5.mouseReleased(small)

  function left(){
  x-=5;
}

function right(){
  x+=5;
}

function bic(){
  tSize+=2;
}

function small(){
  tSize-=2;
}
}

function draw(){
  background('blue');
  textSize(tSize)
  text('Font Size 14', x, 60);
}

기본적으로는 자바스크립트 문법이 적용되지만

p5.js에서는 DOM을 생성하고 이벤트 리스너 등록,

각종 태그에 속성으로 등록 이 과정을 구현하는 코드를 간단하게 구현이 가능하다.

마우스 조작으로 텍스트를 생성하는 예제작성

let x = 200;
let tSize = 22;
let button3, button5;

function setup() {
  createCanvas(400, 500);
  createP('');
  
  
  button3 = createButton('커진다');
  button3.position(0, 560);
  button3.size(100, 30);
  button3.mouseReleased(bic)
  
  button5 = createButton('작아진다');
  button5.position(300, 560);
  button5.size(100, 30);
  button5.mouseReleased(small)
  

function bic(){
  tSize+=2;
}

function small(){
  tSize-=2;
}
}

function draw(){
  background(150, 150, 150, 3);
  textSize(tSize)
  textAlign(CENTER, CENTER);
  fill(255, 255, 0);
  noStroke();
  if(mouseIsPressed){
    text('가즈아', mouseX, mouseY)
  }
}

• 위 예제처럼 마우스 조작으로도 내가 원했던 텍스트 생성이 가능하다는 걸 알게됬다.