【超初心者向け】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のイメージはこんな感じになります

サンプルコード

まとめ

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

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

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

Pythonってどんな物？
プログラミングってどんな物？という方はこちらの記事を参考にしてみてください！！

また、プログラミングに興味はあるけどどうやって勉強していいのかわからないという方はプログラミングを視覚的に理解できる講座を作っていますのでこちらを参考にしてみてください！

Udemyというプラットホームを使用して作成した講座です。
初心者向けに作った講座となっております。以下から講座の確認ができるので見てみてください

Udemyの講座はこちらから

プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ！今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか？

ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。

このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです！一緒にネットショップを開設し、副業の第一歩を踏み出しましょう！