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

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の tint関数を説明します。

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);
}

実行結果

https://editor.p5js.org/bit0101/sketches/G06sEGo3_

例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) に従います。