インスタなどショート動画で数学的に美しい映像を見て、自分も作ってみたいと思うようになりました。
そこで調べてみるとProcessingというプログラミング（？）をすることで作れそうでした。
今回から英語の勉強と、文章を書く練習としてProcessingの英語の公式サイトを訳していこうと思います。
7割翻訳、3割感想や自分なりの解説を目指します。
今回の参考ページは以下になります。
Color
An introduction to digital color.
processing.org
スポンサーリンク
タイポグラフィー
デジタルにおけるタイポグラフィーは、画面の各ピクセルごとの色を設定することで作られます。
よってディスプレイの技術の向上とともに、タイポグラフィーも進化してきました。
スポンサーリンク
テキストを書く
テキストはtext()で描きます。
text()は()の中（引数）に、最初に描きたい文字列、2・3番目に先頭の文字の座標を書きます。
もしテキストをボックス内に書き入れたい時には、4・5番目の引数を追加します。
2・3番目の座標を左上、4・5番目の座標を右下にした長方形の中にテキストを描きます。
文字のサイズを変えたい時には、textSize()で設定し、色はfill()で設定できます。
textSize(32);
fill(0); // Fill color black
text("LAX", 0, 40);
fill(126); // Fill color gray
text("HKG", 0, 70);
fill(255); // Fill color white
text("PVG", 0, 100);スポンサーリンク
フォントの変更
フォントは大量にありますが、processingで使えるフォントは以下のコードで確認することができます。
String[] fontList = PFont.list();
printArray(fontList);processingではフォント用のデータの型があり、PFontと呼ばれています。
よってcreateFont()関数でフォントをPFont型に変換する必要があります。
PFont zigBlack;
void setup() {
size(100, 100);
zigBlack = createFont("Ziggurat-Black", 32);
textFont(zigBlack);
fill(0);
}
void draw() {
background(204);
text("LAX", 0, 40);
text("LHR", 0, 70);
text("TXL", 0, 100);
}テキストの属性(？)
Wordやパワポで、行間や位置を設定することができますが、processingでも行うことができます。
textLeading()はテキストの行の間の幅を設定します。
textAlign()はtext()で設定した位置との関係を設定できます。
textWidth()はテキスト全体の幅を返してくる関数です。
コメント