시작하기

p5.js 프로젝트를 에디터에 설정하고 나의 첫 스케치를 만드는 방법을 소개합니다. 가장 쉬운 방법은 인터넷에서 p5.js 웹에디터를 바로 사용하는 것입니다. 웹에디터를 켜고 나의 첫 스케치로 내려가 코드 작성법을 확인하세요. p5.js를 데스크탑 에디터에서 사용하는 방법은 여기서 확인하세요: 데스크탑에 다운받기.

나의 첫 스케치

기존 프로세싱 사용자라면 다음의 페이지를 읽어보세요: 프로세싱 스케치를 p5.js로 변환하기 튜토리얼 에디터에 다음을 입력하세요:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

After background(220);위의 코드를 설명하자면 다음과 같습니다: "좌측 상단 모서리로부터 아래로 50px, 오른쪽으로 50px 떨어진 점을 중심으로 타원을 그린다. 타원의 너비와 높이는 모두 80px로 한다." ellipse(50,50,80,80);.

스케치를 저장한 뒤 브라우저를 새로고침하면, 입력한 코드에 문제가 없는 한, 다음과 같은 화면을 볼 수 있습니다:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

주의: 스크린 리더를 사용하는 경우, p5 웹에디터에서 접근성 모드 출력(Accessible Outputs)을 활성화해야 합니다. 별도의 에디터를 사용하는 경우, 접근성 라이브러리를 html 파일에 추가해야 합니다. 자세한 설명은 다음 링크를 참조하세요:

스크린 리더에서 p5를 사용하는 방법

If you are using a screen reader, you must turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn more visit 접근성 라이브러리란?.

캔버스에 폭과 높이가 50인 타원이 x 80, y 80의 위치에 그려져있다

코드를 잘못 입력할 경우 화면에 아무것도 나타나지 않을 수 있습니다. 예제 코드를 정확히 따라 썼는지 확인해 보세요. 숫자는 (괄호) 안에 포함하고, 각 숫자는 쉼표(,)로 구분해야 하며, 각 라인은 세미 콜론(;)으로 끝나야 합니다

프로그래밍 언어를 처음 접할 때 겪는 어려움 중 하나는 바로 까다로운 문법입니다. 브라우저는 우리가 표현하려는 게 무엇인지 스스로 파악할 정도로 똑똑하지 않으며, 각 요소의 위치와 구두법에 매우 민감하답니다. 처음에는 이런 문법이 낯설게 느껴지겠지만, 연습을 통해 점차 익숙해질 것입니다. 몇몇 브라우저는 코드 내 오류를 확인할 수 있는 자바 스크립트 '콘솔'을 제공합니다. 크롬(Chrome)의 경우, 보기 > 개발자 > 자바 스크립트 콘솔을 클릭하여 '콘솔'을 활성화할 수 있습니다.

이제 한층 더 재밌는 스케치를 만들어볼까요! 지난 예제의 코드를 에디터에서 삭제하고 아래의 코드를 입력해 보세요:

이제 프로그램은 폭 640px, 높이 480px의 캔버스를 생성하고, 마우스 커서 위치에서 흰 원을 그리기 시작합니다. 마우스 버튼을 누르고 있을 때는 원의 색이 검정색으로 바뀝니다. 마우스 위치에 대한 설명은 나중에 더 하기로 하고, 지금은 마우스를 움직이고 클릭하며 스케치의 변화를 살펴보세요.


function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

캔버스 위의 마우스 궤적을 따라 여러 개의 원이 그려집니다:

다음 단계

더 많은 정보는 배우기와 예제에서 확인할 수 있습니다.
또, 코딩 트레인(The Coding Train)과 Kadenze의 비디오 튜토리얼을 참고하세요.
p5.js의 모든 함수 및 메소드, 그 외 문서는 레퍼런스에서 확인하세요.
스크린 리더와 함께 p5를 사용하고 싶다면 다음을 확인하세요: 스크린 리더 기반 p5 튜토리얼.
프로세싱을 p5.js로 전환하는 방법과 둘 간의 차이점이 궁금하다면, 프로세싱 스케치를 p5.js로 변환하기 튜토리얼을 읽어보세요.

데스크탑 에디터에 p5.js 설정하기

여러분이 사용하는 그 어떠한 코드 에디터 에서든 p5.js를 쓸 수 있습니다. 아래에 Sublime Text 2 에디터를 설정하는 방법이 있습니다. 추천하는 또다른 에디터: Brackets , Atom. p5 웹에디터는 스크린 리더 기능을 제공합니다. 웹에디터를 사용하지 않는 스크린 리더라면 다음의 데스크탑 에디터를 고려해보세요: Notepad++ 나 Eclipse.

다운로드 & 파일 설정

The easiest way to start is by using the empty example that comes with the p5.js complete 파일을 다운받아 시작하는 것이 가장 쉽고 간편합니다.

다운로드 후에는 로컬 서버를 설정해야 합니다. 로컬 서버 설정 방법 을 참고하세요. 다운로드 폴더를 사용하여 인터넷 브라우저에서 다음과같이 로컬 서버를 실행하세요. http://localhost:{당신의-포트(port)-넘버}/empty-example

다운로드 파일 중, index.html 파일에는 p5.js 링크가 적혀있습니다. 로딩 시간을 단축하려면 해당 p5.js 링크를 그 간략 버전인 p5.min.js로 아래와 같이 변경하면 됩니다.

<script src="../p5.min.js"></script>

호스팅된 p5.js 라이브러리 사용하기

p5.js 파일의 온라인 링크를 직접 입력하는 방법도 있습니다. p5.js의 모든 버전은 CDN(Content Delivery Network)에 저장되어 있으며, 버전 히스토리는 여기서 확인할 수 있습니다: p5.js CDN. 링크를 다음과 같이 변경해보세요:

<script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>

아래는 HTML 페이지 샘플입니다:


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

개발 환경

먼저, Sublime Text 2 에디터 프로그램을 실행하세요. File 메뉴를 열고 Open을 클릭한 후, html 파일과 js 파일이 위치한 폴더를 선택하세요. 해당 폴더의 이름과 더불어 포함된 파일 리스트가 좌측 사이드바에 보일 것입니다.

sketch.js 파일을 선택하면, 우측 편집 영역에서 파일이 열립니다. Sublime 에디터에서 p5 템플릿 코드를 편집 중인 화면"

index.html 파일을 브라우저에서 열어볼까요? 파일 관리 시스템에서 index.html 파일을 더블 클릭하거나 브라우저 주소창에 다음을 입력하세요: file:///나의/html/경로 (또는, 로컬 서버 사용시, http://localhost:{당신의-포트(port)-넘버}/empty-example )

본 튜토리얼의 일부는 로렌 맥카시(Lauren McCarthy), 캐시 리스(Casey Reas), 벤 프라이(Ben Fry), 오라일리(O'Reilly) 저 Getting Started with p5.js 에서 발췌하였습니다. / Make 2015. Copyright

언어 설정