【p5.js】Generative Design with p5.js「文字 P_3_0_01」のコードを読み解く

p5.jsの続きです。前回は「Generative Design with p5.js」の形編の「01」を見ました。今回は文字編「P.3. 文字」の「01」を見ていきます。それでは行きましょう！

【目次】

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

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

完成品

書籍「Generative Design with p5.js」より

Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

ソースコード一覧
Generative Design with p5.js［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング

「P_3_0_01」のソースコード

※参考：p5.js Web Editor

マウスを動かすと「A」という文字が現れる。上下は文字が上下に動き、左右に動かすと文字のサイズが変わる。ドラッグすると軌道が残る。また、キーボードで文字を打つと文字の種類が変わる。

JSコード全体

// P_3_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 the size and the position of a letter
 *
 * MOUSE
 * position x          : size
 * position y          : position
 * drag                : draw
 *
 * KEYS
 * a-z                 : change letter
 * ctrl                : save png
 */
'use strict';

var font = 'sans-serif';
var letter = 'A';

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  fill(0);

  textFont(font);
  textAlign(CENTER, CENTER);
}

function mouseMoved() {
  clear();
  textSize((mouseX - width / 2) * 5 + 1);
  text(letter, width / 2, mouseY);
}

function mouseDragged() {
  textSize((mouseX - width / 2) * 5 + 1);
  text(letter, width / 2, mouseY);
}

function keyReleased() {
  if (keyCode == CONTROL) saveCanvas(gd.timestamp(), 'png');
}

function keyTyped() {
  letter = key;
}

前半のコメント部分はクレジット。

その次の概要部分の訳。

文字のサイズと位置を変更する

 * マウス   * 位置x：サイズ   * 位置y：位置   * ドラッグ：描画

  * キー   * a-z：文字を変更   * ctrl：pngを保存

全体構成

まずは大枠部分

var font = 'sans-serif';
var letter = 'A';

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

function mouseMoved() {
  // マウスが移動している時の処理
}

function mouseDragged() {
  // マウスをドラッグしている時の処理
}

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

function keyTyped() {
  // キーが押された時の処理
}

まず冒頭にグローバル変数が定義されている。

• 変数fontの値はsans-serif
• 変数letterの値はA

fontでフォントをゴシック体に、letterで初期の文字を「A」にしている。

mouseMoved()はマウスが移動している時の処理

The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

mouseMoved（）関数は、マウスが移動してマウスボタンが押されないたびに呼び出されます。

※参考：reference | p5.js

mouseDragged()はマウスをドラッグしている時の処理

The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed.

mouseDragged（）関数は、マウスが移動してマウスボタンが押されるたびに1回呼び出されます。

keyReleased()はキーが離れた時の処理

※参考：reference | p5.js

The keyReleased() function is called once every time a key is released.

keyReleased（）関数は、キーが離されるたびに呼び出されます。

※参考：reference | p5.js

keyTyped()はキーが押された時の処理

The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored.

keyTyped（）関数は、キーが押されるたびに1回呼び出されますが、Backspace、Delete、Ctrl、Shift、Altなどのアクションキーは無視されます。

※参考：reference | p5.js

前回までとは大枠の関数が異なる。

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

setup()の中身

まずはsetup()、ページ読み込み時の処理。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  fill(0);

  textFont(font);
  textAlign(CENTER, CENTER);
}

• createCanvas()メソッドを実行。引数は左からウィンドウ幅、ウィンドウ高さ
• background()メソッドを実行。背景色でRGB三色とも255だと真っ白
• fill()メソッドを実行。塗りつぶし色でRGB三色とも0だと真っ黒
• textFont()メソッドを実行。テキストのフォントはfont（ゴシック体）
• textAlign()メソッドを実行。引数は左からCENTER、CENTER

これまで出てきたメソッドだったり名前で想像つく物だったり。textFont()メソッドにはグローバル変数のfontを設定。

最後のtextAlign()メソッドはCSSに似た名前のプロパティがある。文字を配置する位置の設定。

Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE).

テキストを描画するための現在の配置を設定します。 horizAlign（LEFT、CENTER、またはRIGHT）およびvertAlign（TOP、BOTTOM、CENTER、またはBASELINE）の2つの引数を受け入れます。

※参考：reference | p5.js

引数は両方ともCENTERなので初期は左右も上下も中央に配置。

mouseMoved()の中身

次はmouseMoved()、マウスが移動している時の処理。

function mouseMoved() {
    clear();
  textSize((mouseX - width / 2) * 5 + 1);
  text(letter, width / 2, mouseY);
}

• clear()メソッドを実行。引数はなし。
• textSize()メソッドを実行。引数はマウスの横位置から幅の半分（=横の中心）を引いて、五倍にして1を足す。
• text()メソッドを実行。引数は左からletter、幅の半分（=横の中心）、マウスの縦位置

clear()メソッドはピクセルのクリア。これでテキストの描画がリセットされるようだ。

Clears the pixels within a buffer. This function only clears the canvas.

バッファ内のピクセルをクリアします。 この関数はキャンバスのみをクリアします。

※参考：reference | p5.js

textSize()メソッドはマウスの横位置とウィンドウの横の中心の差分を五倍にして1を足している（1を足すのは0にしないためか？最小値を1に保つ）

最後のtext()メソッドは画面にテキストを描画する。

Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters.

画面にテキストを描画します。 追加パラメーターで指定された位置に、画面の最初のパラメーターで指定された情報を表示します。

※参考：reference | p5.js

引数の意味

text(str, x, y, [x2], [y2])

第一引数は表示する文字

str String|Object|Array|Number|Boolean: the alphanumeric symbols to be displayed

str文字列|オブジェクト|配列|数値|ブール：表示する英数字記号

グローバル変数letterで定義したAが表示される。

第二引数は横位置でwidth / 2は横の中心。第三引数は縦位置でmouseYはマウスの縦位置。

これでマウスを左右に動かすと文字サイズが変わり、上下に動かすと上下に動く。

mouseDragged()の中身

mouseDragged()はマウスをドラッグしている時の処理。

function mouseDragged() {
  textSize((mouseX - width / 2) * 5 + 1);
  text(letter, width / 2, mouseY);
}

• textSize()メソッドを実行。引数はマウスの横位置から幅の半分（=横の中心）を引いて、五倍にして1を足す。
• text()メソッドを実行。引数は左からletter、幅の半分（=横の中心）、マウスの縦位置

この2行は先ほどのmouseMoved()メソッドと同じ。mouseMoved()メソッドはその上にclear()メソッドがある。mouseDragged()は描画をクリアしないため、マウスの軌道が残るわけだ！本来、クリアしなければ描画は残り続けるんだな。

keyReleased()の中身

keyReleased()はキーが離れた時の処理。

function keyReleased() {
  if (keyCode == CONTROL) saveCanvas(gd.timestamp(), 'png');
}

• もし「Control」キーを押したら、キャンバスをpng画像として保存する

この部分は前回までと変わらない。

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

前回までは「s」または「S」の字を打つと保存できたが、文字の入力は次のkeyTyped()メソッドに関わるため、「Control」キーにしていると思われる。

keyTyped()の中身

最後、keyTyped()メソッドはキーが押された時の処理。

function keyTyped() {
  letter = key;
}

• letterをキーの文字にする。

keyは入力されたキーの文字を取得するプロパティ

The system variable key always contains the value of the most recent key on the keyboard that was typed.

システム変数キーには、常に、入力されたキーボードの最新のキーの値が含まれています。

※参考：reference | p5.js

キーが押されたときのその文字をletterにするので表示される文字が変わるわけだ。

最後に

ということでp5.jsの文字編も着手することができましたー。文字編ということでキーボードに反応する新たなメソッドに出会いました。

次回はまた未踏の値である「画像編」にトライしたいと思います。それではまた！

---

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