소개

사내 디자이너 씨나 디렉터 씨 등 평소 프로그래밍을 하지 않는 사람을 위해 즐겁게 프로그래밍을 배우도록 하기 위해 Processing과 p5.js 공부회를 열고 있습니다. 모처럼이므로 그 자료를 Qiita에도 투고합니다.

다양한 개발 환경을 선택할 수 있지만, 사내에 이용자가 많은 VSCode와 프로젝트 관리에 편리한 p5-manager을 사용한 환경을 상정하고 있습니다. 다른 환경에서 개발을 하고 싶은 분은 적절히 읽어 주세요.

환경

macOS High Sierra 10.13.6

Node v12.1.0

npm 6.9.0

에디터

이번에 사용하는 VSCode와 Web상에서 사용할 수 있는 에디터를 소개합니다.

VSCode

아래 패키지를 사용하면 편리합니다.

p5js Snippets

코드 완성을 해줍니다

live-p5

변경 내용의 동작 확인을 실시간으로 할 수 있습니다

웹 편집기

즉시 시작되고 가입하는 것으로 저장과 공유 등을 쉽게 할 수 있습니다.

사용하는 용어 등

이름
설명
비고


p5 디렉토리
컬렉션을 저장합니다.
~/p5js

컬렉션
p5 라이브러리 및 프로젝트를 저장
컬렉션 이름을 practice로 설정합니다.

프로젝트
소스 코드를 저장합니다.
프로젝트명은 00_helloworld 등, 각각의 특징에 맞추어 명명해 갑니다

스케치
Processing은 프로젝트를 스케치로 표현합니다.
공식 레퍼런스 등으로 스케치와 나오는 일이 있습니다만, 프로젝트와 같은 것이라고 생각해 문제 없다고 생각합니다

이 기사를 진행하면 아래와 같은 구성이 됩니다.

~/p5js
└── practice
    ├── 00_helloworld
    ├── 01_tutorial
    └── libraries

설치 및 기본 페이지 확인까지의 단계

p5 관리자를 설치하여 라이브러리를 로드합니다.

npm install -g p5-manager
mkdir ~/p5js && cd ~/p5js
p5 new practice

practice 컬렉션에서 프로젝트를 생성합니다.

cd ~/p5js/practice

로컬 서버 시작 및 확인

# コレクションディレクトリ直下でおこなって下さい(今回は~/p5js/practice)
# sはserverの略
p5 s

http://localhost:5555/로 이동하면 Hello p5.js! 페이지가 나타납니다.
또한 왼쪽 상단의 아이콘을 클릭하면 컬렉션에 등록한 프로젝트 링크를 사이드 네비게이션에서 확인할 수 있습니다.


향후 프로젝트가 늘어나면 http://localhost:5555/#/ 프로젝트 이름 으로 액세스를 나눌 수 있습니다.

로컬 서버 중지

p5 s를 실행하는 프로세스에 초점을 맞춘 상태에서 Ctrl+C를 입력합니다.

Hello World 프로젝트

프로젝트의 병아리 생성

# コレクションディレクトリ直下でおこなって下さい(今回は~/p5js/practice)
# gはgenerateの略
# --es6 オプションでES6を利用できます

p5 g 00_helloworld --es6

「Hello World」라고 하는 캐릭터 라인의 위치가 마우스에 오고, 화면 아래쪽으로 향함에 따라 문자가 커지는 프로젝트입니다.

~/p5js/practice/00_helloworld/sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(255)
    textSize(mouseY)
    text("Hello World", mouseX, mouseY, windowWidth, windowHeight)
}

p5 s 를 실행하고 있는 상태로 http://localhost:5555/#/00_helloworld 에 액세스 하면 확인할 수 있습니다. 기본적으로 핫 리로드 기능이 준비되어 있으므로 변경된 코드를 저장하면 브라우저 측도 자동으로 리로드가 실행 즉시 확인이 가능합니다.

튜토리얼

p5 g 00_tutorial --es6

htps // p5js. 오 rg / 아 rn / 의 Programming topics에 도전해 봅시다.

그 외, 기초를 배울 수 있는 자료 등

htps //w w. 요츠베. 이 m/와 tch? v = 8j0 음 7my4
영어 비디오가 많으면 p5.js의 개요를 일본어 번역으로 설명해 주시기 때문에 추천합니다.

htps : // 기주 b. 이 m/p 여드름 g/p5. js / 우키 / P 로세 센 g t 란시 치온 Java 기반 Processing에서 어떻게 바뀌 었는지가 정리되어 있습니다