Processing GENERATIVE DESIGN P_1_0_01


Custom Color Ranges

RGB color with ranges of 0 to 255 is not the only way you can handle color in Processing. Behind the scenes in the computer’s memory, color is always talked about as a series of 24 bits (or 32 in the case of colors with an alpha). However, Processing will let us think about color any way we like, and translate our values into numbers the computer understands. For example, you might prefer to think of color as ranging from 0 to 100 (like a percentage). You can do this by specifying a custom colorMode().

RGBカラーは通常0から255の範囲の数値で指定されますが、Processingにおいては他の方法で指定することも可能です。コンピューター自信は常に色を24ビット考えています (アルファをいれる場合は32bitで考えています) しかし、プロセシングはどんなふうにでも考える余地を私たちに与えてくれていて、私達の考える値をコンピューターが理解できる値へと翻訳してくれます。例えば、色を0〜100の値で考えたいとしましょう(つまり百分率と似たようにです) その場合にはcolorMode()を使えばいいのです。

The above function says: “OK, we want to think about color in terms of red, green, and blue. The range of RGB values will be from 0 to 100.”

この関数で次のことを宣言しています。「よし、色を赤、緑、青の観点から考えるぞ。(=RGBモード) RGBの値の範囲は0〜100としよう。」

Although it is rarely convenient to do so, you can also have different ranges for each color component:


Now we are saying “Red values go from 0 to 100, green from 0 to 500, blue from 0 to 10, and alpha from 0 to 255.”


Finally, while you will likely only need RGB color for all of your programming needs, you can also specify colors in the HSB (hue, saturation, and brightness) mode. Without getting into too much detail, HSB color works as follows:

最後に、RGBだけがあればプログラミングには足りるかもしれませんが、HSB(hue=色相, saturation=彩度, and brightness=明度)によって指定することもできます。ここでは詳しく述べませんが、HSBモードは次のように機能します。

  • Hue—The color type, ranges from 0 to 255 by default.
  • Saturation—The vibrancy of the color, 0 to 255 by default.
  • Brightness—The, well, brightness of the color, 0 to 255 by default.
  • 色相-色の種類。0-255まである。
  • 彩度-色の振動?
  • 彩度-色の明るさ

With colorMode() you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%).



  • マウスの位置を色に反映させる
  • HSBモード、colorMode()を使う
  • Sボタンを押すと.png形式で書き出す






この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

One comment


メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

以下の数式は「スパム対策」です。空欄に正しい数字をいれてください。お手数をおかけします。 *