mieki256's diary

tint() を使うことで、画像の色合いを変更しながら描画することができるのだけど、どのパラメータがどう反映されるのかよく分からない…。

colorMode(HSB, 360.0, 100.0, 100.0); を記述することで以下の範囲の値が指定できるようなるけれど。

• Hue(色相) を 0.0 - 360.0
• Saturation(彩度) を 0.0 - 100.0
• Brightness(明度) を 0.0 - 100.0

画像の本来の色を出す値としては、どういう値を指定すればいいのか…。

一応テスト用のプログラムを書いてみけど…。よく分からない…。

_sketch_tint_test.pde

// tint() test.

import controlP5.*;

PImage img;
float scrw, scrh;

ControlP5 cp5;
Slider slider_hsb_h;
Slider slider_hsb_s;
Slider slider_hsb_b;

void setup() {
  size(512, 512, P2D);
  scrw = width;
  scrh = height;
  img = loadImage("leaf.png");

  // init ControlP5 (GUI library)
  cp5 = new ControlP5(this);
  PFont myfont = createFont("Arial", 14, true);
  ControlFont cf1 = new ControlFont(myfont, 14);
  float x = 20;
  float y = 20;
  float yd = 40;
  
  slider_hsb_h = cp5.addSlider("hue")
    .setRange(0.0, 360.0)
    .setValue(180.0)
    .setPosition(x, y + 0 * yd)
    .setSize(180, 20)
    .setColorForeground(color(0, 160, 0))
    .setColorActive(color(0, 200, 0))
    .setFont(cf1);

  slider_hsb_s = cp5.addSlider("saturation")
    .setRange(0.0, 100.0)
    .setValue(100.0)
    .setPosition(x, y + 1 * yd)
    .setSize(180, 20)
    .setColorForeground(color(0, 160, 0))
    .setColorActive(color(0, 200, 0))
    .setFont(cf1);

  slider_hsb_b = cp5.addSlider("brightness")
    .setRange(0.0, 100.0)
    .setValue(100.0)
    .setPosition(x, y + 2 * yd)
    .setSize(180, 20)
    .setColorForeground(color(0, 160, 0))
    .setColorActive(color(0, 200, 0))
    .setFont(cf1);
}

void draw() {
  noTint();
  colorMode(RGB, 255, 255, 255);
  background(color(40, 80, 160));
  
  imageMode(CENTER);
  colorMode(HSB, 360, 100, 100);
  float h = slider_hsb_h.getValue();
  float s = slider_hsb_s.getValue();
  float b = slider_hsb_b.getValue();
  tint(h, s, b);
  image(img, scrw / 2, scrh / 2);
  colorMode(RGB, 255, 255, 255);
  noTint();
}

使用画像は以下。.pde と同じ階層に data/ を作成して、その中に入れる。

_leaf.png

動作時の見た目は以下。