p5.js 온라인 웹 에디터 사용법

p5js.org 사이트에서 제공하는 웹 데이터의 사용법을 정리해 보려고 한다.

 

p5.js 온라인 웹 에디터의 장점

• 환경 세팅 없이 웹에서 입력 후 바로 확인할 수 있어 편리
• 다른 사람에게 내 코드나 작업물을 공유 가능
• 회원 가입 후 로그인 시 내 작업물 저장/다운로드 및 관리 가능

p5.js 온라인 웹 에디터 바로가기

p5.js Web Editor

 

 

 

p5.js 온라인 웹 에디터 사용법

위의 p5.js 온라인 웹 에디터 링크로 이동하면 아래와 같은 초기 화면이 나온다. 
파일을 저장하길 원한다면 회원가입 후 로그인하면 된다. 

 

p5.js 공식사이트에서 제공하는 온라인 웹 에디터

 

1. 에디터 영역 : 코드를 입력 및 수정
   
   
2. 미리보기 영역 : 에디터에 입력한 코드를 실행하는 영역 (코드 입력 후 좌측 상단의 Run 버튼 클릭) 
   Auto-refresh에 체크할 경우 Run 버튼을 클릭하지 않아도 에디터에서 입력하면 바로 미리 보기 영역에 결과물이 나타난다.
   
   
3. 콘솔 영역 : 코드 작성 시 오류가 있다면 하단 콘솔 영역에 오류가 표시 됨. 몇 번째 줄에서 오류가 발생했는지 확인할 수 있어 원인을 찾는 데 도움이 된다. 
   
   

   

   오타로 콘솔 화면에 오류가 발생한 화면

   
   
   
4. 메뉴 영역 : File / Edit / Sketch / Help 네 가지 메뉴로 분류되어 있다. 
   File 메뉴 하위에는 파일 생성 및 수정과 관련된 메뉴 외에도 공유하기, 예제, 다운로드 등의 메뉴가 포함되어 있으며 파일 저장 전/후의 메뉴가 아래와 같이 달라진다.
   
   

   

   p5.js 온라인 웹 에디터 File 하위 메뉴

   
   
   참고로 파일을 다운로드하면 zip파일로 다운로드가 되는데 압축 해제를 하면 아래와 같이 구성되어 있다. 
   그러나 아쉽게도 html 파일을 브라우저에서 실행했을 때 파이어폭스에서만 제대로 열리는 것 같다. 
   
   

   

   p5.js 에디터에서 파일 다운로드 후 입축 해제시

   
   
   
   
   Edit 메뉴 하위에는 코드 자동 정렬, 코드 찾아 바꾸기 등 코드 편집과 관련된 메뉴들이 있다. 
   아래 이미지처럼 코드가 몇 줄 안될 때는 크게 문제가 되지 않으나, 코드가 길어지거나 다른 사람과의 협업 시에는 소스가 깔끔하면 원하는 부분을 찾을 때 도움이 되니 코드를 정리하는 습관을 들이기 바란다.
   단축키(Ctrl + Shift + F)도 기억해 두도록 하자. 
   
   

   

   p5.js 온라인 웹 에디터 Edit 하위 메뉴

   
   
   
   Sketch 메뉴 하위에는 파일 생성, 폴더 생성, 재생, 정지 메뉴가 있다. 
   
   

   

   p5.js 온라인 웹 에디터 Sketch 하위 메뉴

   
   
   
   파일이나 폴더를 생성하면 Sketch Files에서 생성된 파일과 폴더를 확인할 수 있다.
   
   

   

   p5.js 온라인 웹 에디터 Sketch Files

   
   
   생성된 폴더 옆의 화살표를 클릭해보면 파일을 업로드할 수 있는 메뉴가 있다.
   p5.js에 이미지를 삽입할 때 이 기능을 사용하면 된다. 
   
   

   

   p5.js 온라인 웹 에디터 폴더에 파일 업로드 하기

   
   
   업로드한 파일들은 Assets에서 볼 수 있다. 

p5.js 온라인 웹 에디터 My Assets

 

 

Help 메뉴 하위에는 단축키, 레퍼런스 등의 메뉴가 있다.

p5.js 온라인 웹 에디터 Help하위 메뉴

 

단축키를 알아두면 작업 속도를 높이는 데 도움이 되니 p5.js 온라인 에디터에서 꼭 확인해 보기 바란다.

p5.js 온라인 웹 에디터 Sketch 하위 메뉴