【超初心者向け】Processingでプログラミング言語Pythonを使っって図形や線に色をつけてみよう

Processing python

初めましてダダです

前回の記事ではProcessingでプログラミング言語Pythonを使った図形の描き方についての記事を書きました

↓↓↓内容が気になる方はこちらから↓↓↓

【超初心者向け】Processingでプログラミング言語Pythonを使った図形の描き方について

そして、今回は線や図形の描き方は分かったけど…

色がグレーに黒で色味がないので面白くない

色を使っていろんな表現をしてみたい

という方も多いと思うので今から色の付け方を説明していきます

この記事を見るとProcessingで図形や線に色を付けれるようになります色のことについて少し理解できると思います

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

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

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

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

↓↓↓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、0)
緑(0、255、0)
青(0,0,255)

のように色が変化していきます

すべて最大の数値を入力していきましたが、数値を変更していくことで配色の変化ができます

黄色(255、255、0)
シアン(0、255、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、100)

HSBでは色相の選択になるので色が出てきます

それぞれ同じ数値ですが、colorMode()を入力することで色に変化が出てきます

各それぞれの使い方については私も詳しくないので割愛します

まとめ

Processingで色の付け方についてまとめてみました

色の付け方は様々ですが、表現の方法がより広がると思うので是非できるようになって下さい

このれより以下はProcessingの使い方とは直接関係ない内容です

色の付け方をまとめていると色って不思議ということで、私なりに色についてまとめてみたので興味があれば見ていってください

色とは

色ってよくなじみのある言葉で青や赤や黄色などすぐにイメージが付くと思います

そこで、色について少し調べてみました

色を表すための『ものさし』には3種類あり、色の三属性と呼ばれています

それぞれを色相・彩度・明度と呼ばれます

この3つの要素が組み合わさればどのような色も客観的かつ正確に表現することができます

色の三属性

色相・彩度・明度について少し説明していきます

色相

『色合い』または『色味の違い』のこと色相は言葉を使って赤・黄・緑・青のような色相名で表すことができる

または有彩色とも呼ばれる

有彩色

少しでも色味を持つ色は有彩色

画像引用:Wikipediaより
無彩色

色相とは異なるが色合いがないもの(黒・灰色・白)を無彩色という

彩度

『色味の強さ』または『鮮やかさの度合い』

画像引用:Wikipediaより

明度

明るさの度合い、物体の反射率と相関が高い

画像引用:Wikipediaより

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

引用:Wikipedia

RGBのイメージはこんな感じになります

HSBとは

HSBとは色相(Hue)彩度(Saturation・Chroma),明度(Brightness・Value)の3つからなる色空間モデル

Processingでは数値を入力します

色相・・・色の種類(0~360°)

彩度・・・色の鮮やかさ(0~100%)

明度・・・色の明るさ(0~100%)

引用:Wikipedia

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)

コメント

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