【p5.js】Generative Design with p5.js「色 P_2_1_1_01、02」のコードを読み解く

// P_2_1_1_01
//
// Generative Gestaltung – Creative Coding im Web
// ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018
// Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni
// with contributions by Joey Lee and Niels Poldervaart
// Copyright 2018
//
// http://www.generative-gestaltung.de
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * changing strokeweight and strokecaps on diagonals in a grid
 *
 * MOUSE
 * position x          : left diagonal strokeweight
 * position y          : right diagonal strokeweight
 * left click          : new random layout
 *
 * KEYS
 * 1                   : round strokecap
 * 2                   : square strokecap
 * 3                   : project strokecap
 * s                   : save png
 */
'use strict';

var tileCount = 20;
var actRandomSeed = 0;

var actStrokeCap;

function setup() {
  createCanvas(600, 600);

  actStrokeCap = ROUND;
}

function draw() {
  clear();
  strokeCap(actStrokeCap);

  randomSeed(actRandomSeed);

  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;

      var toggle = int(random(0, 2));

      if (toggle == 0) {
        strokeWeight(mouseX / 20);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }
      if (toggle == 1) {
        strokeWeight(mouseY / 20);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);
      }
    }
  }
}

function mousePressed() {
  actRandomSeed = random(100000);
}

function keyReleased() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

  if (key == '1') actStrokeCap = ROUND;
  if (key == '2') actStrokeCap = SQUARE;
  if (key == '3') actStrokeCap = PROJECT;
}

冒頭コメントの前半はクレジット。後半の概要の訳。

グリッドの対角線の線の太さと線のキャップを変更する

マウス
位置x：左斜めストロークウェイト
位置y：右対角線の線幅
左クリック：新しいランダムレイアウト

キー
1：丸いストロークキャップ
2：四角いストロークキャップ
3：ストロークキャップの投影
s：pngを保存

全体構成

// グローバル変数

function setup() {
  // ページ読み込み時の処理
}

function draw() {
  // 一定時間ごとに繰り返し実行
}

function mousePressed() {
  // マウスボタンを押した時の処理
}

function keyReleased() {
  // 文字キーを離した時の処理
}

mousePressed()メソッドはマウスボタンを押した時の処理

The mousePressed() function is called once after every time a mouse button is pressed.

mousePressed（）関数は、マウスボタンが押されるたびに呼び出されます。

※参考：p5.js | reference

グローバル変数

今回は冒頭のグローバル変数の設定が多い。改行が入って3グループに分かれている。

var tileCount = 20;
var actRandomSeed = 0;

var actStrokeCap;

変数tileCountは20
変数actRandomSeedは0
変数actStrokeCapは宣言のみ

setup()メソッドの中身

ページ読み込み時の処理

function setup() {
  createCanvas(600, 600);

  actStrokeCap = ROUND;
}

createCanvas()メソッドを実行（引数は左から600、600）
actStrokeCapの値をROUNDに

まず幅600px、高さ600pxのキャンバスを作る。

先ほど宣言のみだった変数actStrokeCapの値はROUND。このROUNDってなんだろう。

公式リファレンスに「strokeCap()とstrokeJoin()で使う」とある。

※参考：p5.js | reference

strokeCap()はdraw()メソッドに出てくるし、この変数の名前にも含まれているので今回はこちらだな。

draw()メソッドの中身

draw()メソッド全体

一定時間ごとに繰り返し実行

function draw() {
  clear();
  strokeCap(actStrokeCap);

  randomSeed(actRandomSeed);

  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;

      var toggle = int(random(0, 2));

      if (toggle == 0) {
        strokeWeight(mouseX / 20);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }
      if (toggle == 1) {
        strokeWeight(mouseY / 20);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);
      }
    }
  }
}

ボリュームがあるのでブロックごとに見ていく。

いくつかのメソッドを実行

最初にいくつかのメソッドを実行している

  clear();
  strokeCap(actStrokeCap);

  randomSeed(actRandomSeed);

clear()メソッドを実行（引数はなし）
strokeCap()メソッドを実行（引数はactStrokeCap）
randomSeed()メソッドを実行（引数はactRandomSeed）

clear()メソッドはピクセルのクリア。キャンバスの描画をクリアする。

※参考：【p5.js】Generative Design with p5.js「文字 P_3_0_01」のコードを読み解く - クモのようにコツコツと

strokeCap()メソッドは線の先端の形状を設定。引数は先ほど出てきたactStrokeCapで初期値はROUND=角丸になる。

※参考：【p5.js】Generative Design with p5.js「形 P_2_0_01」のコードを読み解く - クモのようにコツコツと

randomSeed()メソッドは初めて出てきた。

Sets the seed value for random().

By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run.

random（）のシード値を設定します。

デフォルトでは、random（）はプログラムが実行されるたびに異なる結果を生成します。 ソフトウェアが実行されるたびに同じ擬似乱数を返すように、シードパラメータを定数に設定します。

※参考：p5.js | reference

シード値とは「乱数を作成する時の最初の設定値」のこと。

※参考：IT用語：シード値とは | 「負けるが勝ち」でもいつかは六本木ヒルズ

randomSeed()の引数actRandomSeedは冒頭のグローバル変数では0が入る。

多重ループ

次に多重ループがある。

for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {
    // 処理
    }
  }

外側のループ：変数gridYの初期値は0、tileCountの回数分繰り返す、gridYを1ずつ加算する
内側のループ：変数gridXの初期値は0、tileCountの回数分繰り返す、gridXを1ずつ加算する

外側はgridY、内側はgridXが対象。回数はいずれもtileCountなので20回。

次、for文の中の処理を見ていく。

変数を設定

最初にいくつか変数を設定している

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;

      var toggle = int(random(0, 2));

変数posXをwidth割るtileCount掛けるgridXに
変数posYをheight割るtileCount掛けるgridYに
変数toggleでint()メソッドを実行（引数はrandom()メソッド）
random()メソッドを実行（引数は左から0, 2）

posXはキャンバス幅(600)をtileCount(20)掛ける1(=20)、2(=40)、3(=60)…の値で割っていく

posYはキャンバス高さ(600)をtileCount(20)掛ける1(=20)、2(=40)、3(=60)…の値で割っていく

int()は小数点を切り捨てて整数にするメソッドで、random()は2つの引数の間の乱数を出すメソッド。

※参考：【p5.js】Generative Design with p5.js「画像 P_4_1_1_01」のコードを読み解く - クモのようにコツコツと

toggleの結果でif文（斜線1）

toggleの乱数の結果を元に2つのif文がある。

      if (toggle == 0) {
        strokeWeight(mouseX / 20);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }

もしtoggleが0なら
strokeWeight()メソッドを実行（引数はmouseXを20で割った値）
line()メソッドを実行（引数は左からposX, posY, posX足すwidth割るtileCount, posY足すheight割るtileCount）

strokeWeight()メソッドは線の太さを変える。マウスの左右位置を20で割った数字で変わる。

※参考：【p5.js】Generative Design with p5.js「形 P_2_0_01」のコードを読み解く - クモのようにコツコツと

line()メソッドは線の描画

line(x1, y1, x2, y2)

引数は左から点1の横、縦、点2の横、縦。

※参考：【p5.js】Generative Design with p5.js「形 P_2_0_01」のコードを読み解く - クモのようにコツコツと

点1の横：posX
点1の縦：posY
点2の横：posX足すwidth割るtileCount
点2の縦：posY足すheight割るtileCount

これは左上から右下への斜線の描画設定

toggleの結果でif文（斜線2）

もう一つのif文

      if (toggle == 1) {
        strokeWeight(mouseY / 20);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);
      }

もしtoggleが1なら
strokeWeight()メソッドを実行（引数はmouseYを20で割った値）
line()メソッドを実行（引数は左からposX, posY足すwidth割るtileCount, posX足すheight割るtileCount, posY）

こちらのstrokeWeight()はマウスの上下位置で線の太さが変わる

line()メソッドの引数は

点1の横：posX
点1の縦：posY足すwidth割るtileCount
点2の横：posX足すheight割るtileCount
点2の縦：posY

こちらは右上から左下への斜線の描画設定

mousePressed()メソッドの中身

マウスボタンを押した時の処理

function mousePressed() {
  actRandomSeed = random(100000);
}

actRandomSeedでrandom()メソッドを実行（引数は100000）

初期値は0だったactRandomSeedがマウスを押すと乱数になる。引数は一つなので0から100000までの乱数になる。

If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number.

1つの引数が指定され、それが数値である場合、0から（数値を含まない）までの乱数を返します。

※参考：p5.js | reference

keyReleased()メソッドの中身

文字キーを離した時の処理

function keyReleased() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

  if (key == '1') actStrokeCap = ROUND;
  if (key == '2') actStrokeCap = SQUARE;
  if (key == '3') actStrokeCap = PROJECT;
}

もしsかSキーだったらキャンバスをpng画像として保存
もし1キーだったらactStrokeCapをROUNDに
もし2キーだったらactStrokeCapをSQUAREに
もし3キーだったらactStrokeCapをPROJECTに

s、Sキーはいつもの画像保存。

1〜3キーはactStrokeCapに入るが、これはstrokeCap()の引数なので線の形状が変わる。

ROUNDは角丸、SQUAREとPROJECTは直角だがPROJECTは線の太さの分、先端の系が長い。

※参考：p5.js | reference

色 P_2_1_1_02

次のサンプルも「色 P_2_1_1_01」と似ているので一緒に見ていく。

完成品

色 P_2_1_1_02

「色 P_2_1_1_01」と動きは同じだが、2種類の斜線に別の色が付いている
1〜7の数字を打つと線の形や色がいろいろ変わる（0でリセット）

※参考：p5.js Web Editor

JSコード全体

// P_2_1_1_02
//
// Generative Gestaltung – Creative Coding im Web
// ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018
// Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni
// with contributions by Joey Lee and Niels Poldervaart
// Copyright 2018
//
// http://www.generative-gestaltung.de
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * changing strokeweight on diagonals in a grid with colors
 *
 * MOUSE
 * position x          : left diagonal strokeweight
 * position y          : right diagonal strokeweight
 * left click          : new random layout
 *
 * KEYS
 * s                   : save png
 * 1                   : round strokecap
 * 2                   : square strokecap
 * 3                   : project strokecap
 * 4                   : color left diagonal
 * 5                   : color right diagonal
 * 6                   : transparency left diagonal
 * 7                   : transparency right diagonal
 * 0                   : default
 */
'use strict';

var tileCount = 20;
var actRandomSeed = 0;

var actStrokeCap;

var colorLeft;
var colorRight;
var alphaLeft = 255;
var alphaRight = 255;

function setup() {
  createCanvas(600, 600);

  actStrokeCap = ROUND;
  colorLeft = color(197, 0, 123, alphaLeft);
  colorRight = color(87, 35, 129, alphaRight);
}

function draw() {
  clear();
  strokeCap(actStrokeCap);

  randomSeed(actRandomSeed);

  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;

      var toggle = int(random(0, 2));

      if (toggle == 0) {
        stroke(colorLeft);
        strokeWeight(mouseX / 10);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }
      if (toggle == 1) {
        stroke(colorRight);
        strokeWeight(mouseY / 10);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);
      }
    }
  }
}

function mousePressed() {
  actRandomSeed = random(100000);
}

function keyReleased() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

  if (key == '1') actStrokeCap = ROUND;
  if (key == '2') actStrokeCap = SQUARE;
  if (key == '3') actStrokeCap = PROJECT;

  var black = color(0, 0, 0, 255);
  if (key == '4') {
    if (colorsEqual(colorLeft, black)) {
      colorLeft = color(197, 0, 123, alphaLeft);
    } else {
      colorLeft = color(0, 0, 0, alphaLeft);
    }
  }
  if (key == '5') {
    if (colorsEqual(colorRight, black)) {
      colorRight = color(87, 35, 129, alphaRight);
    } else {
      colorRight = color(0, 0, 0, alphaRight);
    }
  }

  if (key == '6') {
    if (alphaLeft == 255) {
      alphaLeft = 127;
    } else {
      alphaLeft = 255;
    }
    colorLeft = color(red(colorLeft), green(colorLeft), blue(colorLeft), alphaLeft);
  }
  if (key == '7') {
    if (alphaRight == 255) {
      alphaRight = 127;
    } else {
      alphaRight = 255;
    }
    colorRight = color(red(colorRight), green(colorRight), blue(colorRight), alphaRight);
  }

  if (key == '0') {
    actStrokeCap = ROUND;
    alphaLeft = 255;
    alphaRight = 255;
    colorLeft = color(0, 0, 0, alphaLeft);
    colorRight = color(0, 0, 0, alphaRight);
  }
}

function colorsEqual(col1, col2) {
  return col1.toString() == col2.toString();
}

冒頭コメントの前半はクレジット。後半の概要の訳。

グリッドの対角線の線の太さを色で変更

マウス
位置x：左斜めストロークウェイト
位置y：右対角線の線幅
左クリック：新しいランダムレイアウト

キー
s：pngを保存
1：丸いストロークキャップ
2：四角いストロークキャップ
3：ストロークキャップの投影
4：左斜めカラー
5：右対角線の色
6：透明度左斜め
7：透明度右斜め
0：デフォルト

数字キーの設定が「色 P_2_1_1_01」よりかなり増えている！

全体構成

// グローバル変数

function setup() {
  // ページ読み込み時の処理
}

function draw() {
  // 一定時間ごとに繰り返し実行
}

function mousePressed() {
  // マウスボタンを押した時の処理
}

function keyTyped() {
  // 文字キーを押した時の処理
}

function keyReleased() {
  // キーが離れた時の処理
}

function colorsEqual() {
  // 色を等しくする処理
}

keyReleased()メソッドは前回も合ったキーが離れた時の処理。

※参考：【p5.js】Generative Design with p5.js「画像 P_4_1_1_01」のコードを読み解く - クモのようにコツコツと

colorsEqual()関数はp5.jsの組み込みメソッドではない。関数名から色を等しくする処理と思われる。

グローバル変数

「色 P_2_1_1_01」と違う部分を見ていく。

まずは冒頭に追加されたグローバル変数。

var colorLeft;
var colorRight;
var alphaLeft = 255;
var alphaRight = 255;

変数colorLeftを宣言（値はなし）
変数colorRightを宣言（値はなし）
変数alphaLeftの値は255
変数alphaRightの値は255

setup()の内容

ページ読み込み時の処理

function setup() {
  createCanvas(600, 600);

  actStrokeCap = ROUND;
  colorLeft = color(197, 0, 123, alphaLeft);
  colorRight = color(87, 35, 129, alphaRight);
}

colorLeftでcolor()メソッドを実行（引数は左から197, 0, 123, alphaLeft）
colorRightでcolor()メソッドを実行（引数は左から87, 35, 129, alphaRight）

color()メソッドは引数が4つの場合はR、G、B、alpha（透明度）

※参考：reference | p5.js

draw()の内容

draw()全体

一定時間ごとに繰り返し実行

function draw() {
  clear();
  strokeCap(actStrokeCap);

  randomSeed(actRandomSeed);

  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;

      var toggle = int(random(0, 2));

      if (toggle == 0) {
        stroke(colorLeft);
        strokeWeight(mouseX / 10);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }
      if (toggle == 1) {
        stroke(colorRight);
        strokeWeight(mouseY / 10);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);
      }
    }
  }
}

「色 P_2_1_1_01」と異なる部分を見ていく。

toggleの結果でif文（斜線1）

      if (toggle == 0) {
        stroke(colorLeft);
        strokeWeight(mouseX / 10);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }

stroke()メソッドを実行（引数はcolorLeft）
strokeWeight()メソッドを実行（引数はmouseX割る10）
line()メソッドは変更なし

stroke()メソッドは線の色。

strokeWeight()は線の太さで「色 P_2_1_1_01」は割る20だったので「02」は割る10で倍の太さになる。

toggleの結果でif文（斜線2）

      if (toggle == 1) {
        stroke(colorRight);
        strokeWeight(mouseY / 10);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);
      }

stroke()メソッドを実行（引数はcolorRight）
strokeWeight()メソッドを実行（引数はmouseY割る10）
line()メソッドは変更なし

keyReleased()の内容

keyReleased()全体

キーが離れた時の処理

function keyReleased() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

  if (key == '1') actStrokeCap = ROUND;
  if (key == '2') actStrokeCap = SQUARE;
  if (key == '3') actStrokeCap = PROJECT;

  var black = color(0, 0, 0, 255);
  if (key == '4') {
    if (colorsEqual(colorLeft, black)) {
      colorLeft = color(197, 0, 123, alphaLeft);
    } else {
      colorLeft = color(0, 0, 0, alphaLeft);
    }
  }
  if (key == '5') {
    if (colorsEqual(colorRight, black)) {
      colorRight = color(87, 35, 129, alphaRight);
    } else {
      colorRight = color(0, 0, 0, alphaRight);
    }
  }

  if (key == '6') {
    if (alphaLeft == 255) {
      alphaLeft = 127;
    } else {
      alphaLeft = 255;
    }
    colorLeft = color(red(colorLeft), green(colorLeft), blue(colorLeft), alphaLeft);
  }
  if (key == '7') {
    if (alphaRight == 255) {
      alphaRight = 127;
    } else {
      alphaRight = 255;
    }
    colorRight = color(red(colorRight), green(colorRight), blue(colorRight), alphaRight);
  }

  if (key == '0') {
    actStrokeCap = ROUND;
    alphaLeft = 255;
    alphaRight = 255;
    colorLeft = color(0, 0, 0, alphaLeft);
    colorRight = color(0, 0, 0, alphaRight);
  }
}

keyReleased()はかなり増えている！「色 P_2_1_1_01」と変わった部分を見ていく。

変数設定

キー1〜3までは変更なし。その後に変数の設定がある。

var black = color(0, 0, 0, 255);

変数blackでcolor()メソッドを実行（引数は左から0, 0, 0, 255）

真っ黒で不透明度もフルな色。

キー4の処理

if文が多重分岐になっている。

キー4は「左斜めカラー」の設定。

  if (key == '4') {
    if (colorsEqual(colorLeft, black)) {
      colorLeft = color(197, 0, 123, alphaLeft);
    } else {
      colorLeft = color(0, 0, 0, alphaLeft);
    }
  }

もしキー4だったら以下の処理を実行
もしcolorsEqual()関数の引数が左からcolorLeft, blackであれば
colorLeftでcolor()メソッドを実行（引数は左から197, 0, 123, alphaLeft）
さもなくばcolorLeftでcolor()メソッドを実行（引数は左から0, 0, 0, alphaLeft）

colorsEqual()関数はkeyReleased()の後に定義されている。

キー5の処理

キー5は「右対角線の色」

  if (key == '5') {
    if (colorsEqual(colorRight, black)) {
      colorRight = color(87, 35, 129, alphaRight);
    } else {
      colorRight = color(0, 0, 0, alphaRight);
    }
  }

もしキー5だったら以下の処理を実行
もしcolorsEqual()関数の引数が左からcolorRight, blackであれば
colorRightでcolor()メソッドを実行（引数は左から87, 35, 129, alphaRight）
さもなくばcolorLeftでcolor()メソッドを実行（引数は左から0, 0, 0, alphaRight）

キー6の処理

キー6は「透明度左斜め」設定。

  if (key == '6') {
    if (alphaLeft == 255) {
      alphaLeft = 127;
    } else {
      alphaLeft = 255;
    }
    colorLeft = color(red(colorLeft), green(colorLeft), blue(colorLeft), alphaLeft);
  }

もしキー6だったら以下の処理を実行
もしalphaLeftが255であれば
alphaLeftを127に
さもなくばalphaLeftを255に
colorLeftでcolor()メソッドを実行（引数は左からred(colorLeft), green(colorLeft), blue(colorLeft), alphaLeft）

キー7の処理

キー7は「透明度右斜め」設定。

  if (key == '7') {
    if (alphaRight == 255) {
      alphaRight = 127;
    } else {
      alphaRight = 255;
    }
    colorRight = color(red(colorRight), green(colorRight), blue(colorRight), alphaRight);
  }

もしキー7だったら以下の処理を実行
もしalphaRightが255であれば
alphaRightを127に
さもなくばalphaRightを255に
alphaRightでcolor()メソッドを実行（引数は左からred(colorRight), green(colorRight), blue(colorRight), alphaRight）

キー0の処理

0は「デフォルト」設定。

  if (key == '0') {
    actStrokeCap = ROUND;
    alphaLeft = 255;
    alphaRight = 255;
    colorLeft = color(0, 0, 0, alphaLeft);
    colorRight = color(0, 0, 0, alphaRight);
  }

もしキー0だったら以下の処理を実行
actStrokeCapをROUND
alphaLeftを255に
alphaRightを255に
colorLeftでcolor()メソッドを実行（引数は左から0, 0, 0, alphaLeft）
colorRightでcolor()メソッドを実行（引数は左から0, 0, 0, alphaRight）

colorsEqual()の内容

最後にkeyReleased()の中に出てきたcolorsEqual()関数の設定。

名前の意味は「色を等しくする処理」。

function colorsEqual(col1, col2) {
  return col1.toString() == col2.toString();
}

colorsEqual()関数を定義（引数は左からcol1, col2）
col1のtoString()とcol2のtoString()を等しくしてreturnで返す

toString()メソッドは文字列に変換された色を返す。

This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries.

この関数は、文字列としてフォーマットされた色を返します。 これは、デバッグ、または他のライブラリでp5.jsを使用する場合に役立ちます。

引数なしの場合はRGBAの値を返す。

String: How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a).

文字列：色文字列のフォーマット方法。 これを空のままにすると、文字列はrgba（r、g、b、a）としてフォーマットされます。

※参考：reference | p5.js

最後に

f:id:idr_zz:20200612191328p:plain

ということで今回は色編のモノクロ版、色付き版の2つを一気に見ていきました。線の先端をの形状変更するrandomSeed()メソッドなどを体験しました。色編は数が多いので似た内容であればできるだけ一緒に見て行こうと思います。

次回は「文字編」の続きをやっていきます。それではまた！

※参考：p5.jsを習得するためにやったことまとめ
qiita.com