今回は文字入力の方法について説明していきます。
Processingで図形や色の付け方がわかってきたら、次は文字入れを学んで行きましょう。
この記事では、Processing×Pythonを使用して画像に文字を入れていく手順を説明していきます。
注意点
この記事はProcessingのPython設定で作成しております
Java設定だとエラーが出るので注意してください
設定方法がわからない方は、以下の記事を参考にしてみてください
文字の入力方法について
Processingでは文字入力もコードを使用して入力していきます
text関数とtextSize関数について
text(str, x, y)
コードは以下のようになっています
text(”文字列” 、x座標、 y座標)
文字列とはダブルクオーテーション(”)やシングルクオーテーション(’)で囲われたものを指します
文字を入力する際には
”文字入力” または ’文字入力’ のように入力していきます
textSize(size)
文字サイズ変更できるので（）内に数値の入力をしていきます
実際の関数を使用してコード作成、実行
実際にtext関数を使用したコードを作成していきます
コード作成
|
1 2 3 4 5 |
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軸の座標は必要ないじゃんって思ってました。
参考コード
|
1 2 3 4 5 6 7 8 9 10 |
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) |
応用
文字を入れれることが分かったので少し応用をやっていきます。
スウェーデンの国旗のようなデザイン
参考コード
|
1 2 3 4 5 6 7 8 9 10 |
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) |
方位記号
参考コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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) |
まとめ
文字入力の方法をまとめてみました
Processingを使用して図形がかけるようになってきた方は、文字入れに挑戦してみてください、変数の使用等がありますが、文字をいれることで表現の幅が広がりますので楽しんでプログラミングを学んでいきましょう。
Processing×Pythonの変数の入れ方については以下の記事を参考にしてみてください
本気でプログラマーを目指している方へは、プログラミングのスクールをオススメしております。
中でも TechAcademy テックアカデミーをオススメしており、 TechAcademy テックアカデミーの実績として、
多くの会員がエンジニアとして巣立ってきました。数年前より、学生エンジニアという存在が物凄く注目されるようになっており、
メガベンチャーもこぞって、サマーインターンを実施、プログラミングを叩ける人材を青田刈りしています。
この職種は、学歴、学部、全く関係なく、プログラミング開発経験やその熱量がモノをいいます。
私より上の世代では、「エンジニアは3K」「ただの職人」「うつ病になりやすい」「35歳限界説」など
良いイメージを持っていないかと思います。
逆に若手のエンジニアは恵まれた環境に安心してキャリアを崩すといったこともあります。
そのあたりについて、いろいろと聞いてきましたので、
近くに若いエンジニアがいらっしゃるのであれば、助言するときに参考になるかと思います。
以下のリンクから【自宅で現役エンジニアから学べる TechAcademy テックアカデミー】に無料相談が出来るので以下のリンクから無料相談をしてみてください