本稿は「18.6: createGraphics() as WebGL Texture – WebGL and p5.js Tutorial」YouTube動画と「Getting started with WebGL in p5」ページ(「p5.jsで始めるWebGL」で訳出済)の「Text」項を参考に、再構成しています。
目次
3Dテキスト表現
p5.js WEBGLモードのキャンバスに文字を描画する方法は２つあります。１つはWEBGLモードで使用できるtext()関数を使う方法で、もう１つは、オフスクリーンキャンバスをテクスチャとして扱う方法です。
WEBGLモードのtext()関数
p5.jsのtext()はキャンバスに文字を描画する関数で、WEBGLモードでも使用できます。リファレンスのtext()関数項には次のように書かれています。
WEBGL: OpenTypeフォントとTrueTypeフォントタイプのフォントのみサポートされる。フォントはloadFont()関数を使って読み込む必要がある(上記サンプルを参照)。現状ではWEBGLモードでstroke()を使っても効果はない。
p5.jsでのフォントについては、「6_4：フォント p5.js JavaScript」や「6_5：Webフォントの使用 p5.js JavaScript」、「6_6：カスタムフォントの使用 p5.js JavaScript」、「11：テキストと文字表現 Creative Coding p5.js」、「15：タイポグラフィ(Typography)」で述べています。
次のコードは、Google FontsのTrade Windsを使って、テキストを回転させる例です。
let angle = 0;
let TradeWindsFont;
let imgElement;
function preload() {
// トゥルータイプフォントを読み込む
// https://fonts.google.com/specimen/Trade+Winds
// WEBGL: you must load and set a font before drawing text.
TradeWindsFont = loadFont('assets/TradeWinds-Regular.ttf');
}
function setup() {
createCanvas(400, 300, WEBGL);
angleMode(DEGREES);
// このプログラムで使用するフォントを指定
textFont(TradeWindsFont);
// フォントのサイズとアライメント
textSize(40);
textAlign(CENTER);
textLeading(100);
// 平行投影カメラ
orthoCamera = createCamera();
// デフォルトのfar(widthとheightの大きな方=400)では、回転するテキストが見切れるので、もっと遠くまで見られるようにする
// => 平行投影の視錐台のfarを大きくする
orthoCamera.ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 500);
orthoCamera.setPosition(-0, -100, 250);
orthoCamera.lookAt(0, 0, 0);
// キャンバス右下に<img>要素を置く
createImg('assets/kingkong.png', 'kingkong_poster', '', (elm) => {
elm.elt.width = 50;
elm.position(350, 230)
});
}
function draw() {
background(100);
// ライティング
ambientLight(100);
pointLight(255, 255, 0, -100, 0, 100);
// フォントの色
fill(255, 255, 255);
// テキストと3Dジオメトリを回転
rotateY(angle);
// 円錐
translate(0, 20, 0);
rotateZ(180)
cone(20, 150);
// 円環
torus(50, 2);
torus(100, 2);
torus(150, 2);
// 球体
translate(0, -200, 0);
sphere(120);
// テキスト
translate(0, 200, 0);
rotateZ(180)
fill(255, 0, 0);
text('an RKO\nRadio Picture', 0, -50);
// ページのクリックでアクションのオン/オフを切り替え
if (isAction) {
angle -= 1;
}
}
let isAction = false;
function mousePressed() {
isAction = !isAction
}画面のクリックで回転のオン/オフが切り替わります。
オフスクリーンキャンバスをテクスチャとして扱う
オフスクリーンキャンバスをテクスチャとして扱う方法自体は「オフスクリーンキャンバスのテクスチャマッピング」で述べています。
ここでは同様のテクニックで、オフスクリーンキャンバスにテキストを描画し、それをテクスチャとして3Dジオメトリに適用します。
次のコードはその例です。なおこの方法ではコンピュータにインストールされているシステムフォントも使用できますが、テキストが回転するプログラムのデザイン上、システムフォントでは面白くないので、前の例と同じGoogle Fontを使っています。
let angle = 0;
let TradeWindsFont;
let imgElement;
function preload() {
/// トゥルータイプフォントを読み込む
// https://fonts.google.com/specimen/Trade+Winds
// WEBGL: you must load and set a font before drawing text.
TradeWindsFont = loadFont('assets/TradeWinds-Regular.ttf');
}
function setup() {
createCanvas(400, 300, WEBGL);
angleMode(DEGREES);
offScreenCanvas = createGraphics(256, 256);
offScreenCanvas.fill(255, 0, 0);
offScreenCanvas.textFont(TradeWindsFont);
offScreenCanvas.textSize(25);
offScreenCanvas.textAlign(CENTER);
offScreenCanvas.textLeading(60);
// 平行投影カメラ
orthoCamera = createCamera();
// orthoCamera.ortho();
orthoCamera.ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 500);
orthoCamera.setPosition(-0, -100, 250);
orthoCamera.lookAt(0, 0, 0);
// キャンバス右下に<img>要素を置く
createImg('assets/kingkong.png', 'kingkong_poster', '', (elm) => {
elm.elt.width = 50;
elm.position(350, 230)
});
}
function draw() {
background(100);
//offScreenCanvas.background(0, 0, 0, 0);
ambientLight(100);
pointLight(255, 255, 0, -100, 0, 100)
// テキストと3Dジオメトリを回転
rotateY(angle);
// 円錐
translate(0, 20, 0);
rotateZ(180)
cone(20, 150);
// 円環
torus(50, 2);
torus(100, 2);
torus(150, 2);
// 球体
translate(0, -200, 0);
sphere(120);
push();
translate(0, 90, 0);
rotateZ(180)
offScreenCanvas.text('an RKO\nRadio Picture', 130, 20);
texture(offScreenCanvas);
noStroke();
plane(350, 350);
pop();
if (isAction) {
angle -= 1;
}
}
let isAction = false;
function mousePressed() {
isAction = !isAction
}画面のクリックで回転のオン/オフが切り替わります。
なお回転する3DテキストのRKOはアメリカの古い映画会社の名前です。
