Pop On Chain #50

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Pop On Chain by SMLDMS</title>

    <script id="snippet-random-code" type="text/javascript">

        // DO NOT EDIT THIS SECTION

        let seed = window.location.href.split('/').find(t => t.includes('i0'));

        if (seed == null) {
            const alphabet = "0123456789abcdefghijklmnopqrstuvwsyz";
            seed = new URLSearchParams(window.location.search).get("seed") || Array(64).fill(0).map(_ => alphabet[(mathRand() * alphabet.length) | 0]).join('') + "i0";
        } else {
            let pattern = "seed=";
            for (let i = 0; i < seed.length - pattern.length; ++i) {
                if (seed.substring(i, i + pattern.length) == pattern) {
                    seed = seed.substring(i + pattern.length);
                    break;
                }
            }
        }

        function cyrb128($) {
            let _ = 1779033703, u = 3144134277, i = 1013904242, l = 2773480762;
            for (let n = 0, r; n < $.length; n++) _ = u ^ Math.imul(_ ^ (r = $.charCodeAt(n)), 597399067), u = i ^ Math.imul(u ^ r, 2869860233), i = l ^ Math.imul(i ^ r, 951274213), l = _ ^ Math.imul(l ^ r, 2716044179);
            return _ = Math.imul(i ^ _ >>> 18, 597399067), u = Math.imul(l ^ u >>> 22, 2869860233), i = Math.imul(_ ^ i >>> 17, 951274213), l = Math.imul(u ^ l >>> 19, 2716044179), [(_ ^ u ^ i ^ l) >>> 0, (u ^ _) >>> 0, (i ^ _) >>> 0, (l ^ _) >>> 0]
        }

        function sfc32($, _, u, i) {
            return function () {
                u >>>= 0, i >>>= 0;
                var l = ($ >>>= 0) + (_ >>>= 0) | 0;
                return $ = _ ^ _ >>> 9, _ = u + (u << 3) | 0, u = (u = u << 21 | u >>> 11) + (l = l + (i = i + 1 | 0) | 0) | 0, (l >>> 0) / 4294967296
            }
        }

        let mathRand = sfc32(...cyrb128(seed));

    </script>
    <style>
        html,
        body {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            color: rgb(255, 255, 255);
            background-color: rgb(0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
            font-size: 0.8em;
        }

        canvas {
            object-fit: contain;
            max-height: 100%;
            max-width: 100%;
        }

        #fullScreen {
            display: flex;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            justify-content: center;
            align-items: center;
        }

        #fullScreen canvas {
            object-fit: contain;
            max-height: 100%;
            max-width: 100%;
        }

        #progress {
            /* mix-blend-mode: soft-light; */
            color: rgb(255);
            opacity: 0.75;
            width: auto;
            height: auto;
            position: fixed;
            text-align: center;
            justify-content: center;
            align-items: center;
            padding: 10%;
        }

        #progress h1 {
            font-size: 10.75em;
            /* display: block; */
            margin: 0%;
            padding: 0%
        }
    </style>
</head>

<body>
    <canvas id="cnv"></canvas>
    <div id="fullScreen">
        <div id="progress"></div>
    </div>
</body>



<script type="text/javascript">


    const myTitle = "Pop On Chain";
    const canvas = document.getElementById("cnv");
    const ctx = cnv.getContext('2d');

    let ratio = 1.414142
    let format = {
        n: mathRand(),
        ww: 1,
        hh: 1,
        name: ''
    }

    if (format.n < 0.33) {
        format.ww = ratio
        format.hh = 1
        format.name = "Landscape"

    } else if (format.n < 0.66) {
        format.ww = 1
        format.hh = ratio
        format.name = "Portrait"

    } else {
        format.ww = 1
        format.hh = 1
        format.name = "Square"
    }
    const mySize = 1000;
    cnv.width = mySize * format.ww;
    cnv.height = mySize * format.hh;

    const scales = [25, 50, 100];
    const randomIndex = Math.floor(mathRand() * scales.length);
    const scl = scales[randomIndex];
    const marges = [200, 100, 50];
    const randomMarge = Math.floor(mathRand() * marges.length);
    const marge = marges[randomMarge];
    const maxT = Math.round(mathRand() * 50 + 10);

    /////FEATURES

    let clr = {
        n: mathRand(),
        name: "",
        val: 0,
    }

    let mode = {
        n: mathRand(),
        name: "",
        val: 100,
    }

    let layer = {
        n: mathRand(),
        name: "",
    }

    if (layer.n < 0.5) {
        layer.name = "On"
    }
    else {
        layer.name = "Off"
    }


    if (clr.n < 0.25) {
        clr.name = "White"
    }
    else if (clr.n < 0.5) {
        clr.name = "Red"
    }
    else {
        clr.name = "Black"
    }

    if (mode.n < 0.25) {
        mode.name = "C"
        mode.val = 100
    }
    else if (mode.n < 0.5) {
        mode.name = "B"
        mode.val = 25
    }
    else {
        mode.name = "A"
        mode.val = 0
    }

    window.$generativeTraits = {
        "Format": format.name,
        "Color Base": clr.name,
        "Back layer": layer.name,
        "Mode": mode.name,
        "Scale": scl,
        "Model": maxT,
        "Marge": marge,
    }

    //////////////////////
    console.log(myTitle + " | smldms 2023.03")
    console.log(window.$generativeTraits)

    const r = cnv.height / scl;
    const c = cnv.width / scl
    ctx.fillStyle = clr.name;
    ctx.rect(0, 0, cnv.width, cnv.height)
    ctx.fill();
    ctx.save()
    frame()
    if (layer.name == "On") {
        halo();
    }
    show();
    addGrain(cnv, 25)

    function frame() {
        // ctx.filter = "blur(5px)";
        ctx.restore()
        ctx.fillStyle = clr.name;
        ctx.strokeStyle = 'hsl(' + 360 * mathRand() + ',100%,50%)';
        ctx.lineWidth = 100;
        ctx.rect(0, 0, cnv.width, cnv.height)
        ctx.stroke();

    }

    function halo() {
        ctx.restore()
        ctx.translate(c / 2, r / 2)
        ctx.filter = 'blur(' + mode.val + 'px)';
        for (let x = marge; x < cnv.width - marge / 2; x += 50) {
            for (let y = marge; y < cnv.height - marge / 2; y += 50) {
                let clrF = 'hsl(' + 360 * mathRand() + ',100%,50%)';
                ctx.fillStyle = clrF;
                ctx.strokeStyle = clr.name;
                ctx.lineWidth = mathRand() * 5 + 1;
                ctx.beginPath()
                if (mathRand() < 0.25) {
                    ctx.arc(x, y, r * 2, 0, Math.PI)
                }
                else if (mathRand() < 0.5) {
                    ctx.arc(x, y, r * 2, Math.PI, 0)
                }
                else if (mathRand() < 0.75) {

                    for (let i = 2; i < 100; i += 1) {
                        if (mathRand() < 0.25) {
                            ctx.arc(x + i, y, r / i, 0, Math.PI * 2)
                        }
                        else if (mathRand() < 0.5) {
                            ctx.arc(x, y + i, r / i, 0, Math.PI * 2)
                        }
                        else if (mathRand() < 0.75) {
                            ctx.arc(x, y - i, r / i, 0, Math.PI * 2)
                        }
                        else {
                            ctx.arc(x - i, y, r / i, 0, Math.PI * 2)
                        }
                    }
                }
                else {
                }
                ctx.closePath();
                ctx.stroke()
                ctx.fill();
            }
        }
    }
    function show() {
        ctx.restore()
        for (let x = marge; x < cnv.width - marge; x += r) {
            for (let y = marge; y < cnv.height - marge; y += c) {
                ctx.filter = "blur(0px) contrast(1.4) drop-shadow(0px 9px 5px #000) ";

                ctx.fillStyle = clr.name;
                ctx.strokeStyle = 'hsl(' + 360 * mathRand() + ',100%,50%)';
                ctx.lineWidth = mathRand() * 2 + 1;
                ctx.beginPath()
                if (mathRand() < 0.25) {
                    ctx.arc(x, y, r / 2, 0, Math.PI)
                }
                else if (mathRand() < 0.5) {
                    ctx.arc(x, y, r / 2, Math.PI, 0)
                }
                else if (mathRand() < 0.75) {

                    for (let i = 2; i < maxT; i += 1) {
                        if (mathRand() < 0.25) {
                            ctx.arc(x + i, y, r / i, 0, Math.PI * 2)
                        }
                        else if (mathRand() < 0.5) {
                            ctx.arc(x, y + i, r / i, 0, Math.PI * 2)
                        }
                        else if (mathRand() < 0.75) {
                            ctx.arc(x, y - i, r / i, 0, Math.PI * 2)
                        }
                        else {
                            ctx.arc(x - i, y, r / i, 0, Math.PI * 2)
                        }
                    }
                }
                else {
                }
                ctx.closePath();
                ctx.stroke()
                ctx.fill();
            }
        }
    }

    function addGrain(canvas, graininess) {
        const ctx = canvas.getContext('2d');
        const width = canvas.width;
        const height = canvas.height;
        const pixels = ctx.getImageData(0, 0, width, height);

        for (let i = 0; i < pixels.data.length; i += 4) {
            const r = pixels.data[i];
            const g = pixels.data[i + 1];
            const b = pixels.data[i + 2];
            const alpha = pixels.data[i + 3];
            const random = mathRand();
            const offset = (random - 0.5) * graininess;

            pixels.data[i] = Math.max(0, Math.min(255, r + offset));
            pixels.data[i + 1] = Math.max(0, Math.min(255, g + offset));
            pixels.data[i + 2] = Math.max(0, Math.min(255, b + offset));
            pixels.data[i + 3] = alpha;
        }

        ctx.putImageData(pixels, 0, 0);
    }

    function saveCanvasAsPNG(canvas) {
        document.addEventListener('keydown', function (event) {
            if (event.key === 's' || event.key === 'S' || event.key === 'd' || event.key === 'D') {
                const ctx = canvas.getContext('2d');
                const width = canvas.width;
                const height = canvas.height;
                const pixelRatio = (event.key === 'd' || event.key === 'D') ? window.devicePixelRatio * 8 : window.devicePixelRatio;
                const canvasCopy = document.createElement('canvas');
                canvasCopy.width = width * pixelRatio;
                canvasCopy.height = height * pixelRatio;
                const ctxCopy = canvasCopy.getContext('2d');
                ctxCopy.imageSmoothingEnabled = false;
                ctxCopy.drawImage(canvas, 0, 0, width, height, 0, 0, width * pixelRatio, height * pixelRatio);
                const url = canvasCopy.toDataURL('image/png');
                const link = document.createElement('a');
                link.download = 'canvas.png';
                link.href = url;
                link.click();
            }
        });
    }

    saveCanvasAsPNG(cnv);

    /////////////PROGRESS
    async function progress(message) {
        document.body.style.cursor = 'crosshair';
        document.getElementById("progress").innerHTML = message;
        await new Promise((fn => setTimeout(fn, 1)));
    }

    async function progressClear() {
        document.body.style.cursor = 'default';
        document.getElementById("progress").style.display = 'none';
        await new Promise((fn => setTimeout(fn, 1)));
    }

    async function progressShow() {
        document.body.style.cursor = 'default';
        document.getElementById("progress").style.display = 'block';
        await new Promise((fn => setTimeout(fn, 1)));
    }


</script>

</html>

Pop On Chain #36

Pop On Chain #59

Pop On Chain #58

Action	Price	From	To	Time
TRANSFER	- -	uycy	qpkt	about 1 year
TRANSFER	- -	6h97	uycy	over 1 year
TRANSFER	- -	9zkz	6h97	over 1 year
INSCRIBED	- -	-	9zkz	over 1 year

Inscription #396413

More from this Collection