makegirlsmoe_ex_20170818.js

// return t.generate()の行にブレークポイント
getObject = () => t;

getState = () => getObject().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 = async () => await getObject().generate();
// NoiseをRandomにしてGenerate
generateByRandom = async () => { randomNoise(); await generate(); };
// 引数で指定したNoiseでGenerate
generateBy = async a => { fixNoise(); setNoise(a); await 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 downloadImage = (img = _tmps[0][0], name = "mgm.png") => {
    img = img || document.body.querySelector(".result-canvas").firstChild;
    var a = document.createElement("a");
    a.href = img.src;
    a.target = "_blank";
    a.download = name;
    a.click();
}

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

    results.appendChild(img);
    return img;
}

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

var deleteImg = (img = _tmps[0][1]) => {
    img.onclick = null;
    img.src = "";
    img.parentNode.removeChild(img);
}

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

// aとbに指定したNoiseでn枚画像補間し，下に表示．wait_secはGenerateにかかる時間（実行環境により調整）．
var generateInterpolations = async (n, a = _tmps[0][0], b = _tmps[1][0]) => {
    let result = document.body.querySelector(".result-canvas").firstChild;

    // デフォルト引数が使われたか
    var ok = a == _tmps[0][0] && b == _tmps[1][0];
    if (ok) addImg(_tmps[0][1].src, _tmps[0][0]);
    for (var i = ok ? 1 : 0; i < (ok ? n - 1 : n); i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        let noise = interpolate(a, b, i / (n - 1));
        await generateBy(noise);
        addImg(result.src, noise);
    }
    if (ok) addImg(_tmps[1][1].src, _tmps[1][0]);
}

// RandomなNoiseでn枚画像生成し，下に表示．wait_secはGenerateにかかる時間（実行環境により調整）．
var generateRandomImages = async n => {
    var result = document.body.querySelector(".result-canvas").firstChild;

    for (var i = 0; i <= n - 1; i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        await generateByRandom();
        addImg(result.src);
    }
}

// 辞書的に呼び出せば共通化できそう
var generateLipSynching = async (n, a = _tmps[0][0]) => {
    a = a || getNoise();
    let result = document.body.querySelector(".result-canvas").firstChild;
    let op = getOption();
    let moto = op.open_mouth;
    op.open_mouth = -1;
    for(var i = 0; i < n; i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        op.open_mouth = -1 + (2 / (n - 1)) * i;
        await generateBy(a);
        addImg(result.src, a);
    }
    op.open_mouth = moto;
}

var generateSmile = async (n, a = _tmps[0][0]) => {
    a = a || getNoise();
    let result = document.body.querySelector(".result-canvas").firstChild;
    let op = getOption();
    let moto = op.smile;
    op.smile = -2;
    for(var i = 0; i < n; i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        op.smile = -2 + (4 / (n - 1)) * i;
        await generateBy(a);
        addImg(result.src, a);
    }
    op.smile = moto;
}

var generateGlasses = async (n, a = _tmps[0][0]) => {
    a = a || getNoise();
    let result = document.body.querySelector(".result-canvas").firstChild;
    let op = getOption();
    let moto = op.glacess;
    op.glasses = -1;
    for(var i = 0; i < n; i++) {
        if (_isAborted) {
            _isAborted = false;
            break;
        }
        op.glasses = -1 + (5 / (n - 1)) * i;
        await generateBy(a);
        addImg(result.src, a);
    }
    op.glacess = moto;
}

var _bs = [];
// ボタン追加処理
var addButton = (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("百合", () => generateInterpolations(3));
addButton("下へ", () => { addImg(document.body.querySelector(".result-canvas").firstChild.src, getNoise()); });
addButton("上へ", () => { generateBy(_tmps[0][0]); });
// 選択したやつなのか、表示してる画像なのかわかりにくいけど許して
addButton("口パク", () => generateLipSynching(10));
addButton("笑顔", () => generateSmile(10));
addButton("メガネ", () => generateGlasses(10));
addButton("クリア", () => clearImgs());
addButton("1枚削除", () => deleteImg());