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

今回はProcessing×Python を使用してプログラミングで色の付け方を学んでいきましょう

今までの記事の内容では

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

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

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

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

注意点

この記事はProcessingのPython設定で作成しております
Java設定だとエラーが出るので注意してください

設定方法がわからない方は、以下の記事を参考にしてみてください

Processingでの色の付け方

Processingでは色のつけもプログラムを書いて表現していきます

色の付け方や場所によってコードの内容が異なるので少し分けて説明していきます

変色した場所や内容がわかりやすいように事前準備として

以下のこちらのコードを入力してください

このコードを編集して色を付けていきます

コードを実行するとこんな感じの図が出てくると思います

この画像に色を付けてどの部分に色が付くのかを確認していきます

各種色付けコードについて

実際に色を付けていきます

関数の種類によって色の付け方が変化してきます

background()について

background関数は背景の色を付けることができます

コード入力、実行

背景が青になりました

コードの説明

色付けは、各種関数内の()内へ数値を入力していきます

各種コード（　R（赤）、G（緑）B（青）　）

という色の配列となっており、コード内のRGBの部分へ0～255までの数値を入力することで変色できます

background(　0　　,　 0　　,　 255　　)

と入力することで背景が青くなります

以下に各それぞれの数値に255を入力していくと色が変化します

赤（255、0、０）

緑（０、255、０）

青（０，０，２５５）

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

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

黄色（２５５、２５５、０）

シアン（０、２５５、２５５）

その他の色の選択方法

そんな数字で色を選ぶなんてしたことないからよくわからないという方

Processingでは自分の目で色を探すことができるので安心してください

ツールという部分の色選択という部分をクリック

こんなのが出てきます

この中から色を選んでいきます

選び方

①から色を選びます

②の枠内からマウスを使って好きな色合いのところにカーソルを持っていきます

③の数値が出てくるのでその数値をコードの部分に入力する

というやり方で色を選ぶこともできます

fill()関数ついて

fill関数は塗りつぶしという意味の関数です

枠内を選択した色で塗りつぶします

コード入力・実行

青く塗りつぶしができました

なんか白いでっぱりがあります

青色の四角の中はどのようになっているのでしょうか？

気になりません？

そんな時に役に立つのがnoFill関数です

noFill()について

noFill関数は塗りつぶしなしという意味です

コード入力、実行

塗りつぶしをなくすと中が見れます

実はこんな感じになってました！！

はい！

わかりますよ予想通りって声がそこかしこから聞こえてきそうです

ただ、もしかすると中身は

こんな感じだったかもしれないじゃないですか

中身は見てみないとわかりませんよ　　

※ロボットの顔のコードは最後に載せてあります興味があればどうぞ

そんなことはいいので次行きます

stroke()関数について

線の色を設定していく関数です

黒い淵が青く変わりました青い淵をなくすこともできます

noStroke()について

線を消すことができます

なくなりました

図形を作る際に必ず黒い淵が付いてくるので、作品の邪魔になることがあるので枠線の消し方も一緒に覚えておくと便利です

tint()について

Processingでは画像の読み込みもできます

画像を読み込んだ際にその画像へ着色したり、透明度（アルファ値）を入れることができるようです

今は詳しくわからないので割愛させてください

colorMode()について

色のモードを選択できるコードです

色のモードは2種類あり

RGBとHSBの2種類あります

コードの説明

colorMode(RGBかHSBを選択,100)を入力することで色の種類を選ぶことができます

このコードを最初に入力することで以下のコードに影響を与えます

それぞれを比較と入力・実行

colorMode()なし

若干暗い感じがします

colorMode(RGB、100)

RGBを入れるとグレー色が強くなりました

colorMode(HSB、１００)

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のイメージはこんな感じになります

サンプルコード

まとめ

今回は色の付け方について説明をしていきました。

いろんな図形を並べるだけでも、模様は出来ますが、色がついて来るとより面白い作品が出来ると思います。

するともっと素敵な作品を作ってみたいと思う方もいると思います。次回はブログラミングだからこそ出来る作品を説明していきますので、参考にしてみてください。

本気でプログラマーを目指している方へは、プログラミングのスクールをオススメしております。

中でも TechAcademy テックアカデミーをオススメしており、 TechAcademy テックアカデミーの実績として、
多くの会員がエンジニアとして巣立ってきました。数年前より、学生エンジニアという存在が物凄く注目されるようになっており、
メガベンチャーもこぞって、サマーインターンを実施、プログラミングを叩ける人材を青田刈りしています。
この職種は、学歴、学部、全く関係なく、プログラミング開発経験やその熱量がモノをいいます。
私より上の世代では、「エンジニアは3K」「ただの職人」「うつ病になりやすい」「35歳限界説」など
良いイメージを持っていないかと思います。

逆に若手のエンジニアは恵まれた環境に安心してキャリアを崩すといったこともあります。
そのあたりについて、いろいろと聞いてきましたので、
近くに若いエンジニアがいらっしゃるのであれば、助言するときに参考になるかと思います。

以下のリンクから【自宅で現役エンジニアから学べる TechAcademy テックアカデミー】に無料相談が出来るので以下のリンクから無料相談をしてみてください

無料相談はこちらから