P5.js 日本語リファレンス(tint) #JavaScript

tint()

説明文

画像を表示するための塗りつぶしの値を設定します。画像はアルファ値を含めることにより、指定した色に着色したり透明にしたりできます。

色に影響を与えずに画像に透明度を適用するには、濃淡色として白を使用しアルファ値を指定します。たとえば tint(255, 128) は画像を 50% 透明にします(colorMode() で変更できるデフォルトのアルファ範囲 0〜255 を想定)。

grayパラメータの値は colorMode() で指定された現在の最大値以下でなければなりません。デフォルトの最大値は255です。

構文

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

tint(value)

tint(gray, [alpha])

tint(values)

tint(color)

パラメタ

v1
Number：現在の色の範囲を基準にした赤または色相の値
v2
Number：現在の色の範囲に関連する緑または彩度の値
v3
Number：現在の色の範囲に関連する青または明るさの値
alpha
Number：(オプション)
value
String：カラー文字列
gray
Number：グレイ値
values
Number[]：色の赤、緑、青およびアルファコンポーネントを含む配列
color
p5.Color：色

例1

let img;
function preload() {
  img = loadImage('assets/mountain.jpg');
}

function setup() {
  createCanvas(500, 500);

  // 現画像を表示します
  image(img, 0, 0);

  // 色合い(tint)を青にして表示します
  tint(0, 153, 206); // blue
  image(img, 150, 100);
}

実行結果

例2

let img;
function preload() {
  img = loadImage('assets/mountain.jpg');
}
function setup() {
  createCanvas(500, 500);

  // 現画像を表示します
  image(img, 0, 0);

  // 青に色付けし, 透明度を設定します
  tint(0, 153, 204, 126);
  image(img, 150, 100);
}

実行結果

例3

let img;
function preload() {
  img = loadImage('assets/mountain.jpg');
}

function setup() {
  createCanvas(500, 500);

  // 現画像を表示します
  image(img, 0, 0);

  // 色を変更せずに透明度を適用します
  tint(255, 126); 
  image(img, 150, 100);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。