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);
}
})();