この章では、描画された図形に色、線の太さ、透明度などのスタイルを設定する方法について学びます。また、描画される順番、レイヤーの概念についても説明します。

図形にスタイルを設定する

p5.js では、描画される図形に対して、色や線の太さ、透明度などのスタイルを設定することができます。スタイルを設定する関数fill()、stroke(), strokeWeight()などについてみていきましょう。

これらのスタイルを設定する関数は、図形を描画する前に呼び出す必要があります。そして、一度設定したスタイルは、それ以降に描画される図形にも適用されます。

function setup() {
    createCanvas(520, 320);
    background('#D6E3ED');

    stroke(50); // 線の色をグレーに設定
    strokeWeight(6); // 線の太さを6に設定

    fill(255); // 図形の色を白に設定(グレースケール)
    rect(60, 100, 120, 120);

    fill(62, 168, 255); // 図形の色を青に設定（RGB）
    rect(200, 100, 120, 120);

    fill('#0868CE'); // 図形の色を青に設定（HEX）
    rect(340, 100, 120, 120);
}

このコードではstroke(50)として、描画される図形の線の色をグレーに設定しています。すると、その後に描画される図形の線は、全てグレーになります。一方でfill関数はrect関数が実行する前に必ず実行して、色を設定しています。そのため、それぞれのrect関数で描画される正方形の色が異なります。

色の指定

p5.js では、色を指定する方法として、以下の 3 つがあります。

透明度の指定

図形の透明度を指定してみましょう。透明度は、fill()やstroke()関数の第 2 引数、または第 4 引数に、0 から 255 の範囲で指定します。0 が完全に透明、255 が完全に不透明を表します。

function setup() {
    createCanvas(520, 320);
    background('#D6E3ED');

    noStroke();
    fill(255, 0, 0, 100);
    circle(230, 140, 200);
    fill(0, 255, 0, 100);
    circle(290, 140, 200);
    fill(0, 0, 255, 100);
    circle(260, 190, 200);
}

fill関数の第 4 引数を100として、半透明な図形を描画することで、図形が重なり合った部分の色が混ざっていることがわかります。

描画される順番

プログラミングでは一般に、コードを「逐次処理」します。これは、プログラムが上から下に順番に処理されるということです。次のコードを見てみましょう。

function setup() {
    createCanvas(520, 320);
    background('#D6E3ED');

    circle(320, 140, 200);
    rect(0, 150, 520, 140);
}

円は長方形の後ろに隠れています。これは、コードが逐次処理により上から下へ実行されて、circle関数がrect関数よりも先に呼び出されるためです。後に呼び出されたrect関数は、先に呼び出されたcircle関数を上書きしたので、円が長方形の後ろに隠れています。

複雑な形を作る

p5.js は単純な図形を描画するだけでなく、複雑な形を作ることもできます。複数の点を繋ぎ合 わせて、新しい形を定義してみましょう。

beginShape()は、新しい形を作るための合図をする関数です。続いて、xy 平面に１つ１つ点を置くようにして、vertex(x, y)関数で頂点を定義します。最後にendShape(CLOSE)を呼び出すことで、形を閉じることができます。

function setup() {
    createCanvas(520, 320);
    background('#D6E3ED');

    beginShape();
    vertex(260, 80);
    vertex(170, 160);
    vertex(220, 160);
    vertex(220, 240);
    vertex(300, 240);
    vertex(300, 160);
    vertex(350, 160);
    endShape(CLOSE);
}