プログラミング初心者の方でも簡単に始められるツールとして人気の「Processing」。
この記事では、Pythonモードを使って文字入力を処理する方法を超初心者向けにわかりやすく解説します。Pythonに興味があるけれど、何から始めていいかわからない、難しそうと感じている方でも安心して取り組める内容となっています。ぜひこの記事を参考にして、Processingを使ったプログラミングの第一歩を踏み出してみましょう!
図形の書き方の記事
注意点
この記事は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の変数の入れ方については以下の記事を参考にしてみてください
参考記事
もしわからないことがあれば、このブログやXに質問等を投げていただければと思います。
Xのアカウントはこちら
プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ!今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか?
ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。
このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです!一緒にネットショップを開設し、副業の第一歩を踏み出しましょう!
タイトルテキスト
プログラミングを視覚的に理解したい方やプログラミングで絵を書いてみたい方はUdemyで講座も作っているのでこちらも参考にしてみてください
Udemy講座
ChatGPTでPythonの学習を始めてみたい方は以下の記事を参考にしてみてください
関連記事
プログラミングを学びたいけど、どこから始めたらいいのか分からない、自分に合っているか不安…そんな悩みを持っている方におすすめしたいのが、 無料相談 サービスです!
この無料相談では、あなたの現状や目標に合わせて、最適な学習プランを一緒に考えてくれます。どんなスキルが必要なのか、どうやって学習を進めると効果的かを具体的にアドバイスしてもらえるので、無駄なく効率的にスタートを切ることができます。
さらに、プログラミング学習には同じ目標を持つ 仲間 がいること、そして頼りになる メンター の存在がとても大きな支えになります。独学ではどうしてもつまずきやすい部分も、メンターがあなたの成長に合わせて親身にサポートしてくれるので、安心して学びを進められます。
まずは 無料相談 で、あなたに合ったプランを見つけて、スキルアップへの第一歩を踏み出してみませんか?今なら、迷っている方でも気軽に相談できるチャンスです!