makegirlsmoe_ex_20170815.js

//this.gan.run(n, this.state.options.noise ... の行にブレークポイント
getState = () => this.state;

getOption = () => getState().options;
getNoise = () => getState().gan.noise;

// NoiseをFixedに
fixNoise = () => getOption().noise = 1;
// NoiseをRandomに
randomNoise = () => getOption().noise = 0;

// Noiseを出力
printNoise = () => "[" + getNoise().join(',') + "]";
// Noiseを設定
setNoise = a => { cn = getNoise(); for (var i = 0; i < a.length; i++) cn[i]=a[i]; };

// Generate
generate = () => document.querySelector(".btn").click();
// NoiseをRandomにしてGenerate
generateByRandom = () => { randomNoise(); generate(); };
// 引数で指定したNoiseでGenerate
generateBy = a => { fixNoise(); setNoise(a); generate() };

// ベクトルの操作
add = (a, b) => a.map((x, i) => x + b[i]);
sub = (a, b) => a.map((x, i) => x - b[i]);
times = (a, t) => a.map((x, i) => x * t);
interpolate = (a, b, p) => a.map((x, i) => x * (1-p) + b[i] * p);

_tmps = [[],[]];

// 生成済みの画像を下に表示
var addImg = function(src) {
    var results = document.body.querySelector(".imgs");
    if (!results) {
        results = document.createElement("div");
        results.className = "row imgs";
        document.body.querySelector(".App").appendChild(results);
    }
    
  	var img = document.createElement("img");
  	img.src = src;
    
    var noise = getNoise();
    img.onclick = () => {
        console.log("[" + noise.join(',') + "]");
        console.log(img);
        img.style.opacity = 0.5;
        if (_tmps[0][0] && !_tmps[1][0]) _tmps = [[noise, img], _tmps[0]];
        else {
            if (_tmps[0][1]) _tmps[0][1].style.opacity = 1.0;
            _tmps = [_tmps[1], [noise, img]];
        }
    }

  	results.appendChild(img);
    return img;
}

// 下に表示してある画像をクリア
var clearImgs = function() {
    var imgs = document.body.querySelector(".imgs");
    for (var x of imgs.children) {
        x.onclick = null;
        x.src = "";
    }
    imgs.parentNode.removeChild(imgs);
}

// 待機
var sleep = function(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// 中断フラグ
var _isAborted = false;

// aとbに指定したNoiseでn枚画像補完し，下に表示．wait_secはGenerateにかかる時間（実行環境により調整）．
var generateInterpolations = async function(n, a = _tmps[0][0], b = _tmps[1][0], wait_sec = 7) {
    var img = document.body.querySelector(".result-canvas").firstChild;
    var src = "";
    // デフォルト引数が使われたか
    var ok = a == _tmps[0][0] && b == _tmps[1][0];

    if (ok) addImg(_tmps[0][1].src);
    for (var i = ok ? 1 : 0; i < (ok ? n - 1 : n); i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        generateBy(interpolate(a, b, i / (n - 1)));
        await sleep(wait_sec * 1000);
        addImg(img.src);
    }
    if (ok) addImg(_tmps[1][1].src);
}

// RandomなNoiseでn枚画像生成し，下に表示．wait_secはGenerateにかかる時間（実行環境により調整）．
var generateRandomImages = async function (n, wait_sec = 7) {
    var result = document.body.querySelector(".result-canvas").firstChild;
    var src = "";
    for (var i = 0; i <= n - 1; i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        generateByRandom()
        await sleep(wait_sec * 1000);
        addImg(result.src);
    }
}

_bs = [];
// ボタン追加処理
var addButton = function(text, func) {
    var _b = document.body.querySelector(".btn-primary").cloneNode();
    _b.textContent = text;
    _b.onclick = func;
    document.body.querySelector(".options-container").lastChild.appendChild(_b);
    _bs.push(_b);
}

addButton("生成！", () => generateRandomImages(100));
addButton("補完！", () => generateInterpolations(10));
addButton("中断！", () => { _isAborted = true; });
addButton("複製！", () => { addImg(document.body.querySelector(".result-canvas").firstChild.src); });
addButton("百合", () => generateInterpolations(3));
addButton("クリア", () => clearImgs());