フォントを変えずにtext()を飾る

はじめに

p5.jsで文字をキャンバスに表示させるにはtext()を用います。今回、このtext()で文字を表示する時に、フォントを変えずに文字の装飾をする方法を紹介します。

フォントは好みのものを用いてもらって良いです。本記事ではフォントはmacOSのデフォルトで画像を生成しています。

結合部の形 strokeJoin()

text()で表示される文字の枠線の結合部（文字の角）の形は変えることができます。次のコードで説明していきます。

function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  noLoop();
}
 
function draw(){
  background(100);

  fill(0,0);
  stroke(0);
  strokeWeight(10);

  textSize(90);
  textAlign(CENTER, CENTER);

  push();
  strokeJoin(MITER);
  text("Hello World!", 300, 100);
  pop();

  push();
  strokeJoin(BEVEL);
  text("Hello World!", 300, 300);
  pop();

  push();
  strokeJoin(ROUND);
  text("Hello World!", 300, 500);
  pop();
}

「Hello World!」という文字列を表示しました。文字は 中を塗りつぶさずfill(0,0)、線の色は黒stroke(0)、線幅は10ピクセルstrokeWeight(10)としています。

（注意）：stroke()を宣言してからtext()で文字を表示して下さい。宣言せずにtext()を実行すると装飾が反映されないことがありました。また、strokeJoin()が適用されるのはあくまでも枠線(stroke)のみです。fill()による塗りつぶし領域には適用されず、元のフォントの形で塗りつぶされるので注意して下さい。

3つの表示した文字はそれぞれ strokeJoin()で結合部の形を指定しています。p5.jsではMITER, BEVEL, ROUNDの3種類が用意されています。デフォルトではstrokeJoin(MITER)となっています。

それぞれの形を見ると
・strokeJoin(MITER)は結合部が尖った形
・strokeJoin(BEVEL)は結合部が角が切り落とされた形
・strokeJoin(ROUND)は結合部が角が丸い形
となっています。

同じフォントでも結合部の形が異なると印象も違います。このstrokeJoin()を使うだけでも、作品全体のイメージに表示文字を寄せることができると思います。

点線を用いる

text()で表示される文字の枠線を点線にしてみます。p5.jsで点線を描く際にはdrawingContext.setLineDash()を使用します。次のコードを使って説明していきます。

function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  noLoop();
}
 
function draw(){
  background(100);

  fill(0,0);
  stroke(0);
  strokeWeight(5);

  strokeJoin(ROUND);

  textSize(90);
  textAlign(CENTER, CENTER);

  push();
  drawingContext.setLineDash([1,8]);
  strokeCap(ROUND);
  text("Hello World!", 300, 100);
  pop();

  push();
  drawingContext.setLineDash([1,2]);
  strokeCap(SQUARE);
  text("Hello World!", 300, 300);
  pop();

  push();
  drawingContext.setLineDash([1,8]);
  strokeCap(PROJECT);
  text("Hello World!", 300, 500);
  pop();
}

drawingContext.setLineDash()を設定することで、text()で表示される文字の枠線が点線になります。点線の形はstrokeCap()の設定が適用されます。この辺りは別記事にて解説してますので、気になる方は参考にして下さい。

drawingContext.setLineDash()とstrokeCap()の設定により、text()で表示される文字の枠線が点線で装飾されました。上から丸い点線、細い線の点線、四角の点線で描画されます。

点線を用いることでもフォントを変更せずに、文字列の印象を変えることができます。

テキストスタイル textStyle()

text()で表示する文字は、テキストスタイル textStyle()でNORMAL, ITALIC, BOLD, BOLDITALICの4種類を設定することができます。

このテキストスタイルを上で説明した strokeJoin()、drawingContext.setLineDash()、strokeCap()と組み合わせると様々な装飾ができます。

一例が次のコードです。

function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  noLoop();
}
 
function draw(){
  background(100);

  textSize(90);
  textAlign(CENTER, CENTER);

  push();
  fill(0,0);
  stroke(0);
  strokeWeight(10);
  strokeJoin(MITER);
  drawingContext.setLineDash([1,10]);
  strokeCap(ROUND);
  textStyle(ITALIC);
  text("Hello World!", 300, 100);
  pop();

  push();
  fill(0,0);
  stroke(0);
  strokeWeight(15);
  strokeJoin(ROUND);
  drawingContext.setLineDash([1,1]);
  strokeCap(SQUARE);
  textStyle(BOLD);
  text("Hello World!", 300, 300);
  pop();

  push();
  fill(0,0);
  stroke(0);
  strokeWeight(3);
  strokeJoin(BEVEL);
  drawingContext.setLineDash([1,5]);
  strokeCap(PROJECT);
  textStyle(BOLDITALIC);
  text("Hello World!", 300, 500);
  pop();
}

一つ目がイタリックの丸い点線で結合部が尖った装飾。
二つ目が太字の細かい線の点線で結合部が丸い装飾。
三つ目が太字イタリックの四角の点線で結合部が切り落とされた装飾。

各要素の組み合わせ方と線の幅、点線の間隔を調整することで、様々なバリエーションの文字装飾ができます。色々試してみて下さい。

作例

上で紹介した3つの装飾方法を使った作品を作ってみました。

結合部の形、点線、テキストスタイルをランダムに選択し、そのランダムな装飾の文字列をいくつか重ねた作例です。次のコードになります。

function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  noLoop();
}
 
function draw(){
  background(random(360), random(100), random(100));

  blendMode(DIFFERENCE);
  textAlign(CENTER, CENTER);

  translate(w/2, w/2);

  stroke(random(360), random(100), 100);
  fill(random(360), random(100), random(100));

  push();
  for(let i=0;i<3;i++){
    text_rand("Hello World!", 0, 0, 80);
  }
  pop();
}

function text_rand(txt, x, y, size){
  push();
  translate(x, y);

  drawingContext.setLineDash([random(size), random(size)]);
  strokeWeight( random(size*0.01,size*0.75) );
  strokeCap( random([ROUND, SQUARE, PROJECT]) );
  strokeJoin( random([MITER, BEVEL, ROUND]));
  textSize(size);
  textStyle( random([NORMAL, ITALIC, BOLD, BOLDITALIC]));
  text(txt ,0, 0);
  pop();
}

ロゴのようなものが簡単に生成されました。

装飾をランダムに設定した文字列を3回重ねています。blendMode(DIFFERENCE)とすることで、重なった部分の差分が描かれます。背景、文字の塗りつぶし、文字の枠線はカラーでランダムに選ぶ様にしています。

それぞれの装飾のおもしろさと、それが重なった部分が強調される表現になった作品です。文字が読めるものをここに載せているいますが、ランダム故に文字が読めない画像が生成されたりもします。文字が読める確率を上げるためにfill()は透明にしても良いかもしれません。

おわりに

text()で表示する文字の装飾について紹介しました。

p5.jsでは文字の結合部の形、点線、テキストスタイルという設定を変えることができます。これらの設定を応用して、今までと一味違う文字表示を使ってみて下さい。

---

余談

日本語だとこんな感じです。