☰

Drawaria Script v3 AutoIt Example

Port of Drawing_Script.au3 with a graphical interface, using a simulated mouse and real colors

// ==UserScript==
// @name         Drawaria Script v3 AutoIt Example
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Port of Drawing_Script.au3 with a graphical interface, using a simulated mouse and real colors
// @author       YouTubeDrawaria
// @match        https://drawaria.online/*
// @license MIT
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // Add styles for the interface
    GM_addStyle(`
        #drawingInterface {
            position: fixed;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 1000;
        }
        #drawingInterface input, #drawingInterface button {
            display: block;
            margin: 5px 0;
        }
        #imagePreview {
            max-width: 100px;
            max-height: 100px;
            margin-top: 10px;
        }
    `);

    // Create the interface
    const interfaceHTML = `
        <div id="drawingInterface">
            <h3>Drawing Script v3 AutoIt Example</h3>
            <label for="imageUpload">Upload Image:</label>
            <input type="file" id="imageUpload" accept="image/*">
            <img id="imagePreview" src="#" alt="Image Preview" style="display:none;">
            <button id="resetImage">Reset Image</button>
            <label for="width">Width (px):</label>
            <input type="number" id="width" value="100">
            <label for="height">Height (px):</label>
            <input type="number" id="height" value="100">
            <label for="speed">Mouse speed (0~100):</label>
            <input type="number" id="speed" value="1">
            <button id="startDrawing">Start Drawing</button>
            <button id="pauseDrawing">Pause Drawing</button>
            <button id="newDrawing">New Drawing</button>
            <button id="deleteDraw">Delete All</button>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', interfaceHTML);

    // Add event listeners for the buttons and file input
    document.getElementById('imageUpload').addEventListener('change', handleImageUpload);
    document.getElementById('startDrawing').addEventListener('click', startDrawing);
    document.getElementById('pauseDrawing').addEventListener('click', pauseDrawing);
    document.getElementById('newDrawing').addEventListener('click', newDrawing);
    document.getElementById('deleteDraw').addEventListener('click', deleteDraw);
    document.getElementById('resetImage').addEventListener('click', resetImage);

    let imageElement = null;

    function handleImageUpload(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imageElement = new Image();
                imageElement.src = e.target.result;
                document.getElementById('imagePreview').src = e.target.result;
                document.getElementById('imagePreview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    }

    function resetImage() {
        imageElement = null;
        document.getElementById('imagePreview').src = '#';
        document.getElementById('imagePreview').style.display = 'none';
        document.getElementById('imageUpload').value = ''; // Clear the file input
    }

    function startDrawing() {
        if (!imageElement) {
            alert('Please upload an image first.');
            return;
        }

        const width = document.getElementById('width').value;
        const height = document.getElementById('height').value;
        const speed = document.getElementById('speed').value;

        const pixels = processImage(imageElement, width, height);
        guideDrawing(pixels, speed);
    }

    function pauseDrawing() {
        // Implement pause logic here
        console.log('Drawing paused');
    }

    function newDrawing() {
        // Implement new drawing logic here
        console.log('Starting new drawing');
    }

    function deleteDraw() {
        // Find and remove all elements that represent the drawing
        const drawingElements = document.querySelectorAll('[data-drawing-element]');
        drawingElements.forEach(element => element.remove());
        console.log('Drawing deleted');
    }

    function processImage(image, width, height) {
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, width, height);

        const imageData = ctx.getImageData(0, 0, width, height);
        const pixels = [];

        for (let y = 0; y < height; y++) {
            pixels[y] = [];
            for (let x = 0; x < width; x++) {
                const index = (y * width + x) * 4;
                const red = imageData.data[index];
                const green = imageData.data[index + 1];
                const blue = imageData.data[index + 2];
                const alpha = imageData.data[index + 3];

                // Store the color as an RGB string
                if (alpha > 0) { // Ignore fully transparent pixels
                    pixels[y][x] = `rgb(${red}, ${green}, ${blue})`;
                } else {
                    pixels[y][x] = null; // Transparent pixel
                }
            }
        }

        return pixels;
    }

    function guideDrawing(pixels, speed) {
        const centerX = window.innerWidth / 2;
        const centerY = window.innerHeight / 2;
        const width = pixels[0].length;
        const height = pixels.length;

        const startX = centerX - (width / 2);
        const startY = centerY - (height / 2);

        let currentX = startX;
        let currentY = startY;

        const drawStep = () => {
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    const color = pixels[y][x];
                    if (color) {
                        const targetX = startX + x;
                        const targetY = startY + y;

                        // Show visual cue for the user to move the mouse
                        const cue = document.createElement('div');
                        cue.style.position = 'absolute';
                        cue.style.left = `${targetX}px`;
                        cue.style.top = `${targetY}px`;
                        cue.style.width = '5px';
                        cue.style.height = '5px';
                        cue.style.backgroundColor = color;
                        cue.style.zIndex = '1000';
                        cue.setAttribute('data-drawing-element', 'true'); // Mark as drawing element
                        document.body.appendChild(cue);

                        // Wait for the user to move the mouse to the target position
                        const waitForMouseMove = new Promise(resolve => {
                            const checkPosition = () => {
                                const mouseX = window.event.clientX;
                                const mouseY = window.event.clientY;
                                if (Math.abs(mouseX - targetX) < 5 && Math.abs(mouseY - targetY) < 5) {
                                    document.removeEventListener('mousemove', checkPosition);
                                    resolve();
                                }
                            };
                            document.addEventListener('mousemove', checkPosition);
                        });

                        waitForMouseMove.then(() => {
                            cue.remove();
                            simulateMouseClick();
                        });
                    }
                }
            }
        };

        drawStep();
    }

    function simulateMouseClick() {
        const event = new MouseEvent('mousedown', {
            view: window,
            bubbles: true,
            cancelable: true,
            button: 0 // Left click
        });
        document.dispatchEvent(event);
    }
})();