index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bad Apple!! JS</title>
    <style>
        body {
            background: rgb(73, 73, 73);
            color: white;
            font-family: monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
        }
        textarea{
            background: black;
            color: white;
            font-size: 100%;
            text-align: center;
            border: none;
            resize: none;
            outline: none;
            overflow: hidden;
            white-space: pre;
            overflow-y: hidden;
            overflow-x: hidden;
            border-radius: 10px;
            padding: 5px;
            margin: 5px;
            user-select: none;
            cursor: text;
            user-select: none;
        }
        #screen {
            -webkit-box-shadow: 0px 0px 140px 79px rgba(255, 255, 255, 0.3);
            -moz-box-shadow: 0px 0px 140px 79px rgba(255, 255, 255, 0.3);
            box-shadow: 0px 0px 140px 79px rgba(255, 255, 255, 0.3);
        }

        #render{display: none}

        #ctrl {
            position: absolute;
            display: flex;
            vertical-align: middle;
            align-items: center;
            display: none;
            background-color: #000;
            padding: 5px;
            text-align: center;
            padding-top: 10px;
        }

        button {
            font-family: monospace;
            background: #000;
            color: #fff;
            border-style: solid;
            border-color: #fff;
            cursor: pointer;
            padding: 3px;

        }

        button:hover,
        ::selection {
            background: rgb(88, 143, 6);
        }

        img {
            user-select: none;
            border-radius: 10px;
            position: absolute;
            top: 0;
            left: 0;
            width: 5%;
            margin: 5px;
        }
    </style>
</head>

<body>
    <a href="https://wojtekgame.is-a.dev"><img src="img.png" /></a>
    <video id="video" src="bad_apple.mp4" type="video/mp4" style="display:none"></video>
    <div id="ctrl">
        <button id="copy">Copy JS</button>
        <button id="player">Play</button>
        <br />
        <input type="checkbox" id="jsdoc">JSDoc comments<br/>
        <input type="checkbox" id="semi">Semicolon as black color<br/>
        <textarea id="info" readonly></textarea>
    </div>
    <textarea id="screen" readonly></textarea><br /><br />
    <canvas id="render"></canvas>
    <script>
        let gEBI = (a) => { return document.getElementById(a) }
        const video = gEBI('video');
        const screen = gEBI('screen');
        const copy = gEBI('copy');
        const canvas = gEBI('render');
        const ctrl = gEBI('ctrl');
        const info = gEBI('info');
        const ctx = canvas.getContext('2d', { willReadFrequently: false });
        video.crossOrigin = "Anonymous";
        screen.value = "loading";
        const stateCheck = setInterval(() => {
            if (document.readyState === 'complete') {
                screen.value = "\n\n\nMade by WojtekGame, 2024\n\nI made this project for fun :D\n\nalso, the JS code from the frames DOES work on an HTML page. (tested)\n\nyou will see a bit of flashing code so,\n\ni'm sorry for those who have photosensitive epilepsy";
                document.addEventListener('click', () => play(), { once: true });
                clearInterval(stateCheck);
            }
        }, 100);
        screen.style = "height: 525px; width: 691px;";
        let mediaRecorder;
        let recordedChunks = [];
        let videoWidth, videoHeight;
        let usedNames = [];
        let nl = 0;
        let cursorleft = 0;
        let usedC=0;
        function play() {
            video.play();
            
            player.innerText = "Pause";
            function exec() {
                if (!video.paused && !video.ended) {
                    processFrame();
                    screen.style.height = "1px";
                    screen.style.height = (screen.scrollHeight - 25) + "px";
                    screen.style.width = "1px";
                    screen.style.width = (screen.scrollWidth) + "px";
                }
                else if (video.ended){f=0;video.play();}
                ctrl.style.display = (cursorleft == 0) ? "block" : "none"
                window.requestAnimationFrame(exec);
            }
            requestAnimationFrame(exec);
        }
        ctrl.addEventListener("mousemove", () => { cursorleft = 0 })
        screen.addEventListener("mouseenter", () => { cursorleft = 0 })
        screen.addEventListener("mouseleave", () => { cursorleft = 1 })
        screen.addEventListener("mousemove", () => { cursorleft = 0 })
        copy.addEventListener('click', () => {
            if (!video.ended) navigator.clipboard.writeText(screen.value)
        });
        let player = document.getElementById('player');
        player.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                player.innerText = "Pause";
            } else {
                video.pause();
                player.innerText = "Play";
            }
        }, false);
        video.addEventListener('loadedmetadata', () => {
            videoWidth = Math.floor(video.videoWidth / 5);
            videoHeight = Math.floor((video.videoHeight / 5) - 3);
            screen.style.width = videoWidth;
            screen.style.height = videoHeight * 2;
            canvas.width = videoWidth;
            canvas.height = videoHeight;
        });
        let asciiArt = '';
        let jsSnippets = [
            'const [r]="[a]".repeat([i]);alert([a]);',
            'let [r]="[a]".repeat([i]);alert([a]);',
            'const [r]="[a]".repeat([i]);console.log([a]);',
            'let [r]="[a]".repeat([i]);console.log([a]);',
            'function [r](){return Math.floor(Math.random()*[i])+Math.floor(Math.random()*[i])};alert([a]())_',
            'function [r](){return Math.floor(Math.random()*[i])+Math.floor(Math.random()*[i])};console.log([a]())_',
            'const [r]=()=>{return Math.floor(Math.random()*[i])+Math.floor(Math.random()*[i])};alert([a]())_',
            'const [r]=()=>{return Math.floor(Math.random()*[i])+Math.floor(Math.random()*[i])};console.log([a]())_',
            'let [r]=()=>{return Math.floor(Math.random()*[i])+Math.floor(Math.random()*[i])};alert([a]())_',
            'let [r]=()=>{return Math.floor(Math.random()*[i])+Math.floor(Math.random()*[i])};console.log([a]())_',
            'function [r](){return Math.floor(Math.random()*[i])};alert([a]())_',
            'function [r](){return Math.floor(Math.random()*[i])};console.log([a]())_',
            'const [r]=()=>{return Math.floor(Math.random()*[i])};alert([a]())_',
            'const [r]=()=>{return Math.floor(Math.random()*[i])};console.log([a]())_',
            'let [r]=()=>{return Math.floor(Math.random()*[i])};alert([a]())_',
            'let [r]=()=>{return Math.floor(Math.random()*[i])};console.log([a]())_',
            'function [r](){return Math.random()};alert([a]())_',
            'function [r](){return Math.random()};console.log([a]())_',
            'const [r]=()=>{return Math.random()};alert([a]())_',
            'const [r]=()=>{return Math.random()};console.log([a]())_',
            'let [r]=()=>{return Math.random()};alert([a]())_',
            'let [r]=()=>{return Math.random()};console.log([a]())_',
            'function [r](){return"[a]"};console.log([a]())_',
            'function [r](){return"[a]"};alert([a]())_',
            'const [r]=()=>{return"[a]"};alert([a]())_',
            'const [r]=()=>{return"[a]"};console.log([a]())_',
            'let [r]=()=>{return"[a]"};console.log([a]())_',
            'const [r]=()=>{return"[a]"}_',
            'const [r]=()=>{return}_',
            'const [r]=["[r]","[a]","[r]","[a]"]_',
            'const [r]=["[r]","[a]","[r]"]_',
            'const [r]=["[r]","[r]"]_',
            'const [r]=["[r]","[a]","[r]","[a]"]_',
            'const [r]=["[r]","[a]","[r]"]_',
            'const [r]=["[r]","[r]"]_',
            'const [r]=["[a]"]_',
            'const [r]={}_',
            'const [r]=[]_',
            'const [r]=""_',
            'const [r]=[i]_',
            'let [r]=()=>{return"[a]"}_',
            'let [r]=()=>{return}_',
            'let [r]=["[r]","[a]","[r]","[a]"]_',
            'let [r]=["[r]","[a]","[r]"]_',
            'let [r]=["[r]","[r]"]_',
            'let [r]=["[a]"]_',
            'let [r]=[]_',
            'let [r]={}_',
            'let [r]=""_',
            'let [r]=[i]_',
            'console.log("[r]")_',
            'alert("[r]")_',
            'navigator.clipboard_',
            'document.body_',
            'document.body.style_',
            'document.body_',
            'navigator_',
            'document_',
            'console_',
            '[i][i]_',
            '[i]_',
        ];

        function processFrame() {
            if (Math.random() > 0) jsSnippets = jsSnippets.sort((a, b) => b.length - a.length);
            else jsSnippets = jsSnippets.sort((a, b) => a.length - b.length);
            ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
            const frameData = ctx.getImageData(0, 0, videoWidth, videoHeight);
            const asciiArt = convertToASCII(frameData);
            screen.value = asciiArt;
        }


        function replaceSpacesWithJSDoc(spaces) {
            if (spaces.length <= 4) return spaces;
            return '/*' + ' '.repeat(spaces.length - 4) + '*/';
        }

        function n() {
            const chars = "qwertyuiopasfgghjklzxcvbnmQWERTYUIOPASFGHJKLZXCVBNM";
            let name = '';
            for (let i = 0; i < 3; i++)
                name += chars[Math.floor(Math.random() * chars.length)];

            //name = chars[Math.floor(Math.random() * chars.length)];
            //name += chars[Math.floor(Math.random() * chars.length)];
            //if (asciiArt.includes(name)) asciiArt.replaceAll(name, n);
            usedNames.push(name)
            if (usedNames.includes(name)) asciiArt.replaceAll(name, n); //prevents from making duplicated
            usedC++;
            return name;
        }

        function add() {
            const l = ["canvas", "video", "h1", "h2", "textarea", "h3", "p", "svg", "i", "b", "div", "button"];
            for (let i = 0; i < l.length; i++) {
                jsSnippets.push('const [r]=document.createElement("' + l[i] + '")_');
                jsSnippets.push('let [r]=document.createElement("' + l[i] + '")_');
            }
        }
        add();
        function convertToJS(asciiLine) {
            let st = asciiLine;
            const str=(a,b)=>{st=st.replace(a,b)}
            function fE(hS) {
                jsSnippets.forEach(snippet => {
                    const snippetLength = snippet.length;
                    const hashSequence = hS.repeat(snippetLength);
                    const regex = new RegExp(hashSequence, 'g');
                    str(regex, snippet);
                    if (Math.floor(Math.random() * 2) == 1) st.replaceAll("[r]", "[r][r]")
                    if (Math.floor(Math.random() * 5) == 1) st.replaceAll("let [r]", "let [r],[r]")
                    str(/\[r\]/g, n);
                    str(/\[a\]/g, usedNames[usedNames.length - 1]);
                    str(/\[r\]/g + "()", usedNames[1 - usedNames.length] + "()");
                    str(/\[i\]/g, 100 + Math.floor(Math.random() * 800));
                });
            }

            fE('#')
            str(/#/g, ';');
            fE(';')
            st = st.replaceAll("_", ";");
            str("; ", ";");
            str("*/ ", "*/");
            if (gEBI("jsdoc").checked && !gEBI("jsdoc").disabled) str(/\s+/g, replaceSpacesWithJSDoc);
            if (gEBI("semi").checked) {
                gEBI("jsdoc").disabled = true;
                st = st.replaceAll(" ", ";");
            } else {
                gEBI("jsdoc").disabled = false;
            }
            
            usedNames = [];
            return st;
        }

        function convertToASCII(imageData) {
            asciiArt = '';
            const { data, width, height } = imageData;
            let asciiLine = '';

            const asciiChars = " #";
            for (let y = 0; y < height; y += 2) {
                for (let x = 0; x < width; x++) {
                    const offset = (y * width + x) * 4;
                    const rgb = [data[offset], data[offset + 1], data[offset + 2]];
                    const brightness = (rgb[0] + rgb[1] + rgb[2]) / 3;
                    const charIndex = Math.floor((brightness / 255) * (asciiChars.length - 1));
                    asciiLine += asciiChars[charIndex];
                }
                asciiArt += convertToJS(asciiLine) + '\n';
                asciiLine = '';
            }
            info.value="random str:"+usedC+"\nframe:"+video.getVideoPlaybackQuality().totalVideoFrames;
            usedC=0;
            return asciiArt;
        }
    </script>
</body>

</html>