【Javascript】HSL⇔HSY色空間変換クラス

概要

この記事は、Javascriptを用いたHSL⇔HSY色空間の変換式を紹介しています。導入式の理論や説明はこちらからご覧ください。また、前回のRGB⇔HSL色空間変換クラスを前提として実装しておりますので、そちらもご参照ください。

コード

HSYColorSpace.js

class HSYColorSpace extends HSLColorSpace {
    constructor(r, g, b) {
        super(r, g, b);
        this.isHoldY = false; // public
    }
    initialize() {// @Override
        this._y = new Range(0);// contrast
        super.initialize();
    }
    static get _pr() {
        return 0.298912;
    }
    static get _pg() {
        return 0.586611;
    }
    static get _pb() {
        return 0.114478;
    }
    get y() {
        return this._y.get();
    }
    set y(newValue) {
        this._y.set(newValue);
        this.transformLuminosityFromContrast();
        this.inverseTransformation();
    }
    get l() {// setterとgetterはセットでOverrideしなければならない
        return super.l;
    }
    set l(newValue) {// @Override
        this._l.set(newValue);
        this.transformContrastFromLuminosity();
        super.inverseTransformation();
    }
    transformation() {// @Override
        super.transformation();
        this.transformContrastFromLuminosity();
    }
    inverseTransformation() {// @Override
        if(this.isHoldY)
            this.transformLuminosityFromContrast();
        else
            this.transformContrastFromLuminosity();

        super.inverseTransformation();
    }
    transformContrastFromLuminosity() {
        let c = this._coef;
        let l = this._l.get();

        if(this._l.isOver(0.5))
            this._y.set(l * (1 + c) - c);
        else
            this._y.set(l * (1 - c));
    }
    transformLuminosityFromContrast() {
        let c = this._coef;
        let y = this._y.get();

        if(this._y.isOver((1 - c) / 2))
            this._l.set((y + c) / (1 + c));
        else
            this._l.set(y / (1 - c));
    }
    get _pure() { // PureColorContrast: 純色(s = 1.0, l = 0.5)のコントラストy
        const self = HSYColorSpace;
        const pr = self._pr, pg = self._pg, pb = self._pb;
        const pmax = [pr,pg,pg,pb,pb,pr];
        const pmid = [pg,pr,pb,pg,pr,pb];
        //const pmin = [pb,pb,pr,pr,pg,pg];
        let i = this._h.interval;
        return pmax[i] + this._h.different * pmid[i];
    }
    get _coef() { // 計算を簡単に表記するための定数
        return this.s * (1 - 2 * this._pure); // S * 2 * (0.5 - pure)
    }
    static calc(r, g, b) {
        const self = HSYColorSpace;
        const pr = self._pr, pg = self._pg, pb = self._pb;
        return pr * r + pg * g + pb * b;
    }
}

コメントにも書いてありますが、プロパティ（getterとsetter）をOverrideする場合は、両方をOverrideする必要があります。片方、例えばsetterだけOverrideすると、getterは使用できなくなります。結果、getterの戻り値はundefinedとなります。