[시각화 p5.js] p5.js 웹 에디터 설치 및 기본 메뉴 사용

[시각화 p5.js] p5.js 웹 에디터 설치 및 기본 메뉴 사용

 

p5.js

• 프로세싱(processing)의 구문과 규칙을 최대한 준수, 프로세싱의 웹 버전
• 프로세싱은 자바 언어를 기반, p5.js는 자바스크립트 언어를 기반
• 웹 브라우저에서 동작하는 자바스크립트 프레임워크로 시각적인 미디어 아트 작품 또는 컴퓨터와 사용자 사이의 상호작용을 쉽게 구현할 수 있도록 지원
• 로렌 멕카시의 의해 개발이 시작된 p5.js의 첫 번째 베타 버전이 2014년에 출시
• 다양한 기능과 라이브러리 활용 가능

​

p5.js는 그래픽과 동적 상호작용에 특화된 웹 기반 자바스크립트 프레임워크

​

프로세싱 processing

• 2011년 MIT에서 개발된 오픈 소스 소프트웨어로 자바 기반으로 한 데스크탑 환경의 언어
• 코딩에 익숙하지 않은 아티스트, 디자이너, 교육자 및 초보자들을 위하여 그래픽과 동적 상호작업에 쉽게 접근할 수 있도록 설계됨
• 데스크탑 환경에서 작동, 자바를 기반.

​

​p5.js의 특징 및 장점

• 웹 에디터(http://editor.p5js.org)를 통해서 코딩 결과를 바로 확인 가능
• 시각적인 미디어 아트 및 동적 상호작용을 쉽게 구현
• 사운드, 이미지, 동영상, 실시간 비디오 등 멀티미디어 처리가 용이
• 인터넷 등 네트워크의 연결이 쉼다
• TensorFlow.js 기반으로 기계학습이 가능

​​

p5.js 설치

• p5.js 홈페이지 https://p5js.org/ko​
• p5.js 다운로드 https://p5js.org/ko/download
• p5.js 에디터 https://editor.p5js.org/

​

[출처 : p5.js 영상처리]

​

• 실행 : 실행(▶) 아이콘 클릭, 메뉴의 [Sketch] -> [Run] , 단축키 Ctrl + Enter : 소스 코드를 번역하고 웹페이지 상의 실행 결과를 출력
• 정지 : 정지(■) 아이콘 클릭, 메뉴의 [Sketch] -> [Stop], 단축키 Ctrl + Shift + Enter : 실행이 멈추고 웹페이지 상의 실행 화면이 닫힘
• 저장 : 메뉴의 [File] -> [Save], 단축키 Ctrl + s : 임시로 지정된 파일명에 저장
• 코드 주석처리 단축키 : Ctrl + /
• 코드 자동 정렬 단축키 : Ctrl + Shift + f : 코드의 전체 구조를 쉽게 파악할 수 있을 뿐 아니라 오류를 발견하는데 도움
• 예제 소스코드 : [File] -> [Examples]
• 명령어 설명 참조 : [Help] -> [Reference]
• 웹 페이지 구성 : HTML + CSS + Javascript : HTML로 웹 페이지의 전체 구조를 만들고, CSS는 웹 패이지의 스타일을 다루고, 자바스크리브로 웹 페이지에 동적 기능을 추가한다
• 웹 페이지 파일 구성 : index.html + style.css + sketch.js
• index.html : html은 웹 페이지 창에서 제목, 본문, 이미지, 동영상, 표 등 포함한 웹페이지의 표시범을 규정한 언어. index.html 파일 안에 <script> 태그에는 p5.js p5.sound.js 두 가지 기본 라이브러리가 연결되어 있음
• style.css : css(cascading style sheets)는 html로 만들어 진 웹페이지의 색상, 폰트, 크기, 레이아웃 등의 스타일을 구정하는 언어. 즉 css는 웹페이지를 시각적으로 꾸져 준다. 또한 PC, 태블릿, 스마트폰 등 다양한 디바이스에 따라 자동으로 바뀌는 반응형 웹페이지를 가능하게 함
• sketch.js : js는 javascript를 의미. 사용자의 키 입력, 마우스 클릭, 스크롤 등의 동작에 따라 동적으로 반응하는 웹페이지를 만드는 역할.

​

p5.js 소스파일

index.html

sketch.js

style.css

웹페이지 구성  = HTML + CSS + Javascript

웹페이지 파일 구성 = index.html + style.css + sketch.js