Demo Filters 104

import * as scrawl from '../source/scrawl.js';

import { reportSpeed, addImageDragAndDrop } from './utilities.js';

const canvas = scrawl.library.canvas.mycanvas;

canvas.setBase({
    compileOrder: 1,
});

const patternCell = canvas.buildCell({

    name: 'bar-cell-pattern',
    dimensions: [80, 80],
    shown: false,
    useAsPattern: true,
    skewX: 0,
    stretchX: 1,
    shiftX: 0,
    skewY: 0,
    stretchY: 1,
    shiftY: 0,
});

const barGradient = scrawl.makeGradient({

    name: 'bar-cell-gradient',
    endX: '100%',

    colors: [
        [0, 'transparent'],
        [199, 'transparent'],
        [499, 'white'],
        [799, 'transparent'],
        [999, 'transparent'],
    ],
});

const ringGradient = scrawl.makeRadialGradient({

    name: 'ring-cell-gradient',
    startX: '50%',
    startY: '50%',
    endX: '50%',
    endY: '50%',

    startRadius: '0%',
    endRadius: '50%',

    colors: [
        [0, 'transparent'],
        [199, 'transparent'],
        [499, 'white'],
        [799, 'transparent'],
        [999, 'transparent'],
    ],
});

const updateGradients = (items) => {

    barGradient.set(items);
    ringGradient.set(items);
};

const filterBlock = scrawl.makeBlock({

    name: 'bar-cell-box',
    group: 'bar-cell-pattern',
    dimensions: ['100%', '100%'],
    fillStyle: 'bar-cell-gradient',
});

const filterCell = canvas.buildCell({

    name: 'bar-cell',
    dimensions: ['100%', '100%'],
    shown: false,
});

scrawl.makeBlock({

    name: 'bar-base-box',
    group: 'bar-cell',
    dimensions: ['100%', '100%'],
    fillStyle: 'bar-cell-pattern',
});

const glassBarsFilter = scrawl.makeFilter({ name: 'glass-bars' }),
    displaceBarsFilter = scrawl.makeFilter({ name: 'displace-bars' }),
    etchingFilter = scrawl.makeFilter({ name: 'etching' }),
    greenMonitorFilter = scrawl.makeFilter({ name: 'green-monitor' });

let fOffsetX = 0,
    fOffsetY = 0,
    fOpacity = 1,
    fBlend = 'multiply',
    fDisplaceX = 10,
    fDisplaceY = 10;

const getProcessImageFilter = () => {
    return [{
        action: 'process-image',
        asset: 'bar-cell',
        width: '100%',
        height: '100%',
        copyWidth: '100%',
        copyHeight: '100%',
        lineOut: 'bars',
    }];
};

const getBlendFilter = () => {
    return [{
        action: 'blend',
        lineMix: 'bars',
        blend: fBlend,
        offsetX: fOffsetX,
        offsetY: fOffsetY,
        opacity: fOpacity,
    }];
};

const getDisplaceFilter = () => {
    return [{
        action: 'displace',
        lineMix: 'bars',
        offsetX: fOffsetX,
        offsetY: fOffsetY,
        opacity: fOpacity,
        scaleX: fDisplaceX,
        scaleY: fDisplaceY,
    }];
};

const getGrayscaleFilter = () => {
    return [{
        action: 'grayscale',
    }];
};

const getMonitorFilter = () => {
    return [{
        action: 'modulate-channels',
        red: 0,
        green: 1.3,
        blue: 0,
    }];
};

const getEtchFilter = () => {
    return [{
        action: 'gaussian-blur',
        radius: 1,
    }, {
        action: 'matrix',
        weights: [1, 1, 1, 1, -8, 1, 1, 1, 1],
    }, {
        action: 'invert-channels',
    }, {
        action: 'threshold',
        level: 252,
    }];
};

const updateFilters = () => {

    glassBarsFilter.set({
        actions: [
            ...getProcessImageFilter(),
            ...getBlendFilter(),
        ],
    });

    displaceBarsFilter.set({
        actions: [
            ...getProcessImageFilter(),
            ...getDisplaceFilter(),
        ],
    });

    etchingFilter.set({
        actions: [
            ...getProcessImageFilter(),
            ...getGrayscaleFilter(),
            ...getEtchFilter(),
            ...getBlendFilter(),
        ],
    });

    greenMonitorFilter.set({
        actions: [
            ...getProcessImageFilter(),
            ...getGrayscaleFilter(),
            ...getMonitorFilter(),
            ...getBlendFilter(),
        ],
    });
};

updateFilters();

scrawl.importDomImage('.flowers');

const target = scrawl.makePicture({

    name: 'target-image',

    asset: 'iris',

    width: '100%',
    height: '100%',

    copyWidth: '100%',
    copyHeight: '100%',

    method: 'fill',

    filters: ['glass-bars'],
});

addImageDragAndDrop(canvas, '#my-image-store', target);

const report = reportSpeed('#reportmessage', function () {

    return `    Filter dimensions - \n        width: ${filterWidth.value}%; height: ${filterHeight.value}%\n    Filter offset - \n        x: ${filterOffsetX.value}px; y: ${filterOffsetY.value}px\n    Pattern dimensions - \n        width: ${patternWidth.value}px; height: ${patternHeight.value}px\n    Pattern matrix -\n        shiftX: ${shiftX.value}; shiftY: ${shiftY.value}\n        skewX: ${skewX.value}; skewY: ${skewY.value}\n        stretchX: ${stretchX.value}; stretchY: ${stretchY.value}\n    Displace filter scaling - \n        x: ${filterScaleX.value}; y: ${filterScaleY.value}\n    Opacity: ${opacity.value}`;
});

const demoAnimation = scrawl.makeRender({

    name: "demo-animation",
    target: canvas,
    afterShow: report,
});

scrawl.observeAndUpdate({

    event: ['change', 'input'],
    origin: '.patternCell',

    target: patternCell,

    useNativeListener: true,
    preventDefault: true,

    updates: {
        'pattern-width': ['width', 'round'],
        'pattern-height': ['height', 'round'],
        shiftX: ['shiftX', 'round'],
        shiftY: ['shiftY', 'round'],
        skewX: ['skewX', 'float'],
        skewY: ['skewY', 'float'],
        stretchX: ['stretchX', 'float'],
        stretchY: ['stretchY', 'float'],
    },
});

scrawl.observeAndUpdate({

    event: ['change', 'input'],
    origin: '.filterCell',

    target: filterCell,

    useNativeListener: true,
    preventDefault: true,

    updates: {
        'filter-width': ['width', '%'],
        'filter-height': ['height', '%'],
    },
});

scrawl.observeAndUpdate({

    event: ['change', 'input'],
    origin: '.filterBlock',

    target: filterBlock,

    useNativeListener: true,
    preventDefault: true,

    updates: {
        patternGradient: ['fillStyle', 'raw'],
    },
});

scrawl.addNativeListener(['change', 'input'], (e) => {

    const t = e.target,
        value = t.value;

    switch (t.id) {

        case 'filter-offset-x' :
            fOffsetX = parseInt(value, 10);
            break;

        case 'filter-offset-y' :
            fOffsetY = parseInt(value, 10);
            break;

        case 'filter-scale-x' :
            fDisplaceX = parseInt(value, 10);
            break;

        case 'filter-scale-y' :
            fDisplaceY = parseInt(value, 10);
            break;

        case 'opacity' :
            fOpacity = parseFloat(value);
            break;

        case 'blend' :
            fBlend = value;
            break;
    }
    updateFilters();

}, '.filterObject');

scrawl.addNativeListener(['change', 'input'], (e) => {

    const t = e.target,
        value = t.value;

    updateGradients({
        easing: value,
    });

}, '.gradient');

scrawl.addNativeListener(['change', 'input'], (e) => {

    const t = e.target,
        value = t.value;

    switch (value) {

        case 'glass-bars' :
            fOffsetX = 0;
            fOffsetY = 0;
            fOpacity = 1;
            fBlend = 'multiply';
            fDisplaceX = 10;
            fDisplaceY = 10;

            patternCell.set({
                width: 80,
                height: 80,
                shiftX: 0,
                shiftY: 0,
                skewX: 0,
                skewY: 0,
                stretchX: 1,
                stretchY: 1,
            });

            filterBlock.set({
                fillStyle: 'bar-cell-gradient',
            });

            skewX.value = 0;

            skewY.value = 0;

            stretchX.value = 1;

            stretchY.value = 1;

            shiftX.value = 0;

            shiftY.value = 0;

            filterBlend.value = 'multiply';

            patternGradient.value = 'bar-cell-gradient';

            patternWidth.value = 80;

            patternHeight.value = 80;

            break;

        case 'displace-bars' :
            fOffsetX = 0;
            fOffsetY = 0;
            fOpacity = 1;
            fBlend = 'multiply';
            fDisplaceX = 10;
            fDisplaceY = 10;

            patternCell.set({
                width: 80,
                height: 80,
                shiftX: 0,
                shiftY: 0,
                skewX: 0,
                skewY: 0,
                stretchX: 1,
                stretchY: 1,
            });

            filterBlock.set({
                fillStyle: 'ring-cell-gradient',
            });

            skewX.value = 0;

            skewY.value = 0;

            stretchX.value = 1;

            stretchY.value = 1;

            shiftX.value = 0;

            shiftY.value = 0;

            filterBlend.value = 'multiply';

            patternGradient.value = 'ring-cell-gradient';

            patternWidth.value = 80;

            patternHeight.value = 80;

            break;

        case 'etching' :
            fOffsetX = 0;
            fOffsetY = 0;
            fOpacity = 1;
            fBlend = 'screen';
            fDisplaceX = 10;
            fDisplaceY = 10;

            patternCell.set({
                width: 80,
                height: 80,
                shiftX: 0,
                shiftY: 0,
                skewX: -0.65,
                skewY: -0.31,
                stretchX: 1,
                stretchY: 0.26,
            });

            filterBlock.set({
                fillStyle: 'bar-cell-gradient',
            });

            skewX.value = -0.65;

            skewY.value = -0.31;

            stretchX.value = 1;

            stretchY.value = 0.26;

            shiftX.value = 0;

            shiftY.value = 0;

            filterBlend.value = 'screen';

            patternGradient.value = 'bar-cell-gradient';

            patternWidth.value = 80;

            patternHeight.value = 80;

            break;

        case 'green-monitor' :
            fOffsetX = 0;
            fOffsetY = 0;
            fOpacity = 1;
            fBlend = 'luminosity';
            fDisplaceX = 10;
            fDisplaceY = 10;

            patternCell.set({
                width: 80,
                height: 80,
                shiftX: 0,
                shiftY: 0,
                skewX: 1.04,
                skewY: 0.05,
                stretchX: 0.35,
                stretchY: 0,
            });

            filterBlock.set({
                fillStyle: 'bar-cell-gradient',
            });

            skewX.value = 1.04;

            skewY.value = 0.05;

            stretchX.value = 0.35;

            stretchY.value = 0;

            shiftX.value = 0;

            shiftY.value = 0;

            filterBlend.value = 'luminosity';

            patternGradient.value = 'bar-cell-gradient';

            patternWidth.value = 80;

            patternHeight.value = 80;

            break;
    }

    filterCell.set({
        width: '100%',
        height: '100%',
    });

    updateFilters();

    updateGradients({
        easing: 'linear',
    });

    opacity.value = 1;

    filterWidth.value = 100;

    filterHeight.value = 100;

    filterOffsetX.value = 0;

    filterOffsetY.value = 0;

    filterScaleX.value = 10;

    filterScaleY.value = 10;

    easing.value = 'linear';

    target.clearFilters().addFilters(value);

}, '.filterEffect');

const opacity = document.querySelector('#opacity');
const skewX = document.querySelector('#skewX');
const skewY = document.querySelector('#skewY');
const stretchX = document.querySelector('#stretchX');
const stretchY = document.querySelector('#stretchY');
const shiftX = document.querySelector('#shiftX');
const shiftY = document.querySelector('#shiftY');
const patternWidth = document.querySelector('#pattern-width');
const patternHeight = document.querySelector('#pattern-height');
const filterWidth = document.querySelector('#filter-width');
const filterHeight = document.querySelector('#filter-height');
const filterOffsetX = document.querySelector('#filter-offset-x');
const filterOffsetY = document.querySelector('#filter-offset-y');
const filterScaleX = document.querySelector('#filter-scale-x');
const filterScaleY = document.querySelector('#filter-scale-y');
const filterBlend = document.querySelector('#blend');
const patternGradient = document.querySelector('#patternGradient');
const easing = document.querySelector('#easing');

opacity.value = 1;

skewX.value = 0;

skewY.value = 0;

stretchX.value = 1;

stretchY.value = 1;

shiftX.value = 0;

shiftY.value = 0;

patternWidth.value = 80;

patternHeight.value = 80;

filterWidth.value = 100;

filterHeight.value = 100;

filterOffsetX.value = 0;

filterOffsetY.value = 0;

filterScaleX.value = 10;

filterScaleY.value = 10;

filterBlend.value = 'multiply';

patternGradient.value = 'bar-cell-gradient';

easing.value = 'linear';

document.querySelector('#filterEffect').value = 'glass-bars';

console.log(scrawl.library);