今回はProcessing×Python を使用してプログラミングで色の付け方を学んでいきましょう
今までの記事の内容では
・色がグレーに黒で色味がないので面白くない
・色を使っていろんな表現をしてみたい
という方も多いと思うので今から色の付け方を説明していきます
この記事を見るとProcessingで図形や線に色を付けれるようになります、色のことについて少し理解できると思います
注意点
この記事はProcessingのPython設定で作成しております
Java設定だとエラーが出るので注意してください
設定方法がわからない方は、以下の記事を参考にしてみてください
タイトルテキスト
Processingでの色の付け方
Processingでは色のつけもプログラムを書いて表現していきます
色の付け方や場所によってコードの内容が異なるので少し分けて説明していきます
変色した場所や内容がわかりやすいように事前準備として
以下のこちらのコードを入力してください
1 2 3 |
size(900, 600) strokeWeight(20) rect(150, 100, 600, 400) |
このコードを編集して色を付けていきます
コードを実行するとこんな感じの図が出てくると思います
この画像に色を付けてどの部分に色が付くのかを確認していきます
各種色付けコードについて
実際に色を付けていきます
関数の種類によって色の付け方が変化してきます
background()について
background関数は背景の色を付けることができます
コード入力、実行
1 2 3 4 |
size(900, 600) strokeWeight(20) <span class="marker-red">background(0,0, 255) #ここの行にコードを入力していきます</span> rect(150, 100, 600, 400) |
背景が青になりました
コードの説明
色付けは、各種関数内の()内へ数値を入力していきます
各種コード( R(赤)、G(緑)B(青) )
という色の配列となっており、コード内のRGBの部分へ0~255までの数値を入力することで変色できます
background( 0 , 0 , 255 )
と入力することで背景が青くなります
以下に各それぞれの数値に255を入力していくと色が変化します
赤(255、0、0)
緑(0、255、0)
青(0,0,255)
のように色が変化していきます
すべて最大の数値を入力していきましたが、数値を変更していくことで配色の変化ができます
黄色(255、255、0)
シアン(0、255、255)
その他の色の選択方法
そんな数字で色を選ぶなんてしたことないからよくわからないという方
Processingでは自分の目で色を探すことができるので安心してください
ツールという部分の色選択という部分をクリック
こんなのが出てきます
この中から色を選んでいきます
選び方
①から色を選びます
②の枠内からマウスを使って好きな色合いのところにカーソルを持っていきます
③の数値が出てくるのでその数値をコードの部分に入力する
というやり方で色を選ぶこともできます
fill()関数ついて
fill関数は塗りつぶしという意味の関数です
枠内を選択した色で塗りつぶします
コード入力・実行
1 2 3 4 5 6 |
size(900, 600) strokeWeight(20) rect(100, 200, 700, 200) <span class="marker-under-red">#わかりやすくするために付け足しました</span> fill(0,0, 255) <span class="marker-red">#ここにコードを入力していきます</span> rect(150, 100, 600, 400) |
青く塗りつぶしができました
なんか白いでっぱりがあります
青色の四角の中はどのようになっているのでしょうか?
気になりません?
そんな時に役に立つのがnoFill関数です
noFill()について
noFill関数は塗りつぶしなしという意味です
コード入力、実行
1 2 3 4 5 |
size(900, 600) strokeWeight(20) rect(100, 200, 700, 200) #わかりやすくするために付け足しました noFill() #ここにコードを入力していきます rect(150, 100, 600, 400) |
塗りつぶしをなくすと中が見れます
実はこんな感じになってました!!
はい!
わかりますよ予想通りって声がそこかしこから聞こえてきそうです
ただ、もしかすると中身は
こんな感じだったかもしれないじゃないですか
中身は見てみないとわかりませんよ
※ロボットの顔のコードは最後に載せてあります興味があればどうぞ
そんなことはいいので次行きます
stroke()関数について
線の色を設定していく関数です
1 2 3 4 |
size(900, 600) strokeWeight(20) stroke(0,0, 255) #ここの行にコードを入力していきます rect(150, 100, 600, 400) |
黒い淵が青く変わりました青い淵をなくすこともできます
noStroke()について
線を消すことができます
1 2 3 4 |
size(900, 600) strokeWeight(20) noStroke() #ここの行にコードを入力していきます rect(150, 100, 600, 400) |
なくなりました
図形を作る際に必ず黒い淵が付いてくるので、作品の邪魔になることがあるので枠線の消し方も一緒に覚えておくと便利です
tint()について
Processingでは画像の読み込みもできます
画像を読み込んだ際にその画像へ着色したり、透明度(アルファ値)を入れることができるようです
今は詳しくわからないので割愛させてください
colorMode()について
色のモードを選択できるコードです
色のモードは2種類あり
RGBとHSBの2種類あります
コードの説明
colorMode(RGBかHSBを選択,100)を入力することで色の種類を選ぶことができます
このコードを最初に入力することで以下のコードに影響を与えます
それぞれを比較と入力・実行
1 2 3 4 5 |
size(900, 600) <span class="marker-red">colorMode(HSB,100)</span> #ここの部分を変更していきます strokeWeight(20) background(50,50, 50) rect(150, 100, 600, 400) |
colorMode()なし
若干暗い感じがします
colorMode(RGB、100)
RGBを入れるとグレー色が強くなりました
colorMode(HSB、100)
HSBでは色相の選択になるので色が出てきます
それぞれ同じ数値ですが、colorMode()を入力することで色に変化が出てきます
各それぞれの使い方については私も詳しくないので割愛します
色とは
色ってよくなじみのある言葉で青や赤や黄色などすぐにイメージが付くと思います
そこで、色について少し調べてみました
色を表すための『ものさし』には3種類あり、色の三属性と呼ばれています
それぞれを色相・彩度・明度と呼ばれます
この3つの要素が組み合わさればどのような色も客観的かつ正確に表現することができます
色の三属性
色相・彩度・明度について少し説明していきます
色相
『色合い』または『色味の違い』のこと色相は言葉を使って赤・黄・緑・青のような色相名で表すことができる
または有彩色とも呼ばれる
有彩色
少しでも色味を持つ色は有彩色
無彩色
色相とは異なるが色合いがないもの(黒・灰色・白)を無彩色という
彩度
『色味の強さ』または『鮮やかさの度合い』
明度
明るさの度合い、物体の反射率と相関が高い
RGBとHSBの違い
RGBとは
RGBとは、色の表現方法の一種で赤(Red)、緑(Green)、青(Blue)の3色からなるカラーモデルです
RGBAという表現もありますがRBGに加え、アルファチャンネル(Alpha)を加えたもので、アルファチャンネルは透明度を表すもの
RGBはパソコンやデジタルカメラなどの画像際現に使われています
Processingではそれぞれの色を0~255までの数値を入力します
Red・・・赤(0~255)
Green・・・緑(0~255)
Blue・・・青(0~255)
Alpha・・・透明度(0%~100%)
RGBのイメージはこんな感じになります
HSBとは
HSBとは色相(Hue)、彩度(Saturation・Chroma),明度(Brightness・Value)の3つからなる色空間モデル
Processingでは数値を入力します
色相・・・色の種類(0~360°)
彩度・・・色の鮮やかさ(0~100%)
明度・・・色の明るさ(0~100%)
HSBのイメージはこんな感じになります
サンプルコード
1 2 3 4 5 6 7 8 9 |
size(900, 600) strokeWeight(20) rect(100, 200, 50, 200) rect(750, 200, 50, 200) rect(200, 350, 500, 100) ellipse(300, 250, 100, 100) ellipse(500, 250, 100, 100) noFill() rect(150, 100, 600, 400) |
まとめ
今回は色の付け方について説明をしていきました。
いろんな図形を並べるだけでも、模様は出来ますが、色がついて来るとより面白い作品が出来ると思います。
するともっと素敵な作品を作ってみたいと思う方もいると思います。次回はブログラミングだからこそ出来る作品を説明していきますので、参考にしてみてください。
参考記事
インストールの参考記事
もしわからないことがあれば、このブログやXに質問等を投げていただければと思います。
Xのアカウントはこちら
プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ!今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか?
ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。
このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです!一緒にネットショップを開設し、副業の第一歩を踏み出しましょう!
タイトルテキスト
プログラミングを視覚的に理解したい方やプログラミングで絵を書いてみたい方はUdemyで講座も作っているのでこちらも参考にしてみてください
Udemy講座
ChatGPTでPythonの学習を始めてみたい方は以下の記事を参考にしてみてください
関連記事
プログラミングを学びたいけど、どこから始めたらいいのか分からない、自分に合っているか不安…そんな悩みを持っている方におすすめしたいのが、 無料相談 サービスです!
この無料相談では、あなたの現状や目標に合わせて、最適な学習プランを一緒に考えてくれます。どんなスキルが必要なのか、どうやって学習を進めると効果的かを具体的にアドバイスしてもらえるので、無駄なく効率的にスタートを切ることができます。
さらに、プログラミング学習には同じ目標を持つ 仲間 がいること、そして頼りになる メンター の存在がとても大きな支えになります。独学ではどうしてもつまずきやすい部分も、メンターがあなたの成長に合わせて親身にサポートしてくれるので、安心して学びを進められます。
まずは 無料相談 で、あなたに合ったプランを見つけて、スキルアップへの第一歩を踏み出してみませんか?今なら、迷っている方でも気軽に相談できるチャンスです!