趣味としてのクリエイティブ・コーディング：102：OpenProcessing を使おう

趣味としてのクリエイティブ・コーディング 座標編、初回では p5.js や Processing での座標は「異常」なんだから難しくて当たり前ですよ、ということをやりました。

この「異常」な座標の難しさを克服するため、これから演習を通して慣れていきましょう。

演習のコードは p5.js で、実行は Web 上で簡単に実行できる OpenProcessing を使いたいと思います。

まずはこの OpenProcessing を説明しますね。

OpenProcessing とは？

OpenProcessing は Web 上で p5.js のコーディングや実行、自分の作品の投稿などが出来るサイトです。

OpenProcessing - Creative Coding for the Curious Mind

サイトのトップページでは投稿された作品がバックグラウンドで実行されています。
きれいですね。

英語のサイトですが、簡単に使うことが出来ますよ。

利用登録が必要？

コーディングと実行を試すだけなら利用登録は必要ありません。
書いたコードをサイト上に保存したり、作った作品を公開したい場合は登録が必要になります。

登録は「Join」からユーザ名、メールアドレス、パスワードの入力で簡単に可能です。

トップページには画面左上のここから戻れます。

使い方は簡単！

コードの保存とかせず、ちょっと試したいだけなら利用登録なしでも使えます。

トップページ上の「Create a sketch」をクリックしてください。

サンプルコードが書かれたエディタ画面が開きます。

ここを押すとこのコードを実行できます。
試してみましょう。

サンプルコードはマウスカーソルの場所に円を描画するというプログラムです。画面上でマウスを動かすとこんな風に描画されます。

再実行はここ。

エディタに戻るのはここです。

ちょっと遊んでみましょう

サンプルコードで少し遊んで OpenProcessing に慣れていきましょう。

// サンプルコード
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}
function draw() {
	ellipse(mouseX, mouseY, 20, 20);
}

まずは色を付けたいですね。

ellipse の前にこのコードを書き加えてみて下さい。

	fill(255, 0, 0);

意味は (赤：255, 緑：0, 青：0) です。

実行すると？

うっ！どぎつい…

バックグラウンドが灰色なのがいけないのかな？ 白に変えてみましょう。
background(100); を、以下に書き換えて下さい。

	background(255);

意味は (白：255) です。

円の枠線も消しましょう。
background(255); の後に以下のコードを書き加えてください。

	noStroke();

no（なし） stroke（線） です。

実行すると、

マウスの動きで線を引けるお絵描きペンのようになりました！

さて、ここでマウスの動きに合わせて描画しているのはここです。

	ellipse(mouseX, mouseY, 20, 20);

マウスカーソルの場所 (mouseX, mouseY)に、高さと幅がともに 20 の円を描いています。
マウスを動かすと沢山の円が連なって線を引いているように見えるわけです。

マウスカーソルの場所 (mouseX, mouseY)、これはまさに座標ですね！

色が赤一色だと味気ないので、マウスの座標によって色を変えてみましょう。
例えばこう。

	fill(224, mouseX % 256, mouseY % 256);

（赤：224, 緑：マウスの x 座標によって 0 から 255, 青：マウスの y 座標によって 0 から 255）

赤もこんな風に変えてみたり

fill((mouseX + mouseY)% 256, mouseX % 256, mouseY % 256);

青を時間で変化するようにすると、同じ座標でもタイミングで色に変化が出ます。

fill((mouseX + mouseY)% 256, mouseX % 256, frameCount % 256);

ペンの太さを 20 から 5 に細くしたりもできますよ。

	ellipse(mouseX, mouseY, 5, 5);

いろいろ遊べるでしょう？
最終的なコードはこうなりました。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  noStroke();
}

function draw() {
  fill(frameCount % 256, mouseX % 256, mouseY % 256);
  ellipse(mouseX, mouseY, 5, 5);
}

他にもいろいろ自分のアイディアでコードを書き換えて遊んでみてください。
どんな無茶しても壊れはしないので安心して。
わけわかんなくなったらトップに戻って最初からやり直せばいいんです。

こう出たら「このページから移動する」でコードは消えます。

遊んでみて面白いなと思ったら利用登録するといいと思います。
書きかけのコードも保存できるようになりますし。

では、次回からこの OpenProcessing を楽しく使いながら、座標に慣れていきましょう！