p5.js入門　開発環境のセットアップ方法

今日からp5.jsライブラリの使い方に関する記事を書いていこうと思います。

・p5.js公式ページ

　<http://p5js.org/>

今日は初回ということで

「開発環境のセットアップ方法」

についてみていきます。

セットアップ方法といっても大したことはないです。

以下4つを用意するだけです。

　・自分のPC

　・ブラウザ

　・テキストエディタ

　・p5.jsライブラリ

ブラウザやテキストエディタはお好みのもので構いません。

何を選べばよいかよくわからないという方は、

以下をダウンロードしておけば問題ないと思います。

・ブラウザ：Google Chrome <https://www.google.com/intl/ja/chrome/>

・テキストエディタ：Atom <https://atom.io/>

p5.jsライブラリについてはいくつか種類がありますが

今回は「p5.min.js」を使うことにします。

以下のサイトからp5.min.jsをダウンロードしましょう。

・p5.min.js

　<http://p5js.org/download/>

f:id:techty:20190501083556p:plain

参考までに各ライブラリの簡単な説明を載せておきます。

・p5.js（Canvasに絵を描くためのライブラリ。p5.min.jsに比べてファイルサイズが大きい）

・p5.min.js（Canvasに絵を描くためのライブラリ。p5.jsに比べてファイルサイズが小さい）

・p5.dom.js（スライダーやボタンなどのDOM要素を操作するためのライブラリ）

・p5.sound.js（音を扱うためのライブラリ）

一応、僕が使用しているPC環境を以下に記しておきます。

僕のPC環境（以下の環境で開発してます）

　・OS: Windows10 64bit

　・ブラウザ: Google Chrome(バージョン: 73.0.3683.103)

　・テキストエディタ: Atom(1.36.1)

　・p5.jsライブラリ: p5.min.js

ここまでの作業が一通り完了したら、必要なものはすべてそろっています。

以下の手順に従って簡単なプログラムを書いてみましょう。

まずはプログラムの作成に必要なフォルダとファイルを用意します。

手順

自分のPC上にsampleフォルダを作成する
sampleフォルダ内にindex.htmlファイルを作成する
sampleフォルダ内にlibフォルダを作成する
libフォルダ内にp5.min.jsを置く
sampleフォルダ内にjsフォルダを作成する
jsフォルダ内にsketch.jsファイルを作成する

※作成するファイルの文字コードはUTF-8としてください

以下のようなフォルダ構成になっていればOKです。

f:id:techty:20190501062339p:plain

f:id:techty:20190501062342p:plain

次に実際のプログラムを書いていきます。

手順

１．index.htmlファイルに以下のコードを貼り付けて保存します

<!DOCTYPE html>
<html lang='ja'>

<head>
  <meta charset='utf-8'>
  <title>Sample</title>
  <script src='lib/p5.min.js'></script>
</head>

<body>
  <script src='js/sketch.js'></script>
</body>

</html>

２．sketch.jsファイルに以下のコードを貼り付けて保存します

function setup() {
  createCanvas(400, 400);
  background(0);
}

function draw() {
  ellipse(width / 2, height / 2, 200, 200);
}

３．index.htmlファイルをブラウザで表示してみましょう。

　　以下のような画面が表示されればOKです。

f:id:techty:20190501085230p:plain

以上で開発環境のセットアップは完了です。

p5.jsライブラリを使う準備は整いました。

次回は、今回作成した上記プログラムについての説明と

p5.jsライブラリの基本的な仕組みを紹介したいと思います。

次回

techty.hatenablog.com