Chapter 03

円の描画

miku
miku
2021.11.10に更新

描画で最も簡単なのは点を扱うこと、つまり画面のピクセル一つ一つに色を描くことだが、ピクセル単位の描画で何かを表現するのは難しい。

なので、点ではなく円を扱うところから始めよう。

円の描画

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  // circle(x座標, y座標, 直径)
  circle(0, 0, 200);
}

円を描画するには circle(x座標, y座標, 直径) と指定する。必要な情報は座標と直径で、半径ではなく直径だということに注意してほしい。

上記のコード例で、座標 (0, 0) に直径200pxの円を描くことができるが、(0, 0) とは具体的にどの場所になるのかを確認しておきたい。

Canvasの座標系では、左上が原点 (0, 0) で、右に行くほど x が大きく、下に行くほど y が大きくなる。なので circle(0, 0, 200) はCanvasの左上に直径200pxの円を描く命令になる。

コードを実行すると、円の右下部分しか描かれていないことがわかる。これは circle() に指定した座標は、円の中央の座標を表すからで、右下以外の部分は画面からはみ出ていて描画がされない。なので、円の描画を行う場合は、この場所に円の中央を置きたいな、と考えるようにしよう。

次は円の全体が見えるようにCanvasの中央に描画をしたい。

画面中央に円を描画する

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  circle(width / 2, height / 2, 200);
}

Canvasの中央座標は (Canvasの横幅 / 2, Canvasの縦幅 / 2) となる。

横幅・縦幅を取得するのに windowWidth, windowHeight を使用してもいいが、createCanvas() で生成したCanvasのサイズは width, height という短い名前で取得することができるので、これを利用してみよう。つまり circle(width / 2, height / 2, 直径) と指定すればいい。

次は色の指定を行いたい。

塗りとストローク

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  strokeWeight(10); // フチの太さ
  stroke(100); // フチの色
  fill(240); // 塗りの色
  circle(width / 2, height / 2, 300);
}

p5.jsでは形状の中身の色を決める「塗り」、フチ部分の色を決める「ストローク」、フチ部分の太さを決める「ストロークの太さ」がある。デフォルトでは、塗りは白、ストロークは黒、ストロークの太さは1pxである。fill() で塗りの色、stroke() でフチの色、strokeWeight() でフチの太さを指定する。これら3種類の関数は、指定の順番によって表示が変わることはないので、順番は好きに決めてもらっていい。

色の指定方法は複数あり、ここでは一番扱いが簡単なグレースケールでの指定方法を利用する。

stroke(色番号); // 色番号 = 0~255
fill(色番号); // 色番号 = 0~255

stroke()fill() に1つの色番号を指定するとグレースケールでの色指定になる。グレースケールというのは、黒や白、その間の灰色のような色味のない色のことである。指定できる値の範囲は 0~255 で、0 に近づくほど暗く、逆に 255 に近づくほど明るくなる。

塗りとストローク その2

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  strokeWeight(10);
  stroke(240);
  noFill(); // 塗りなし
  // 幅 / 4なので、横25%の位置に円を表示する
  circle(width / 4, height / 2, 100);

  noStroke(); // ストロークなし
  fill(240);
  // 幅 / 4 * 3なので、横75%の位置に円を表示する
  circle(width / 4 * 3, height / 2, 100);
}

noFill() は塗りを無しに、noStroke() はストロークを無しにする。

このような塗りの設定は、一度関数を呼び出すと、次の塗りの設定が呼び出されるまで適用され続ける。例えば fill(255) を設定すると、別の fill()noFill() が呼び出されるまで、形状の塗りが白色で固定になる。

ここまでは指定したコードの通りの描画になるが、次はマウスやランダムを利用したコードを書きたい。

マウス座標を利用する

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
 // マウス座標に円を描く
  circle(mouseX, mouseY, 100);
}

マウスポインタがある位置に円を描く作例。

マウス座標を取得するには mouseX, mouseY を参照する。あとは直径は決めて circle(mouseX, mouseY, 直径) と書けばいい。ただし、setup() に書くと一回しか実行されないので、draw() の中に記述をする必要がある。

画面内でマウスを動かすと、マウス座標に円が描画されるが、描いた円は残り続ける。残さないようにするならば画面をクリアする必要がある。

画面のクリア

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  clear();
  circle(mouseX, mouseY, 100);
}

Canvasで描いたものをクリアするには clear() を呼び出せばいい。

画面をクリアするかどうかは用途によって変わる。上記作例では、クリアをしなければお絵かきのようになり、クリアをすれば描画する円がマウスカーソルのような扱いになる。

マウス座標を利用する その2

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  clear();
  // 直径をマウスのx座標にする
  circle(mouseX, mouseY, mouseX);
}

先程と同じで、マウス座標に円を描くが、円の直径をマウスのx座標にする作例。つまり、画面内でマウスを右に移動させるほど円が大きくなる。

マウス座標を利用する その3

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  clear();
  circle(mouseY, mouseX, 100);
}

circle(mouseY, mouseX, 直径) と指定すると、マウスを上下に動かすと円が左右に、マウスを左右に動かすと円が上下に移動する作例。実用上では役に立たない動きではあるが、こういう実験から面白いものが生まれたりすることがある。

次はランダムを扱う。ランダムはクリエイティブコーディングにおける花形機能だ。

ランダムを利用する

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  // 描く円の直径をランダムにする
  circle(mouseX, mouseY, random(100));
}

マウス座標に円を描くが、円の直径をランダムにする作例。

p5.jsでランダムを扱うには random() を利用する。random() には色々な使い方があるが、今は下記の2つを覚えておけばいい。

random(x); // 0以上 x未満の実数を返す
random(a, b); // a以上 b未満の実数を返す

上記作例では、直径に random(100) を指定しているので、直径が0以上 100未満の大きさになる。

ランダムを利用する その2

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
}

function draw() {
  // ストロークの太さを1~5にする
  strokeWeight(random(1, 5));
  // ストロークの色を180~255にする
  stroke(random(180, 255));
  // 直径を50~300にする
  circle(width / 2, height / 2, random(50, 300));
}

ストロークの太さと色、それに円の直径をランダムにした作例。

最後に楕円の描き方を紹介する。

楕円の描画

function setup() {
  createCanvas(windowWidth, windowHeight);

  ellipse(width / 2, height / 2, width, height);
}

楕円を描くには ellipse(x座標, y座標, 横幅, 縦幅) を指定する。座標は circle() と同じく中央座標を指定する。

楕円を利用した作例

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
}

function draw() {
  // ストロークの色をランダムにする
  stroke(random(180, 255));
  // 楕円の横幅と縦幅をランダムにする
  ellipse(width / 2, height / 2, random(50, 300), random(50, 300));
}

ストロークの色、楕円の横幅と縦幅をランダムにした作例。

楕円を利用した作例 その2

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
}

function draw() {
  stroke(random(255));
  ellipse(random(width), height / 2, random(300), random(300));
}

先程の作例に加えて更に、楕円のx座標もランダムにした作例。

この章のまとめ

  • 円を描くには circle(x, y, 直径) を指定する。
  • 楕円を描くには ellipse(x, y, 横幅, 縦幅) を指定する。
  • strokeWeight() でストロークの太さを、stroke() でストロークの色を、fill() で塗りの色を指定する。
  • stroke(240) のように1つの数を指定するとグレースケールでの色指定になり、指定できる数の範囲は 0~255 である。
  • noStroke() でストロークを無効に、noFill() で塗りを無効にする。
  • windowWidth, windowHeight が参照した時点での画面幅・高さを返すのに対して、width, heightcreateCanvas() で生成したCanvasの幅と高さを返す。
  • 画面の中央座標は (width / 2, height / 2) で参照できる。
  • mouseX, mouseY でマウス座標を取得する。
  • random(x) で0以上x未満の実数を返す。
  • random(a, b) でa以上b未満の実数を返す。