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

p5.jsの続きです。前回まではドットインストールのコードを紐解きました。今回からは「Generative Design with p5.js」のコードを見ていきたく。最初は「色」編です。それではいきましょう！

【目次】

p5.js学習の方向性、悩んだ
「色 P_1_0_01」のサンプルとコード
Apache License 2.0ライセンス
JSコードの全体像
setup()のコード
draw()のコード
keyPressed()のコード
最後に

※前回：【p5.js】クリエイティブコーディングに挑戦（その2） - クモのようにコツコツと

p5.js学習の方向性、悩んだ

ドットインストールのコードを読み解いたのあと、これを独力でゼロから書くのはまだ難しいと感じた。次の方向性は、以前にも書いたようにいくつかの方法にわかれる。

※参考：p5.jsを習得するために参考になりそうなサイト、書籍、動画たち - クモのようにコツコツと

Coding Trainのp5.js動画を見る
p5.js公式サイトのサンプルを見る
「Generative Design with p5.js」のサンプルを見る

できればCoding Trainを見て理解を深めたかったのだが、日本語自動翻訳がPCでしか見えないのがネックでなかなか見る時間を作れず…。

p5.js公式サイトのサンプルは数が多いのとインタラクティブじゃない断片的な事例も多かった。

「Generative Design with p5.js」のサンプルはインタラクティブかつビジュアルもカッコよくて気持ちがあがる。いっちょやってみっかー！

※参考：Generative Design with p5.js［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング

「色 P_1_0_01」のサンプルとコード

それではさっそくはじめの一歩！「色 P_1_0_01」から。

※参考：p5.js Web Editor

p5.js公式ツールを埋め込んだ~~らサイズが小さかったためcodepenに移植して埋め込んだ~~。*1

カーソルや指の動きに合わせて色が変わる！

JSコード

// P_1_0_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 colors and size by moving the mouse
 *
 * MOUSE
 * position x          : size
 * position y          : color
 *
 * KEYS
 * s                   : save png
 */
'use strict';

function setup() {
  createCanvas(720, 720);
  noCursor();

  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  noStroke();
}

function draw() {
  background(mouseY / 2, 100, 100);

  fill(360 - mouseY / 2, 100, 100);
  rect(360, 360, mouseX + 1, mouseX + 1);
}

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

半分くらいはコメントで、コード部分は思ったより少ない。

Apache License 2.0ライセンス

頭のコメントはライセンス部分。翻訳すると「Apache License 2.0」に基づくと。

※参考：http://www.apache.org/licenses/LICENSE-2.0

「Apache License 2.0」、わからん。。

ライセンスについて解説しているサイトをいくつか調べる。こちらの記事がわかりやすかった。

Apache License 2.0
著作権・特許権表示を残すこと
変更箇所を明示すること
商用利用可・改変可・再配布可・特許許可
無保証

※参考：恐るるなかれ。ライセンスと著作権の取り扱いと心得について。 | MONSTER DIVE

なるほど。ではクレジットはそのまま表記し、改変した場合は改変部分を書くことにしよう。

JSコードの全体像

ライセンスの次のコメントにはコードの概要が

/**
 * changing colors and size by moving the mouse
 *
 * MOUSE
 * position x          : size
 * position y          : color
 *
 * KEYS
 * s                   : save png
 */

翻訳するとこうある。

マウスを動かして色とサイズを変更する
マウス
位置x：サイズ
位置y：色
*キー
* s：pngを保存

sキーで画像を保存もできる？押してみたところ、スクリーンショットやダウンロードフォルダには入らないみたい。

次にJSコードの全体像

'use strict';

function setup() {
  //処理
}

function draw() {
  //処理
}

function keyPressed() {
  //処理
}

冒頭のuse strictは厳格モードの適用

JavaScript(以下、JS）内でuse strictを宣言すると、コードがstrict（厳格）モードで実行されるようになる。
strictモードでは、より的確なエラーチェックが行われる。

※参考：【JavasScript】use strictとは - Qiita

そのあとに3つの関数が設定されている。

setup()
draw()
keyPressed()

setup()とdraw()はお馴染みでsetup()はページ読み込み時の処理。draw()は一定時間ごとに常時処理。keyPressed()は初めてみる。順番に見ていく。

setup()のコード

まずはsetup()から

function setup() {
  createCanvas(720, 720);
  noCursor();

  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  noStroke();
}

関数setup()を設定
キャンパスの作成。サイズは幅、高さとも720px
カーソルを非表示に
カラーモードはHSBモードで色相Hは360℃、彩度Sは100、明度Bも100
長方形rectMode()をセンターに作成
線の描画なし

noCursor()はp5.jsの関数でカーソルを非表示にする。

※参考：https://p5js.org/reference/#/p5/noCursor

colorMode()はその名の通りカラーモード。HSB以外のモードも設定できる。

※参考：https://p5js.org/reference/#/p5/colorMode

初期状態の色相H360℃は真っ赤です。色相値の詳細についてはこちら。

※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、Web配色ツール） - クモのようにコツコツと

rectMode()は長方形の作成

※参考：https://p5js.org/reference/#/p5/rectMode

noStroke()は線をなしにする設定

※参考：https://p5js.org/reference/#/p5/noStroke

draw()のコード

次にdraw()のコード

function draw() {
  background(mouseY / 2, 100, 100);

  fill(360 - mouseY / 2, 100, 100);
  rect(360, 360, mouseX + 1, mouseX + 1);
}

関数draw()を設定
背景色の色相Hはマウスの縦位置の半分、明度Sは100、彩度Bも100
図の色の色相Hは360℃からマウスの縦位置の半分を引いた数、明度Sは100、彩度Bも100
長方形の描画。左からの位置360px、上から位置360px、幅はマウスの位置+1px、高さはマウスの位置+1px

background()は背景色の設定。カラーモードは先ほど設定したHSB。

※参考：https://p5js.org/reference/#/p5/background

fill()は図の色。

※参考：https://p5js.org/reference/#/p5/fill

descriptionを翻訳すると

図形の塗りつぶしに使用する色を設定します。たとえば、fill（204、102、0）を実行すると、fillコマンドの後に描画されたすべての図形がオレンジ色で塗りつぶされます。この色は、現在のcolorMode（）に応じてRGBまたはHSBの色で指定されます。

rect()は長方形の描画。色は先ほどのfill()が適用される。

※参考：https://p5js.org/reference/#/p5/rect

引数の説明の翻訳

デフォルトでは、最初の2つのパラメーターは左上隅の位置を設定し、3番目は幅を設定し、4番目は高さを設定します

これでマウスを動かすごとに背景色と中央の長方形の色相が変わるわけだ。キャンバスのサイズが720pxでその半分を色相にするのでちょうど360℃になる（1を足すことで1スタートになる）

keyPressed()のコード

最後の関数keyPressed()

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

関数keyPressed()の設定
もし「s」または「S」のキーを押したらキャンバスを保存（ファイル名は「時間.png」）

keyPressed()もp5.jsの関数にあった。

※参考：https://p5js.org/reference/#/p5/keyPressed

説明の翻訳

keyPressed（）関数は、キーが押されるたびに1回呼び出されます。押されたキーのkeyCodeは、keyCode変数に保存されます。

saveCanvas()はキャンバスの保存

※参考：https://p5js.org/reference/#/p5/saveCanvas

現在のキャンバスを画像として保存します。ブラウザはファイルをすぐに保存するか、ダイアログウィンドウでユーザーにプロンプトを表示します。

引数設定は下記の2種類（3つと2つ）

saveCanvas(selectedCanvas, [filename], [extension])
saveCanvas([filename], [extension])

今回は2つのパターン。

第1引数にあるtimestamp()はJSの組み込み関数でタイムスタンプ（現在時刻）の取得。

※参考：.timeStamp | JavaScript 日本語リファレンス | js STUDIO

これがファイル名になる。

gdというオブジェクトのタイムスタンプを取得しているようだが、gdの元の設定はこのコードの中では見受けられない。別の場所を見に行っているのだろうか？

あと、sキーを押してもどんな画像がどこにどんなファイル名で保存されているのか、確認ができなかった。。

最後に

f:id:idr_zz:20190816055905j:plain

ということで、Generative Design with p5.js「色 P_1_0_01」のコードを読み解きました。第一歩！今のところはまだ書籍を持っていないので公式サイトのリファレンスを調べながらという感じです。それにしてもp5.jsはアウトプットから想像しているよりぐっと少ないコード量で実現できている。シンプルで読みやすい。スゴいです。これを繰り返していくとp5.jsのコードの書き方、勘所が身についていきそうな予感。それではまた！

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

*1:iframeタグにstyle属性を書いたらサイズを変更できた！