9w9's Helper

Working Omoggle renderer + fixed GUI spawning

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         9w9's Helper
// @namespace    http://tampermonkey.net/
// @version      4.1
// @description  Working Omoggle renderer + fixed GUI spawning
// @license      9w9
// @author       ChatGPT
// @match        *://omoggle.com/*
// @match        *://*.omoggle.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict';

    if (window.__goldenRatioLoaded) return;
    window.__goldenRatioLoaded = true;

    let active = false;
    let jitterAmount = 0.15;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = 640;
    canvas.height = 480;

    const faceConfig = {
        eyeTilt: 20,
        eyeWidth: 26,
        eyeHeight: 8,
        eyeSpacing: 52,
        faceWidth: 85,
        faceHeight: 620,
        jawWidth: 74,
        jawDepth: 214,
        mouthY: 44,
        philtrumY: 16,
        headX: 0,
        headY: 0,
        rotateZ: 0,
        rotateX: 0,
        rotateY: 0,
    };

    function rotatePoint3D(x, y, z, rx, ry, rz) {

        let x1 = x * Math.cos(rz) - y * Math.sin(rz);
        let y1 = x * Math.sin(rz) + y * Math.cos(rz);
        let z1 = z;

        let y2 = y1 * Math.cos(rx) - z1 * Math.sin(rx);
        let z2 = y1 * Math.sin(rx) + z1 * Math.cos(rx);

        let x2 = x1;

        let x3 = x2 * Math.cos(ry) + z2 * Math.sin(ry);
        let z3 = -x2 * Math.sin(ry) + z2 * Math.cos(ry);

        return {
            x: x3,
            y: y2,
            z: z3
        };
    }

    function project(x, y, z, focalLen = 600) {

        const scale = focalLen / (focalLen + z);

        return {
            x: x * scale,
            y: y * scale,
            scale
        };
    }

    function renderFace(targetCtx, W, H, config, jitter) {

        targetCtx.clearRect(0, 0, W, H);

        targetCtx.fillStyle = "#000";
        targetCtx.fillRect(0, 0, W, H);

        const t = Date.now() * 0.015;

        const jx = Math.sin(t) * jitter;
        const jy = Math.cos(t * 1.1) * (jitter * 0.67);

        const drawScale = Math.min(W / 640, H / 480);

        const baseCX = 320 + config.headX * 80 + jx;
        const baseCY = 212 + config.headY * 80 + jy;

        const rx = config.rotateX * Math.PI / 180;
        const ry = config.rotateY * Math.PI / 180;
        const rz = config.rotateZ * Math.PI / 180;

        function tp(dx, dy, dz = 0) {

            const r = rotatePoint3D(dx, dy, dz, rx, ry, rz);
            const p = project(r.x, r.y, r.z);

            return {
                x: baseCX + p.x,
                y: baseCY + p.y,
                s: p.scale
            };
        }

        targetCtx.save();

        targetCtx.translate(W / 2, H / 2);
        targetCtx.scale(drawScale, drawScale);
        targetCtx.translate(-320, -240);

        targetCtx.beginPath();

        const steps = 48;

        for (let i = 0; i <= steps; i++) {

            const a = (i / steps) * Math.PI * 2;

            const p = tp(
                Math.cos(a) * config.faceWidth,
                Math.sin(a) * config.faceHeight + 12
            );

            if (i === 0) {
                targetCtx.moveTo(p.x, p.y);
            } else {
                targetCtx.lineTo(p.x, p.y);
            }
        }

        targetCtx.closePath();

        const g = targetCtx.createRadialGradient(
            baseCX,
            baseCY,
            20,
            baseCX,
            baseCY,
            170
        );

        g.addColorStop(0, "#c4a484");
        g.addColorStop(0.75, "#2a1b10");
        g.addColorStop(1, "#000");

        targetCtx.fillStyle = g;
        targetCtx.fill();

        [-1, 1].forEach(side => {

            const ep = tp(config.eyeSpacing * side, -16);

            targetCtx.save();

            targetCtx.translate(ep.x, ep.y);

            targetCtx.rotate(
                (side * config.eyeTilt + ry * 15 * side) * Math.PI / 180
            );

            targetCtx.scale(ep.s, ep.s);

            targetCtx.fillStyle = "black";

            targetCtx.fillRect(
                -config.eyeWidth / 2,
                -config.eyeHeight / 2,
                config.eyeWidth,
                config.eyeHeight
            );

            targetCtx.restore();
        });

        const pp = tp(0, config.philtrumY);

        targetCtx.fillStyle = "black";

        targetCtx.beginPath();
        targetCtx.arc(pp.x, pp.y, 8 * pp.s, 0, Math.PI * 2);
        targetCtx.fill();

        const mL = tp(-28, config.mouthY);
        const mR = tp(28, config.mouthY);
        const mC = tp(0, config.mouthY - 3);

        targetCtx.strokeStyle = "black";
        targetCtx.lineWidth = 6;

        targetCtx.beginPath();
        targetCtx.moveTo(mL.x, mL.y);
        targetCtx.quadraticCurveTo(mC.x, mC.y, mR.x, mR.y);
        targetCtx.stroke();

        const jL = tp(-config.jawWidth, config.mouthY);
        const jR = tp(config.jawWidth, config.mouthY);

        const jCL = tp(-22, config.jawDepth);
        const jCR = tp(22, config.jawDepth);

        targetCtx.lineWidth = 14;
        targetCtx.strokeStyle = "black";
        targetCtx.lineJoin = "round";

        targetCtx.beginPath();
        targetCtx.moveTo(jL.x, jL.y);
        targetCtx.lineTo(jCL.x, jCL.y);
        targetCtx.lineTo(jCR.x, jCR.y);
        targetCtx.lineTo(jR.x, jR.y);
        targetCtx.stroke();

        targetCtx.restore();
    }

    function drawPerfectFace() {
        renderFace(ctx, 640, 480, faceConfig, jitterAmount);
    }

    const hook = (proto) => {

        const original = proto.texImage2D;

        proto.texImage2D = function (...args) {

            if (
                active &&
                args[args.length - 1] instanceof HTMLVideoElement
            ) {

                drawPerfectFace();

                return original.apply(this, [
                    args[0],
                    args[1],
                    args[2],
                    args[3],
                    args[4],
                    canvas
                ]);
            }

            return original.apply(this, args);
        };
    };

    if (window.WebGLRenderingContext) {
        hook(window.WebGLRenderingContext.prototype);
    }

    if (window.WebGL2RenderingContext) {
        hook(window.WebGL2RenderingContext.prototype);
    }

    function injectUI() {

        if (document.getElementById('mgr-ui')) return;

        const ui = document.createElement('div');

        ui.id = 'mgr-ui';

        ui.innerHTML = `
            <div id="mgr-window">
                <div id="mgr-header">
                    9w9's Helper
                </div>

                <div class="mgr-section">
                    <button id="mgr-toggle">
                        Activate
                    </button>
                </div>

                <div class="mgr-section">
                    <label>Jitter</label>
                    <input
                        type="range"
                        id="mgr-jitter"
                        min="0"
                        max="2"
                        step="0.01"
                        value="0.15"
                    >
                </div>

                <div class="mgr-section">
                    <label>Eye Tilt</label>
                    <input
                        type="range"
                        id="mgr-eyeTilt"
                        min="0"
                        max="40"
                        step="1"
                        value="20"
                    >
                </div>

                <canvas id="mgr-preview"></canvas>
            </div>
        `;

        const style = document.createElement('style');

        style.textContent = `
            #mgr-window {
                position: fixed;
                top: 20px;
                left: 20px;
                width: 260px;
                background: rgba(20,20,20,0.95);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 16px;
                padding: 14px;
                z-index: 999999999;
                color: white;
                font-family: Arial;
                backdrop-filter: blur(12px);
                box-shadow: 0 0 40px rgba(0,0,0,0.5);
            }

            #mgr-header {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 12px;
                color: #ffd700;
                cursor: move;
            }

            .mgr-section {
                margin-bottom: 12px;
            }

            .mgr-section label {
                display: block;
                margin-bottom: 4px;
                font-size: 13px;
            }

            .mgr-section input {
                width: 100%;
            }

            #mgr-toggle {
                width: 100%;
                padding: 10px;
                border: none;
                border-radius: 10px;
                background: #ffd700;
                color: black;
                font-weight: bold;
                cursor: pointer;
            }

            #mgr-preview {
                width: 100%;
                height: 180px;
                background: black;
                border-radius: 12px;
                margin-top: 8px;
            }
        `;

        document.head.appendChild(style);
        document.body.appendChild(ui);

        const preview = document.getElementById('mgr-preview');
        const pctx = preview.getContext('2d');

        preview.width = 320;
        preview.height = 180;

        function previewLoop() {

            drawPerfectFace();

            pctx.clearRect(0, 0, preview.width, preview.height);

            pctx.drawImage(
                canvas,
                0,
                0,
                preview.width,
                preview.height
            );

            requestAnimationFrame(previewLoop);
        }

        previewLoop();

        document.getElementById('mgr-toggle')
            .onclick = () => {

                active = !active;

                document.getElementById('mgr-toggle')
                    .textContent = active
                        ? 'Deactivate'
                        : 'Activate';
            };

        document.getElementById('mgr-jitter')
            .oninput = (e) => {

                jitterAmount = parseFloat(e.target.value);
            };

        document.getElementById('mgr-eyeTilt')
            .oninput = (e) => {

                faceConfig.eyeTilt = parseFloat(e.target.value);
            };

        const windowEl = document.getElementById('mgr-window');
        const header = document.getElementById('mgr-header');

        let dragging = false;
        let ox = 0;
        let oy = 0;

        header.addEventListener('mousedown', (e) => {

            dragging = true;

            ox = e.clientX - windowEl.offsetLeft;
            oy = e.clientY - windowEl.offsetTop;
        });

        document.addEventListener('mousemove', (e) => {

            if (!dragging) return;

            windowEl.style.left = `${e.clientX - ox}px`;
            windowEl.style.top = `${e.clientY - oy}px`;
        });

        document.addEventListener('mouseup', () => {
            dragging = false;
        });
    }

    setInterval(() => {

        if (!document.body) return;

        injectUI();

    }, 1000);

})();