Chapter 02

OpenProcessingを使ってみよう

かじるプログラミング
かじるプログラミング
2022.10.02に更新

最初のスケッチを作る

いよいよ作品を作っていきます。

OpenProcessingでは、一つの作品を"スケッチ"と呼びます。
画面右上の"Create a Sketch"(赤いボタン)をクリックしてスケッチを作りましょう。

次に、画面右上にある"Save"(赤いボタン)をクリックして保存画面に移動します。
この時点ではまだ保存されていないので注意してくださいね。

保存をする前に、スケッチのタイトルを付けます。
とりあえず、"HelloWorld"という名前にしてみました。
タイトルの入力が済んだら、画面右上にある"Submit"(赤いボタン)をクリックします。
これで保存が完了したことになります。

コードを確認してみる

保存が完了すると、画面は自動的に"実行"状態に切り替わります。
マウスをキャンバスの上(作品の描画エリア)で動かしてみましょう。
すると、マウスの軌跡を追いかけながら小さい円が描画されていきます。
この時点では、p5.jsが単体で動いている状態です。

このプログラムがどう動いているのか、コードを確認してみます。
キャンバス上部にある"<>"マークをクリックしてみましょう。

編集モードになると、下記の様なプログラムが表示されます。

記述されているコードを抜き出してみます。

function setup() {// setup関数
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {// draw関数
	ellipse(mouseX, mouseY, 20, 20);
}

あらかじめ用意されている関数は2つです。
setup関数、draw関数それぞれの意味は次の通りです。

関数名 意味
setup 初期化時に1度だけ実行されます
draw setup関数の後、繰り返し実行されつづけます

次に各関数の中で実行されている処理について確認してみましょう。

function setup() {
	createCanvas(windowWidth, windowHeight);// キャンバスのサイズ
	background(100);// 背景の色
}

function draw() {
	ellipse(mouseX, mouseY, 80, 80);// 20から80に書き換えた
}

setup関数では、createCanvas関数を実行してキャンバスサイズを決定しています。
(キャンバスとは、作品が描画されるエリアのことです)
次に続くbackground関数は、背景色を決めています。

draw関数に記述されているellipse関数は、指定された座標に楕円を描きます。
x座標とy座標にはそれぞれ"マウスの座標"である"mouseX"と"mouseY"が指定されていますね。

ellipse(x座標, y座標, 横幅, 高さ);

試しに、draw関数にあるellipseの引数にある"20"を"80"に書き換えてみましょう。
書き換えが終わったら、"▶︎"ボタンを押して実行してみます。

すると、先ほどまで小さかった円が大きくなっていますね。
ellipse関数の引数にはそれぞれ下記の様な意味があります。

慣れるまで何度か"<>"ボタンを押してコードを修正し、
"▶︎"ボタンで実行して試してみましょう。

今後はこの様にしてコードの変更と実行をしながら作品を作っていきます。

p5.playを有効にする

コードの変更と実行の方法はわかりましたね。
p5.playライブラリを有効にして、"スプライト"を使ってみましょう。(ここからが本番です!!)
編集モードにしてから、右側にあるメニューボタンをクリックします。

すると、右側から大きなスライダーが現れます。

メニュー内部にある"Libraries"の右側にある"Show All"をクリックしてライブラリの一覧を表示します。

そして、次の手順で3つのライブラリを有効にします。

1, p5.soundを有効にする

最初に、p5.soundを有効にします。
(スクロールしていくと見つかります)

2, p5.playを有効にする

次に、p5.playを有効にします。
(p5.playのバージョンに注意しましょう)

3, planck.jsを有効にする

最後に"planck.js"を有効にします。
こちらのライブラリは、外部のサイトからダウンロードします。
次の画像にある様に、"+"ボタン(1の部分)を押して次にあるURLを入力しましょう。
(2の部分にURLを記入します)

https://p5play.org/v3/planck.js

この3つのライブラリが有効に慣れば準備完了です。

スプライトを使ってみる

最後にスプライトを使ってみます。(動作確認です)
下記のコードを参考にして打ち込んでみましょう。

let sprA;// スプライト用変数

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	// スプライトを作る
	sprA = new Sprite(width/2, height/2, 30);
}

function draw() {
	circle(mouseX, mouseY, 80, 80);
}

実行すると、下記の様にキャンバスの中央に丸いスプライトが現れます。
(色はランダムで決まります)

次回はp5.playについてのお話になります。