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

動作時の見た目は以下。

環境は Windows10 x64 22H2。

セットアップファイルは、ソースネクストではなく、開発元(?)の Serif 公式サイトからダウンロードする模様。ソースネクストのサイトに、「Serif Affinity Designer for PC 2 スタートガイド」というpdfがあるので、じっくり見て、手順に沿って作業する。

件の .pdf に記述されたURLで、Serif のサイトに飛ぶ。VOUCHER CODE なるものを入力するとダウンロードページに辿り着けるのだけど、その途中でアカウントを作成して、メールアドレスとパスワードを Serif に登録しておく。

ダウンロードしたのは、Affinity Designer 2.5.5、affinity-designer-msi-2.5.5.exe。約584MB。今回、D:\Program Files\Affinity\ にインストールした。

起動するとメールアドレスとパスワードを入力するウインドウが開く。先ほど作成したアカウントのメールアドレスとパスワードを入力すれば利用できるようになる。

しかし、こういう手順でセットアップするとなると…。万が一、Serif社が倒産して公式サイトが消滅したら、このアプリのセットアップ作業はもうできなくなってしまうのだろうな…。

ソースネクストの通販サイトは、以前クレジットカード情報を大量流出させてしまったことがあるので、クレジットカードで購入するのは、まだちょっと怖いなと。なので、手数料が若干追加されるけど、今回はコンビニ後払いを選んでみた。初めて利用する支払方法だけど、どのくらい時間が経ったら請求が来るのだろうか…。