JavaScript - Torn Paper effect

javascript-tornpaper.js

    tornPaper = options => {
        let defaults = {
            selector: null,
            offset: 50,
            stepX: 5,
            stepY: 5,
            extra: null
        };

        const params = Object.assign(defaults, options);
        let elements = document.querySelectorAll(params.selector);
        if (elements.length <= 0) {
            console.error(`selector: ${params.selector} not found`);
            return false;
        }

        elements.forEach(function (currentValue, currentIndex, listObj) {
            // console.log(this); # params.extra

            let width = currentValue.offsetWidth;
            let height = currentValue.offsetHeight;

            let offSet = params.offset
            let lastX = 0;
            let lastY = height - offSet;
            let pointsArray = [];

            pointsArray.push(`0px 0px`);
            pointsArray.push(`0px ${lastY}px`);

            while (lastX < width) {
                let randX = Math.floor(Math.random() * params.stepX) + 3;
                let randY = Math.floor(Math.random() * params.stepY) * (Math.random() < 0.5 ? -1 : 1);

                // fix width
                lastX += randX;
                if (lastX > width) {
                    lastX = width;
                }

                // fix height
                if ((randY + lastY >= height) || (randY + lastY < (height - offSet))) {
                    randY = randY * -1;
                }

                lastY += randY;
                pointsArray.push(`${lastX}px ${lastY}px`);
            }

            pointsArray.push(`${width}px 0px`);
            currentValue.style.clipPath = `polygon(${pointsArray.join(', ')})`;
        }, params.extra);
    };

    // how to use it
    tornPaper({
        selector: '.box'
    });