デジタルアートをやってみよう！

皆さんが、スマートフォンやパソコンでインターネットにあるページを見たりするときに使う「ブラウザ」。
このブラウザの上で動く、シンプルなデジタルアートを作るやり方を、紹介していければと思います。

この後の説明を見ながら進めていくと、例えば、とても短いプログラムでこのようなデジタルアートを作ることができます。

これは、カーソルが動いた部分に丸を描いていく、という仕組みになっているものです。
これを作るための準備として、まずは図形を描くやり方を試すことから始めて、その後にパソコンのマウス・タッチパッドの操作に反応するアートを作ってみましょう！

さっそく試してみる

いろいろな説明をする前に、まずは図形を描く簡単なやり方を、実際に試してみようと思います。

プログラムを書くところについて

この後、デジタルアートを描くのに「p5.js」というものを使います。
これは、JavaScriptというプログラミング言語で使える、図形や画像などを扱うのが得意な仕組みです。とりあえず今は、「そういう名前のものを使うんだな」という感じで、名前だけ覚えてもらっていれば大丈夫です。

さて、このp5.jsを使ったプログラムを作っていくのですが、そのやり方がいくつかあります。

例えば、自分のパソコンの中でプログラムを書いたのファイルを作って、それを使うやり方があります。
その他にも、最初に名前を出していた「ブラウザ」を使って、プログラムを書いていくやり方もあります。

ここでは、2つ目に書いたやりかたを使っていきます。
具体的には、ブラウザの上でp5.jsのプログラムを書いたり、動かした結果を見ることができる「p5.js Web Editor」というものを使います。

p5.js Web Editorを使う準備

それでは、p5.js Web Editorをブラウザで開いてみましょう。
https://editor.p5js.org/ というページを開くと、以下のような画面が表示されると思います。

おおまかにこの画面の説明をすると、画面左側がプログラムを書くところで、右側は作ったプログラムが動いた結果を表示する部分になります。

日本語表示にする

ページを開くと、説明が英語になっていると思いますので、まずは表示を日本語に変えてしまいましょう。
この下にある画像の中で、赤い矢印で示した「English」と書かれた部分を押します。 そうすると、メニューが開くので、その中の「日本語」を選びましょう。

画面の中のメニューの表示が、日本語に変わったのではないでしょうか。

プログラムを書いて動かしてみる

丸を描いてみる

それでは、少しプログラムを書き足して、図形（丸）を表示させてみましょう。

ページの左のほうを見てみてください。 すでに、このようなプログラムが書かれていると思います。

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

function draw() {
  background(220);
}

ここに、少しだけプログラムを書き足して動かしてみます。
補足は後で書いていきますので、まずはp5.jsで図形を描く、というのを体験してみましょう！

プログラムをこんな風にしてみてください。

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

function draw() {
  fill(50, 100, 200);
  ellipse(200, 200, 50, 50);
}

そして、プログラムを書きかえたら、画面左上にあるこの部分を押してください。

そうすると、画面の右のほうに灰色の背景と青っぽい丸が表示されたのではないかと思います。

先ほどのプログラムの数字の意味などは後で説明するので、もう少しプログラムの書きかえと動かしてみるのを試していきます。

カーソルの動いたところに丸を描く

今度は、プログラムをこのようにしてみてください。

function setup() {
  createCanvas(400, 400);
  background(220);
  noStroke();
}

function draw() {
  fill(random(0,50),random(50,150),random(100,200), 50);
  ellipse(mouseX, mouseY, 50, 50);
}

そして、プログラムを動かすボタンを押した後に、マウス・タッチパッドを操作して、画面の右側の部分でカーソルを動かしてみましょう！
どのようになったでしょうか？

このように、カーソルを動かしたところに、どんどん丸が描かれたのではないかと思います。

ちなみに、一度描いた内容を消したい時は、画面左上にあるこの部分を押しましょう。

このボタンを押すことで、動かしていたプログラムを止めることができます。

プログラムの説明： 丸を描いてみる

それでは、先ほど試しに書いたプログラムについて説明をしていきます。

1回だけの処理と繰り返される処理

先ほど書いたプログラムを見てみると、どちらも「setup()」と「draw()」という2つの部分に分かれています。

「setup()」のほうは最初に1回だけ行われる処理で、「draw()」のほうは何度も繰り返し行われる処理になります。 つまり、これらのプログラムは「setup()の中に書いたもの」⇒「draw()の中に書いたもの」⇒「draw()の中に書いたもの」⇒「draw()の中に書いたもの」⇒… という動きをします。
この話について、最初に書いた「丸を表示するプログラム」を使って、もう少し説明をしていきます。

1回だけの処理

最初に書いたプログラムの「setup()」では、「createCanvas(400, 400)」という行と、「background(220)」という行があります。

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

「createCanvas(400, 400)」という部分は、キャンバスと呼ばれるデジタルアートを書く場所を作っています。
400という数字が2つありますが、これはそれぞれ「キャンバスの縦の長さ」と「キャンバスの横の長さ」を示しています。そして、p5.js Web Editorの上だと、画面右側にこのキャンバスが作られることになります。

試しに、この数字を減らして200などにしてみたり、逆に増やしてみてください。そして実行した結果を見比べてみると、数字がどんな意味なのかが分かりやすいのではないかと思います。

その次に書いてある「background(220)」という部分は、先ほど作ったキャンバスの背景の色を決めるものです。
220という数字が色を決めるためのものになっています。

ここの数字を0や100、255といった数字に変えてみて、背景の色がどのようになるか確かめてみてください。
また、「background(0, 0, 200)」や「background(200, 0, 0)」、「background(0, 200, 0)」などと、3つの数字を書くのも試してみましょう。

色を指定する数字が一つの時は、白黒や灰色になり、3つの数字を指定した時は赤や青など色がついたものになったのではないでしょうか。
数字を一つだけにした時は、数字の大きさを変えていくと、真っ黒（数字でいうと0）から真っ白（数字でいうと255）になったり、その間の色の濃さの灰色になったりします。

そして、3つの数字を書いた場合は、1つ目から3つ目がそれぞれ「RGB（赤・緑・青）」を指定することになります。
この時、「background(200, 0, 200)」や「background(0, 200, 200)」、「background(100, 150, 100)」など、ゼロでない数字を2つ以上使うと、赤・緑・青の2つ以上の色を混ぜた色にすることができます（例えば、赤と青を同じぐらいの数字にすると、紫色にできたりします）。

ここで使った、数字で色を指定するやり方は、この後の図形の色をつける時にも出てきます。

繰り返される処理

今度は「draw()」の中を見ていきます。

function draw() {
  fill(50, 100, 200);
  ellipse(200, 200, 50, 50);
}

「fill(50, 100, 200)」という部分は、キャンバスの真ん中あたりに描いた丸の中の色（塗りつぶしの色）を指定するためのものです。
先ほど、「background()」の数字を変えてみた時と同じように、3つの数字の部分を自分の好きな数字に変えてえみてください。

その後に出てくる「ellipse(200, 200, 50, 50)」は楕円（だ円）という丸を描くためのものです。
だ円というのは、縦と横の長さが違う丸のことを言います。

「あれ？描かれた丸は縦と横の長さが同じだったけど。」と思われたかもしれません。
これについて、説明をしていきます。

そのために「ellipse(200, 200, 50, 50)」で書いている4つの数字の意味を、補足することにします。
これは順番に「丸の中心のx座標（キャンバス上での横方向の位置）」、「丸の中心のy座標（キャンバス上での縦方向の位置）」、「丸の横方向の長さ」、「丸の縦方向の長さ」を指定するものです。

これも「ellipse(100, 200, 50, 50)」や、「ellipse(200, 200, 100, 50)」などといったように、数字を変えてみてどうなるか試すと、理解しやすくなると思います。

「丸の中心のx座標」と「丸の中心のy座標」はそれぞれ200という数字になっていますが、この数字を指定するとなぜ円がキャンバスの中心に描かれるのでしょうか？
ここでキャンバスの座標について少し補足します。最初に「createCanvas(400, 400)」という部分で縦も横も400の大きさのキャンバスを作っていたため、縦も横も0から400までの数字の範囲で場所を指定することができるようになっています。ここで「200, 200」という数字は、それらのちょうど半分の値になっているので、キャンバスの中心の位置を意味する数字になります。

次に、「ellipse()」の3つ目・4つ目で書いていた数字を見てみましょう。
これらはそれぞれ、だ円の縦方向の長さと横方向の長さになると説明していました。そこにどちらも「50」という同じ数字を指定をしていたため、縦も横も同じ大きさの丸になっていたというわけです。
ちなみに、「ellipse(200, 200, 50, 50)」は「ellipse(200, 200, 50)」というように、4つ目の数字を省略して書くこともできます。この時、省略された4つ目の数字の部分は、3つ目に指定したのと同じ数字が指定されることになります）。

プログラムの説明： カーソルの動いたところに丸を描く

今度は、2つ目に試した「カーソルの動いたところに丸を描く」というプログラムについて、説明をしていきます。
なお、1つ目のプログラムで説明した仕組みの部分は、ここでは説明を省略します。

1回だけの処理

function setup() {
  createCanvas(400, 400);
  background(220);
  noStroke();
}

ここで登場している「noStroke()」は、図形の線を描かない、という意味になります。
この2つ目のプログラムも、1つ目のプログラムと同じように「draw()」の中で「ellipse()」を使って丸を描く部分が出てきます。

それについて、何も特別な指定をしなかった場合は、「丸の周りを線で囲って、その中に色をつける」という描き方になります。これについて「noStroke()」を指定していると、「丸の周りを囲む線は描かず、丸の中に色をつけるだけ」となります。1つ目のプログラムの時に描いた丸と、見た目を見比べてみてください。

繰り返される処理

2つ目のプログラムの「draw()」の部分も見ていきます。

function draw() {
  fill(random(0,50),random(50,150),random(100,200), 50);
  ellipse(mouseX, mouseY, 50, 50);
}

ここで使っている「fill()」は、1つ目のプログラムでも出てきた、図形の塗りつぶしの色を指定するものです。
しかし、その中で「random()」というものを使っていたり、「fill()」の中の「random()」を使った部分と数字を書いた部分の数が3つでなく4つになっていたりします。これはどういうことでしょうか？

まず「random()」という部分については、「乱数という仕組みを使ってランダムな数字を使う」というものです。デジタルアートではよく使われています。
「random()」の中で「(50,150)」などというように、2つの数字を書いていますが、これはランダムに選ばれる数字の最小値と最大値を指定したものです。
例えば「random()」の中の1つ目の「random(0,50)」は、0以上で50より小さい数字が何か選ばれます（ちなみに、その数字は整数ではなく小数になります）。
※ 0は選ばれる数字に含まれますが、50は選ばれる数字には含まれません
この仕組みを使って、「fill()」の1つ目から3つ目の数字の部分、つまりRGB（赤・緑・青）の色を指定している部分の数字を作っています。このやり方をすると、丸を描くたびにRGBの数字が変わるため、丸の色の変化をつけることができます。

次に、2つ目のプログラムの「fill()」で、4つ目の数字を書いている部分の説明をします。
「random(0,50),random(50,150),random(100,200)」という3つの数字の後に「50」という数字が書かれているのが分かります。これは何を意味する数字なのでしょうか？
これは透明度を指定するもので、この部分で書く数字が0に近いほど、丸の後ろが透けて見えるような色になります（0にすると完全に透明になるため、そもそも丸が見えない状態になってしまいます）。ちなみに、1つ目のプログラムのように4つ目の数字を何も指定していない場合は、「この透明度に100を指定したのと同じ状態」つまり「後ろが全く透けない状態」になります。

ここまでの説明で、2つ目のプログラムの説明のほとんどが完了しました。あとは、最後の行の「ellipse()」の説明が残っているだけです。
1つ目のプログラムとの違いは、最初の2つの数字（「丸の中心のx座標」と「丸の中心のy座標」をそれぞれ指定したもの）が「mouseX, mouseY」という内容になっています。
これは、キャンバス上でカーソルを動かした時に、そのカーソルのx座標とy座標を示すものになっています。そのため、プログラムの丸の位置を指定する部分でこの「mouseX, mouseY」を使い、キャンバスの上でカーソルを動かすと、丸が描かれる位置がカーソルの位置に合わせたものになったわけです。

この「mouseX, mouseY」は、簡単にカーソルの移動を利用したプログラムを作ることができるので、「マウス・タッチパッドでカーソルを動かした時に何かが起こる」といったようなプログラムを作る時にとても便利です。

参考になるページなど

以上で、今回作ってみたプログラムの説明は終わりです。
この後は、p5.jsでできることを知る・体験することができるページなどを紹介します。

まず1つ目はこのページで、いろいろなサンプルを見たり、体験したりすることができます。
完全に翻訳がされた状態ではないため、説明が英語で出てきたりする部分が混じりますが、あまり書いてあることは気にせず、動いている様子を見たり体験できるものをいくつか試してみると良いです。

●p5.js | examples
　https://p5js.jp/examples/

「たくさんありすぎて選ぶのに困った」という場合は、ここに書いてあるものが試しやすかったり、見た目で分かりやすいものになっているので、良かったら見てみてください。

• 「入力」の中の「Clock」や「Mouse 1D」・「Mouse 2D」、「Storing Input」
• 「インタラクション」の「Follow 3」や「Reach 2」
• 「モーション」の「Bouncy Bubbles」や「Morph」
• 「3D」の「Geometries」や「Sine Cosine in 3D」
• 「シミュレート」の「Forces」や「Particle System」、「Soft Body」、「Chain」、「Snowflakes」

また、ここで書いていない他のサンプルも、p5.jsで何ができるかを知るのに役立つものになっているので、少しずつでもぜひ見てみてください！

まとめ

今回、p5.jsを使ってデジタルアートを描くというのを試しました。

このp5.jsに関して、今回使った図形を描く・カーソルの位置に合わせて描画をする等といった機能は、そのごく一部のものです。
その他にもデジタルアートを描くための便利な機能があったり、2Dの平面上のアートだけでなく、3Dの立体的な図形・アートを描くこともできます。また、カメラの映像を使う仕組みもあったり、音を扱うこともできたりします。

もし、「もっといろいろなデジタルアートを描いてみたい！」という場合は、「参考になるページ」の部分に掲載したページを見てみたり、自分で他の情報を調べたりして、いろいろなデジタルアートを作ってみてください！

なお、p5.jsはJavaScriptのプログラムで使うものです。そのため、p5.js用に用意されたものだけでなく、それ以外のJavaScript用の仕組みと組み合わせることもできます。
どのようなものがあるか、動いている様子の紹介のみとなりますが、最後に自分が作った例をいくつか掲載してみようと思います。

発展編

今回試した内容と比べると、かなり難しい内容になり、p5.js以外の仕組みを組み合わせる必要があるものですが、「p5.jsを活用してこんなこともできたりするよ」というのを紹介する意味で、自分が作ったものの一部を少し紹介してみます。

機械学習・AIの仕組みと物理演算エンジンと組み合わせる

最初に紹介するものは、カメラにうつった手を開くと、開いた手から丸がたくさん出てきます。そして出てきた丸は、他の丸や床のような部分との間でぶつかるような動きをしたり、重力がかかっている動きなどをするものになります。

この仕組みについて、「カメラでうつった手の場所や手が開いているかどうかを判定する部分は、機械学習・AIを使ったもの」です。
また、その結果を使って丸を描画しているのはp5.jsになるのですが、その丸が他のものとぶつかったり重力を受けたような動きをするという部分に「物理演算エンジン」を使っています。

この物理演算エンジンは、重力や摩擦・衝突した物体にかかる力といった、リアルな物体の動きを作るのに必要な難しい計算が必要な仕組みを、簡単に使えるように助けてくれます。物理演算エンジンの仕組みを理解するのも少し大変になる部分ですが、使いこなせると、楽しくて複雑な動きを含む作品を作ることができます。

機械学習・AIの仕組みと3Dの表示を組み合わせる

次に紹介するのは、カメラにうつった手を動かすと、3つの箱のようなものが手の動きに連動して移動します。その時、縦と横だけでなく手前から奥など3Dの動きをするようになっているものです（また、箱のようなものが手前に近づいた場合に、見た目の大きさが変わるようにもなっています）。

この仕組みについて、「カメラでうつった手を認識する部分は、機械学習・AIを使ったもの」です（こういう自分の動きに合わせて何かする、というものが好きでよく作ってます）。
そして、箱のようなものの場所が動いたり、見た目の大きさが変わるところはp5.jsを使った描画です。p5.jsは3Dを扱う仕組みがあるため、p5.js以外の別の仕組みを用意しなくても、このような3D表現を扱うこともできます。

アニメーションを扱う仕組みを組み合わせる

最後に紹介するのは、丸が跳びはねるアニメーションです。5つの丸が上から下に落ちてきて、一番下にぶつかった時につぶれたような形になったりもしながら、下から上に跳ね返るような動きをします。

先ほどの物理演算エンジンを使った話でも、動きを扱う話をしていましたが、こちらは「モーショントゥイーン」や「トゥイーンアニメーション」と言われる別の仕組みを使っています。丸が上下に動く動きや、つぶれるような見た目を作る部分ははp5.jsだけで作ることもできる部分ではあるのですが、この「モーショントゥイーン」を使うとそれをより簡単に作ることができます。
ここでは詳しい説明は省略しますが、アニメーションを作るのに興味がある方は、「モーショントゥイーン・トゥイーンアニメーション」について調べてみてください。