アートやデザインをしていく中で文字入力ができると便利なのにと思ったことはありませんか？
この記事ではProcessingで文字入力についての方法を説明していきます
文字の入力方法について
Processingでは文字入力もコードを使用して入力していきます
text関数とtextSize関数について
text(str, x, y)
コードは以下のようになっています
text(”文字列” 、x座標、 y座標)
文字列とはダブルクオーテーション(”)やシングルクオーテーション(’)で囲われたものを指します
文字を入力する際には
”文字入力” または ’文字入力’ のように入力していきます
textSize(size)
文字サイズ変更できるので（）内に数値の入力をしていきます
実際の関数を使用してコード作成、実行
実際にtext関数を使用したコードを作成していきます
コード作成
size(600, 300)
textSize(70)
text("Hello World", 150, 200)
line(0, 200, 600, 200)
line(150, 0, 150, 300)最後の2行に横線と縦線を入力しています
文字の出力場所がわかりやすいようにと思い入れているので文字入力の際にはなくても大丈夫です
コードの実行
文字の出力ができました
文字の座標は文字に対して右下の部分の縦線と横線が交わる150、200の位置が開始位置となるようです
その開始位置は変更することも可能です
textAlign()関数について
textAlign(align)：text()関数で描写する文字列のそろえ方を指定する
alignの部分に以下のそれかを選択して入力します
- LEFT：左揃え
- CENTER：中央揃え
- RIGHT：右揃え
textAlign()を使って比較してみる
両方ともx座標に変わりはないが、textAlign()を入れることで文字の配置が変化した。
左：入れる前
右：入れた後
画像にはx軸に線を入れています
textAlign()を入れるとx軸に対して、文字が左側右側に来るかという変化が出てきます。
自分は画面のサイズに合わせて左側、中央、右側に来ると思っていたのでx軸の座標は必要ないじゃんって思ってました。
参考コード
size(500, 400)
line(250, 0, 250, 400)
textSize(50)
textAlign(LEFT)
text("Hello", 250, 100)
textAlign(CENTER)
text("Hello", 250, 200)
textAlign(RIGHT)
text("Hello", 250, 300)応用
文字を入れれることが分かったので少し応用をやっていきます。
スウェーデンの国旗のようなデザイン
参考コード
size(900, 600)
background(0, 185, 255)
fill(255, 255, 0)
noStroke()
rect(0, 250, 900, 100)
fill(255, 255, 0)
noStroke()
rect(300, 0, 100, 600)
textSize(70)
text("Sweden", 450, 200)方位記号
参考コード
size(500, 500)
background(0, 0, 255)
strokeWeight(10)
stroke(255, 255, 255)
line(250, 60, 250, 440)
line(140, 250, 360, 250)
line(250, 60, 200, 150)
line(200, 150, 300, 150)
fill(255, 255, 0)
textSize(50)
textAlign(CENTER)
text("NORTH", 250, 50)
fill(255, 0, 0)
textSize(50)
textAlign(CENTER)
text("SOUTH", 250, 490)
fill(0, 255, 0)
textSize(50)
textAlign(LEFT)
text("WEST", 10, 270)
fill(0, 255, 255)
textSize(50)
textAlign(RIGHT)
text("EAST", 490, 270)まとめ
文字入力の方法をまとめてみました
文字入力ができると表現できる幅も広がってくると思うので参考になればうれしいです
線の描き方や図形の描き方もまとめているので是非こちらもみてください
この度Udemyで講座を作りました
【プログラミングｘアート】直感的・視覚的に学ぶ Processing×Python 入門講座
ブログに書いてある内容を一つの講座にしています
コメント