Skip to content

p5.js いろいろな色を指定しよう! color の使い方 #p5.js #color

p5.js 学習していきましょう。どんな形のものを作るにしても、色の指定は大事ですね。
今回は、colorの使い方です。

p5.jsのセットアップ方法は、こちらです。

 

color

colorの指定方法です。

 

  • color(gray, [alpha])
  • color(v1, v2, v3, [alpha])
  • color(value)
  • color(values)
  • color(color)

 

  • gray Number:白と黒の間の値を指定する数値
  • alpha Number:現在のカラー範囲に対するアルファ値(デフォルトは0〜255)
  • v1 Number:現在のカラー範囲を基準とする赤または色相の値
  • v2 Number:現在のカラー範囲を基準にした緑または彩度の値
  • v3 Number:現在のカラー範囲を基準にした青または輝度の値
  • value String:色を文字で書く 例)red
  • values Number []:色の赤、緑、青およびアルファ成分を含む配列
  • color p5.Color:

 

See the Pen sector28 by sector28 (@hamaup) on CodePen.

 

 

color(gray, [alpha])

gray: 0 – 255で指定
alpha: 0 – 255で指定

 

color(v1, v2, v3, [alpha])

hex color、RGB、RGBA、HSL、HSLA、HSB、HSBAで指定ができる。
デフォルトのカラーモードは、RGB。
RGBAは、RGBにalphaが加わったもの。HSLA、HSBAもそれぞれにalpha が加わったもの。

 

 

 

color(value)

色の名前で指定できます。

Red,Green,Yellow,Black,White,etc

 

 

color(values)

配列で指定ができます。

 

 

p5.jsの色の指定方法は、たくさんありましたね。デフォルトのカラーモードは、RGBですが、
colorModeで指定してやるとそのカラーモードで色が指定できます。コードが見やすくなりますね。

 

 

色の指定方法は、多用するので先にマスターしておきましょう!

 


Be First to Comment

コメントを残す

%d人のブロガーが「いいね」をつけました。