材料の紹介
こちらの材料を使ってコードで絵を描きたいと思います。
のRunPenボタンを押すとどんなことができるか確認できます。
Codepen
Codepenは、Webブラウザ上で動くコーディング環境です。Webブラウザさえあれば、いつでも簡単にコードを書き始めることができます。
公開された作品に
をつけることができ、自分の好きな作品をストックしたり面白い作品を簡単に見つけることができます。
p5.js
p5.jsは、クリエイティブコーディング界隈では老舗のProcessingというJavaのライブラリをJavaScriptに移植したものです。
非常にわかりやすく、簡単に扱える関数がたくさん用意されています。
YouTubeで様々な公式チュートリアル動画を見ることができます。英語ですが、YouTubeの自動翻訳機能で日本語字幕で見ることができます。
コードを書く準備
- Codepen のサイトを開き、左上のCREATE > Pen を選択します。コーディング環境が開きます。
- p5.jsのライブラリを追加します。右上の歯車アイコン > JavaScript を選択しJavaScriptの設定ポップアップを表示します。
Search CDNjsと書かれている検索ボックスで、p5.jsと入力しましょう。候補で表示されたp5.jsを選択し、下のボックスにp5.jsのURLが追加されればOKです。右上のSave & Closeでポップアップを閉じましょう。
スケッチを描きはじめよう
JSテキストエリアに以下のコードを書きましょう。
Processingは基本的にはこの2つの関数で構成されます。非常にシンプルですね。
setup関数は、はじめに１回だけ呼ばれる初期化関数です。1回だけの処理で十分なものや、変数の準備などはすべてここで行います。
draw関数は、毎フレーム呼ばれる描画関数です。作品の主軸となる箇所です。
たったこの２つの関数で様々なことが行なえます。
function setup() {
}
function draw() {
}ためしに100px x 100pxのキャンバスを作成して、 キャンバス中央に円を描きたいと思います。
function setup() {
// キャンバスを作成します。
createCanvas(100, 100);
}
function draw() {
// 円を描く関数です。引数には(x座標, y座標, 直径)を指定してます
ellipse(width/2, height/2, 50);
}たったこれだけのコードで円を描くことができます。
では次にマウスに追従させましょう。
function draw() {
ellipse(mouseX, mouseY, 50);
}標準で用意されている、mouseXとmouseY変数を使うだけで簡単にマウス座標を扱うことができます。
他にも公式ドキュメントに様々な変数や関数が用意されています。
英語ですが、サンプルコードでわかりやすく説明されており、Chromeブラウザなら日本語に翻訳できます。
冒頭のCodepenのサンプルにも簡単な説明を書いています。よかったら見てみてください