【超初心者向け】Processingでプログラミング言語pythonを使った文字入力方法について

Processing python

アートやデザインをしていく中で文字入力ができると便利なのにと思ったことはありませんか?

この記事では文字入力についての方法を説明していきます

この記事はProcessingというソフトを使用しています

設定はJavaではなくPythonに変更してください

Java設定だとエラーが出る場合があるので注意してください

↓↓↓Processingって何?という方はこちらの記事を↓↓↓

↓↓↓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)

まとめ

文字入力の方法をまとめてみました

文字入力ができると表現できる幅も広がってくると思うので参考になればうれしいです

線の描き方や図形の描き方もまとめているので是非こちらもみてください

コメント

タイトルとURLをコピーしました