初めましてダダです
前回の記事ではProcessingでプログラミング言語Pythonを使った図形の描き方についての記事を書きました
↓↓↓内容が気になる方はこちらから↓↓↓
【超初心者向け】Processingでプログラミング言語Pythonを使った図形の描き方について
そして、今回は線や図形の描き方は分かったけど…
・色がグレーに黒で色味がないので面白くない
・色を使っていろんな表現をしてみたい
という方も多いと思うので今から色の付け方を説明していきます
この記事を見るとProcessingで図形や線に色を付けれるようになります、色のことについて少し理解できると思います
Processingでの色の付け方
Processingでは色のつけもプログラムを書いて表現していきます
色の付け方や場所によってコードの内容が異なるので少し分けて説明していきます
変色した場所や内容がわかりやすいように事前準備として
以下のこちらのコードを入力してください
size(900, 600)
strokeWeight(20)
rect(150, 100, 600, 400)このコードを編集して色を付けていきます
コードを実行するとこんな感じの図が出てくると思います
この画像に色を付けてどの部分に色が付くのかを確認していきます
各種色付けコードについて
実際に色を付けていきます
関数の種類によって色の付け方が変化してきます
background()について
background関数は背景の色を付けることができます
コード入力、実行
size(900, 600)
strokeWeight(20)
background(0,0, 255) #ここの行にコードを入力していきます
rect(150, 100, 600, 400)
背景が青になりました
コードの説明
色付けは、各種関数内の()内へ数値を入力していきます
各種コード（ R（赤）、G（緑）B（青） ）
という色の配列となっており、コード内のRGBの部分へ0～255までの数値を入力することで変色できます
background( 0 , 0 , 255 )
と入力することで背景が青くなります
以下に各それぞれの数値に255を入力していくと色が変化します
赤（255、0、０）
緑（０、255、０）
青（０，０，２５５）
のように色が変化していきます
すべて最大の数値を入力していきましたが、数値を変更していくことで配色の変化ができます
黄色（２５５、２５５、０）
シアン（０、２５５、２５５）
その他の色の選択方法
そんな数字で色を選ぶなんてしたことないからよくわからないという方
Processingでは自分の目で色を探すことができるので安心してください
ツールという部分の色選択という部分をクリック
こんなのが出てきます
この中から色を選んでいきます
選び方
①から色を選びます
②の枠内からマウスを使って好きな色合いのところにカーソルを持っていきます
③の数値が出てくるのでその数値をコードの部分に入力する
というやり方で色を選ぶこともできます
fill()関数ついて
fill関数は塗りつぶしという意味の関数です
枠内を選択した色で塗りつぶします
コード入力・実行
size(900, 600)
strokeWeight(20)
rect(100, 200, 700, 200) #わかりやすくするために付け足しました
fill(0,0, 255) #ここにコードを入力していきます
rect(150, 100, 600, 400)
青く塗りつぶしができました
なんか白いでっぱりがあります
青色の四角の中はどのようになっているのでしょうか？
気になりません？
そんな時に役に立つのがnoFill関数です
noFill()について
noFill関数は塗りつぶしなしという意味です
コード入力、実行
size(900, 600)
strokeWeight(20)
rect(100, 200, 700, 200) #わかりやすくするために付け足しました
noFill() #ここにコードを入力していきます
rect(150, 100, 600, 400)
塗りつぶしをなくすと中が見れます
実はこんな感じになってました！！
はい！
わかりますよ予想通りって声がそこかしこから聞こえてきそうです
ただ、もしかすると中身は
こんな感じだったかもしれないじゃないですか
中身は見てみないとわかりませんよ
※ロボットの顔のコードは最後に載せてあります興味があればどうぞ
そんなことはいいので次行きます
stroke()関数について
線の色を設定していく関数です
size(900, 600)
strokeWeight(20)
stroke(0,0, 255) #ここの行にコードを入力していきます
rect(150, 100, 600, 400)
黒い淵が青く変わりました青い淵をなくすこともできます
noStroke()について
線を消すことができます
size(900, 600)
strokeWeight(20)
noStroke() #ここの行にコードを入力していきます
rect(150, 100, 600, 400)
なくなりました
図形を作る際に必ず黒い淵が付いてくるので、作品の邪魔になることがあるので枠線の消し方も一緒に覚えておくと便利です
tint()について
Processingでは画像の読み込みもできます
画像を読み込んだ際にその画像へ着色したり、透明度（アルファ値）を入れることができるようです
今は詳しくわからないので割愛させてください
colorMode()について
色のモードを選択できるコードです
色のモードは2種類あり
RGBとHSBの2種類あります
コードの説明
colorMode(RGBかHSBを選択,100)を入力することで色の種類を選ぶことができます
このコードを最初に入力することで以下のコードに影響を与えます
それぞれを比較と入力・実行
size(900, 600)
colorMode(HSB,100) #ここの部分を変更していきます
strokeWeight(20)
background(50,50, 50)
rect(150, 100, 600, 400)colorMode()なし
若干暗い感じがします
colorMode(RGB、100)
RGBを入れるとグレー色が強くなりました
colorMode(HSB、１００)
HSBでは色相の選択になるので色が出てきます
それぞれ同じ数値ですが、colorMode()を入力することで色に変化が出てきます
各それぞれの使い方については私も詳しくないので割愛します
この度Udemyで講座を作りました
【プログラミングｘアート】直感的・視覚的に学ぶ Processing×Python 入門講座
ブログに書いてある内容を一つの講座にしています
まとめ
Processingで色の付け方についてまとめてみました
色の付け方は様々ですが、表現の方法がより広がると思うので是非できるようになって下さい
このれより以下はProcessingの使い方とは直接関係ない内容です
色の付け方をまとめていると色って不思議ということで、私なりに色についてまとめてみたので興味があれば見ていってください
色とは
色ってよくなじみのある言葉で青や赤や黄色などすぐにイメージが付くと思います
そこで、色について少し調べてみました
色を表すための『ものさし』には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のイメージはこんな感じになります
サンプルコード
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)
コメント