p5.js勉強用資料 〜環境構築編〜

はじめに

社内のデザイナーさんやディレクターさんなど、普段プログラミングをしない人向けに楽しくプログラミングを学んでもらうため、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
  • 変更内容の動作確認をリアルタイムにできます

webエディタ

すぐに始められ、サインアップする事で保存やシェアなどが簡単にできます。

使用する用語など

名前	説明	備考
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

https://p5js.org/learn/ のProgramming topicsに挑戦してみましょう。

他、基礎を学べる資料など

• https://www.youtube.com/watch?v=8j0UDiN7my4
  英語の動画が多い中、p5.jsの概要について日本語翻訳付きで説明してくれているのでおすすめします
• https://github.com/processing/p5.js/wiki/Processing-transition JavaベースのProcessingからどのように変わったかがまとまってます