01. P5.js : 시작

목표 :

• p5.js 정의 및 특징, 장점
• 설정 및 코딩환경
• p5.js 기본표현(캔버스 조정, 점/ 선/ 원/ 사각형/ 문자 등 기본 및 색상 표현법 학습

---

1.1 p5.js란?

• 자바스크립트(JavaScript) 언어 기반으로 만들어 짐
• 웹브라우저에서 동작하는 자바스크립트 프레임워크로 미디어아트 작품 또는 컴퓨터와 사용자 사이 상호작용 쉽게 구현할 수 있도록 지원
• 펜으로 스케치할 때의 과정처럼 아이디어가 시각화 되는 과정을 직관적으로 확인 가능, 코드를 스케치라고도 함
• https://editor.p5js.org/
• 설치, 환경셋업 불요
  
  

1.3 코딩환경

• p5.js 소스파일은 세 가지로 구성(HTML : 웹페이지의 전체 구조 만듦, CSS : 웹페이지의 스타일 입힘, 자바스크립트 : 웹페이지에 동적 기능 추가)
• 이 중 p5.js는 자바스크립트 기반하므로 해당 파일 소스코드만 변경하면서 결과를 확인함
• 웹페이지 구성 = HTML + CSS + Javascript
• 웹페이지 파일 구성 = index.html + style.css + sketch.js
• index.html : HTML은 웹페이지 창에서 제목, 본문, 이미지, 동영상, 표 등 포함한 웹페이지 표시법 규정하는 언어로써 해당 소스내 p5.js는 p5의 기본 라이브러리. p5.sound.js는 p5의 확장 라이브러리로서 오디오 입력, 재생, 분석 및 합성을 포함한 웹 오디오 기능
• sytle.css : CSS는 HTML로 만들어진 웹페이지의 색상, 폰트, 크리, 레이아웃 등 스타일 규정하는 언어. 다양한 디바이스에 따라 자동으로 바뀌는 반응형 웹페이지를 가능하게 함
• skectch.js : JavaScript를 의미하며 사용자의 키 입력, 마우스 클릭, 스크롤 등 동작에 따라 동적으로 반응하는 웹페이지를 만드는 역할을 하는 언어. HTML, CSS가 웹페이지의 정적처리를 담당한다면 자바스크립트는 동적처리 담당
  
  

1.4 기본 표현 : 캔버스

• createCanvas() : 캔버스(자바스크립트로 웹페이지 내부에 그래픽 구현하기 위한 HTML요소) 크기를 설정하는 함수로서 폭과 높이 설정하는 함수. 본 함수는 단 한번만 실행되어야 함. setup()이 실행 초기 한번 실행되는 함수이므로 setup()함수 내 첫 줄에 작성함.
• background() :background(r,g,b)의 형식 사용하며, 배경 색상을 설정하는 함수.
• p5.js의 기본 구조 : setup()과 draw()함수로 구성됨. setup()함수는 실행 초기 한번만 처리 되므로 화면 크기 설정이나 변수의 초기값 설정 등 초기화에 관련된 코드를 삽입. setup()함수의 실행 이후에는 draw()함수가 무한 반복 처리 되는 구조.

 

1.5 기본 표현 : 점, 선

• strokeWeight() : 점/선의 굵기 설정
• point() : 점 생성하는 함수
• line(start_x, start_y, end_x, end_y) : 선 생성하는 함수 

1.6 기본 표현 : 원, 사각형

• ellipse(center_x, center_y, 폭, 높이)
• rect(좌상_x, 좌상_y, 폭, 높이)

1.7 기본 표현 : 문자

• textSize() : 문자 크기 픽셀 단위로 설정하는 함수
• text() : 문자 출력 함
  
  

1.8 기본 표현 : 색상

• noStroke() : 도형 및 문자의 외곽선을 그리지 않는 함수
• stroke() : 도형 외곽선색 정하는 함수

---

표현 정리 :

*프레임워크 : 특정 프로그램을 개발하기 위해 필요한 요소들과 메뉴얼을 제공하는 프로그램

 

본 내용은 P5.js 영상처리 책을 통해 개인 학습한 내용을 정리한 글입니다.

서적 링크 : https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=309337273 

[전자책] P5.js 영상처리