- // ==UserScript==
- // @name 7Placer+
- // @namespace https://i.imgur.com/n084VLd.png
- // @version 1.5.0a
- // @description Pixel place.io bot - an advanced bot that includes image botting, painting, and account management features. (Border drawing feature added)
- // @author Azti & SamaelWired
- // @match https://pixelplace.io/*
- // @require https://update.gf.qytechs.cn/scripts/498080/1395134/Hacktimer.js
- // @require https://pixelplace.io/js/jquery.min.js?v2=1
- // @require https://pixelplace.io/js/jquery-ui.min.js?v2=1
- // @grant none
- // @run-at document-start
- // ==/UserScript==
-
- (function() {
- "use strict";
-
- /* =======================================================================
- Canvas Worker - Marks ocean areas (approx #CCCCCC) as -1 when scanning canvas
- ========================================================================== */
- const cloadercode = `
- const canvasworkerTimet = performance.now();
- const colors = [
- 0xFFFFFF, 0xC4C4C4, 0xA6A6A6, 0x888888, 0x6F6F6F, 0x555555, 0x3A3A3A, 0x222222,
- 0x000000, 0x003638, 0x006600, 0x477050, 0x1B7400, 0x22B14C, 0x02BE01, 0x51E119,
- 0x94E044, 0x34EB6B, 0x98FB98, 0x75CEA9, 0xCAFF70, 0xFBFF5B, 0xE5D900, 0xFFCC00,
- 0xC1A162, 0xE6BE0C, 0xE59500, 0xFF7000, 0xFF3904, 0xE50000, 0xCE2939, 0xFF416A,
- 0x9F0000, 0x4D082C, 0x6B0000, 0x440414, 0xFF755F, 0xA06A42, 0x633C1F, 0x99530D,
- 0xBB4F00, 0xFFC49F, 0xFFDFCC, 0xFF7EBB, 0xFFA7D1, 0xEC08EC, 0xBB276C, 0xCF6EE4,
- 0x7D26CD, 0x820080, 0x591C91, 0x330077, 0x020763, 0x5100FF, 0x0000EA, 0x044BFF,
- 0x013182, 0x005BA1, 0x6583CF, 0x36BAFF, 0x0083C7, 0x00D3DD, 0x45FFC8, 0xB5E8EE
- ];
- const oceanHex = 0xCCCCCC;
- function isOceanColor(colornum) {
- const r1 = (colornum >> 16) & 0xFF,
- g1 = (colornum >> 8) & 0xFF,
- b1 = colornum & 0xFF;
- const r2 = (oceanHex >> 16) & 0xFF,
- g2 = (oceanHex >> 8) & 0xFF,
- b2 = oceanHex & 0xFF;
- const dr = r1 - r2, dg = g1 - g2, db = b1 - b2;
- // Consider it ocean if the sum of squares of differences is less than 100
- return (dr*dr + dg*dg + db*db) < 100;
- }
- self.addEventListener('message', async (event) => {
- const imageResponse = await fetch('https://pixelplace.io/canvas/' + event.data + '.png?t200000=' + Date.now());
- const imageBlob = await imageResponse.blob();
- const imageBitmap = await createImageBitmap(imageBlob);
- const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
- const ctx = canvas.getContext('2d');
- ctx.drawImage(imageBitmap, 0, 0, imageBitmap.width, imageBitmap.height);
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- const pixelData = imageData.data;
- const CanvasArray = Array.from({ length: canvas.width }, () => Array.from({ length: canvas.height }, () => 50));
- for (let y = 0; y < canvas.height; y++) {
- for (let x = 0; x < canvas.width; x++) {
- const pixelIndex = (y * canvas.width + x) * 4;
- const a = pixelData[pixelIndex + 3];
- if (a < 1) { continue; }
- const r = pixelData[pixelIndex];
- const g = pixelData[pixelIndex + 1];
- const b = pixelData[pixelIndex + 2];
- const colornum = (r << 16) | (g << 8) | b;
- if (isOceanColor(colornum)) {
- CanvasArray[x][y] = -1;
- continue;
- }
- const colorIndex = colors.indexOf(colornum);
- CanvasArray[x][y] = colorIndex;
- }
- }
- self.postMessage(CanvasArray);
- const canvasworkerendTime = performance.now();
- var processingTime = canvasworkerendTime - canvasworkerTimet;
- self.postMessage(processingTime);
- });
- `;
- const cloaderblob = new Blob([cloadercode], { type: 'application/javascript' });
- const canvasworker = new Worker(URL.createObjectURL(cloaderblob));
-
- function loadcanvas(canvas) {
- canvasworker.onmessage = function(event) {
- if (Array.isArray(event.data)) {
- canvas.CanvasArray = event.data;
- } else {
- console.log("[7placer] Processing took: " + Math.round(event.data) + "ms");
- }
- };
- canvasworker.postMessage(canvas_Canvas.ID);
- }
-
- /* =======================================================================
- Style Settings - Tracker, Drop Area and Canvas Preview
- ========================================================================== */
- const trackercss = {
- top: '0px',
- left: '0px',
- borderColor: 'rgb(138,43,226)',
- color: 'rgb(138,43,226)',
- backgroundColor: 'black',
- opacity: '60%',
- display: 'none',
- transition: 'all 0.06s ease-in-out',
- pointerEvents: 'none'
- };
-
- const drop = {
- width: 'calc(100% - 2em)',
- height: 'calc(100% - 2em)',
- position: 'fixed',
- left: '0px',
- top: '0px',
- backgroundColor: 'rgba(0, 0, 0, 0.533)',
- zIndex: '9999',
- display: 'flex',
- color: 'white',
- fontSize: '48pt',
- justifyContent: 'center',
- alignItems: 'center',
- border: '3px white dashed',
- borderRadius: '18px',
- margin: '1em'
- };
-
- const canvascss = {
- position: 'absolute',
- pointerEvents: 'none',
- left: '0px',
- top: '0px',
- imageRendering: 'pixelated',
- opacity: '50%',
- animation: 'blink 3s ease-out infinite'
- };
-
- const blink = document.createElement("style");
- blink.type = "text/css";
- blink.innerText = `
- @keyframes blink {
- 0% { opacity: .30; }
- 50% { opacity: .10; }
- 100% { opacity: .30; }
- }
- `;
- document.head.appendChild(blink);
-
- /* =======================================================================
- Canvas Class
- ========================================================================== */
- class Canvas {
- constructor() {
- Canvas.ID = this.ParseID();
- Canvas.isProcessed = false;
- loadcanvas(this);
- Canvas.customCanvas = this.createPreviewCanvas();
- }
- ParseID() {
- return parseInt(window.location.href.split("/").slice(-1)[0].split("-")[0]);
- }
- static get instance() {
- if (!Canvas._instance)
- Canvas._instance = new Canvas();
- return Canvas._instance;
- }
- set CanvasArray(array) {
- this._CanvasArray = array;
- Canvas.isProcessed = true;
- }
- get CanvasArray() {
- return this._CanvasArray;
- }
- getColor(x, y) {
- try {
- return this._CanvasArray[x][y];
- } catch(e) {
- return 50;
- }
- }
- updatePixel(x, y, color) {
- if (!Canvas.isProcessed)
- return;
- this.CanvasArray[x][y] = color;
- }
- createPreviewCanvas() {
- const canvas = $(`<canvas width="2500" height="2088">`).css(canvascss);
- $('#canvas').ready(function () {
- $('#painting-move').append(canvas);
- });
- const ctx = canvas[0].getContext("2d");
- return ctx;
- }
- }
- const canvas_Canvas = Canvas;
-
- /* =======================================================================
- Palive and Time Functions
- ========================================================================== */
- function randomString(charList, num) {
- return Array.from({ length: num }, () => charList.charAt(Math.floor(Math.random() * charList.length))).join('');
- }
- function randomString1(num) {
- const charList = 'abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ';
- return randomString(charList, num);
- }
- function randomString2(num) {
- const charList = 'gmbonjklezcfxta1234567890GMBONJKLEZCFXTA';
- return randomString(charList, num);
- }
- function randInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
- const paliveCharmap = {
- "0": "g",
- "1": "n",
- "2": "b",
- "3": "r",
- "4": "z",
- "5": "s",
- "6": "l",
- "7": "x",
- "8": "i",
- "9": "o"
- };
- function getPalive(serverTime, userId) {
- const tDelay = getTDelay(serverTime);
- const sequenceLengths = [6, 5, 9, 4, 5, 3, 6, 6, 3];
- const currentTimestamp = Math.floor(Date.now() / 1000) + tDelay - 5400;
- const timestampString = currentTimestamp.toString();
- const timestampCharacters = timestampString.split('');
- let result = '';
- for (let i = 0; i < sequenceLengths.length; i++) {
- const sequenceNumber = sequenceLengths[i];
- result += randInt(0, 1) == 1 ? randomString2(sequenceNumber) : randomString1(sequenceNumber);
- const letter = paliveCharmap[parseInt(timestampCharacters[i])];
- result += randInt(0, 1) == 0 ? letter.toUpperCase() : letter;
- }
- result += userId.toString().substring(0, 1) + (randInt(0, 1) == 1 ? randomString2(randInt(4, 20)) : randomString1(randInt(4, 25)));
- return result + "0=";
- }
- function getTDelay(serverTime) {
- const currentTime = new Date().getTime() / 1e3;
- return Math.floor(serverTime - currentTime);
- }
-
- /* =======================================================================
- Auth and API Functions
- ========================================================================== */
- class Auth {
- constructor(authObj) {
- this.authKey = authObj.authKey;
- this.authId = authObj.authId;
- this.authToken = authObj.authToken;
- }
- }
- function getCookie(name) {
- const value = `; ${document.cookie}`;
- const parts = value.split(`; ${name}=`);
- if (parts.length === 2)
- return parts.pop().split(';').shift();
- }
- async function getPainting(authId, authKey, authToken) {
- const originalAuthId = getCookie('authId');
- const originalAuthKey = getCookie('authKey');
- const originalAuthToken = getCookie('authToken');
- document.cookie = `authId=${authId}; path=/`;
- document.cookie = `authKey=${authKey}; path=/`;
- document.cookie = `authToken=${authToken}; path=/`;
- try {
- const response = await fetch(`https://pixelplace.io/api/get-painting.php?id=${canvas_Canvas.ID}&connected=1`, {
- headers: { 'Accept': 'application/json, text/javascript, */*; q=0.01' },
- credentials: 'include'
- });
- const json = response.json();
- return json;
- } finally {
- document.cookie = `authId=${originalAuthId}; path=/`;
- document.cookie = `authKey=${originalAuthKey}; path=/`;
- document.cookie = `authToken=${originalAuthToken}; path=/`;
- }
- }
-
- /* =======================================================================
- Account Management and Command Functions
- ========================================================================== */
- const window2 = window;
- var LocalAccounts = new Map();
- function storagePush() {
- const obj = Object.fromEntries(LocalAccounts);
- localStorage.setItem('LocalAccounts', JSON.stringify(obj));
- }
- function storageGet() {
- const storedAccounts = localStorage.getItem('LocalAccounts');
- if (storedAccounts) {
- const parsedAccounts = JSON.parse(storedAccounts);
- LocalAccounts = new Map(Object.entries(parsedAccounts));
- } else {
- LocalAccounts = new Map();
- }
- }
- async function delay(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
- }
- function saveAuth(username, authId, authKey, authToken, print = true) {
- if (!authId || !authKey || !authToken) {
- console.log('[7p] saveAuth usage: saveAuth(username, authId, authKey, authToken)');
- return;
- }
- const account = { authId, authKey, authToken };
- LocalAccounts.set(username, account);
- storagePush();
- if (print)
- console.log('Auth saved. Saved list: ', LocalAccounts);
- }
- async function getAuth(print = true) {
- const cookieStore = window2.cookieStore;
- const authToken = await cookieStore.get("authToken");
- const authKey = await cookieStore.get("authKey");
- const authId = await cookieStore.get("authId");
- if (authToken == null || authKey == null || authId == null) {
- console.log('[7p] Please login first!');
- return;
- }
- if (print)
- console.log(`authId = "${authId.value}", authKey = "${authKey.value}", authToken = "${authToken.value}"`);
- return { authToken: authToken.value, authKey: authKey.value, authId: authId.value };
- }
- async function saveAccount() {
- storageGet();
- const AuthObj = await getAuth(false);
- const userinfo = await getPainting(AuthObj.authId, AuthObj.authKey, AuthObj.authToken);
- saveAuth(userinfo.user.name, AuthObj.authId, AuthObj.authKey, AuthObj.authToken, false);
- console.log('Auth saved. Saved list: ', LocalAccounts);
- }
- function getAccounts() {
- storageGet();
- if (!LocalAccounts || LocalAccounts.size == 0) {
- console.log('No accounts found');
- return;
- }
- console.log(`Found ${LocalAccounts.size} accounts`);
- console.log(LocalAccounts);
- }
- function deleteAccount(identifier) {
- if (identifier == null) {
- console.log('deleteAccount usage: deleteAccount(user or index)');
- return;
- }
- storageGet();
- if (typeof identifier == 'string') {
- if (identifier == 'all') {
- LocalAccounts.forEach((value, key) => {
- LocalAccounts.delete(key);
- });
- return;
- }
- if (!LocalAccounts.has(identifier)) {
- console.log(`[7p] Error deleting: No account with name ${identifier}`);
- return;
- }
- LocalAccounts.delete(identifier);
- console.log(`[7p] Deleted account ${identifier}.`);
- console.log(LocalAccounts);
- }
- if (typeof identifier == 'number') {
- const keys = Array.from(LocalAccounts.keys());
- if (identifier > keys.length) {
- console.log(`[7p] Error deleting: No account with index ${identifier}`);
- return;
- }
- LocalAccounts.delete(keys[identifier]);
- console.log(`Deleted account ${identifier}`);
- console.log(LocalAccounts);
- }
- storagePush();
- }
- async function connect(username) {
- storageGet();
- const account = LocalAccounts.get(username);
- const connectedbot = window2.seven.bots.find((bot) =>
- bot.generalinfo && bot.generalinfo.user && bot.generalinfo.user.name == username
- );
- if (!username) {
- console.log('[7p] Missing bot username, connect("username")');
- return;
- }
- if (username == 'all') {
- for (const [username, account] of LocalAccounts) {
- const connectedbot = window2.seven.bots.find((bot) =>
- bot.generalinfo && bot.generalinfo.user && bot.generalinfo.user.name == username
- );
- const auth = new Auth(account);
- if (connectedbot) {
- console.log(`[7p] Account ${username} is already connected.`);
- continue;
- }
- new WSBot(auth, username);
- await delay(500);
- }
- return;
- }
- if (!account) {
- console.log(`[7p] No account found with username ${username}`);
- return;
- }
- if (connectedbot) {
- console.log(`[7p] Account ${username} is already connected.`);
- return;
- }
- const auth = new Auth(account);
- new WSBot(auth, username);
- }
- function disconnect(username) {
- const bot = window2.seven.bots.find((bot) =>
- bot.generalinfo && bot.generalinfo.user && bot.generalinfo.user.name == username
- );
- if (!username) {
- console.log('[7p] disconnect requires a username, disconnect("username")');
- return;
- }
- if (username == 'all') {
- if (window2.seven.bots.length == 1) {
- console.log('[7p] No bots connected.');
- return;
- }
- for (const bot of window2.seven.bots) {
- closeBot(bot);
- }
- return;
- }
- if (!bot) {
- console.log(`[7p] No bot connected with username ${username}`);
- return;
- }
- closeBot(bot);
- }
-
- /* =======================================================================
- Global Variables
- ========================================================================== */
- const variables = window.seven = {
- bots: [],
- pixelspeed: 20,
- queue: [],
- inprogress: false,
- protect: false,
- tickspeed: 1000,
- order: 'fromCenter',
- saveAuth: saveAuth,
- getAuth: getAuth,
- saveAccount: saveAccount,
- getAccounts: getAccounts,
- deleteAccount: deleteAccount,
- connect: connect,
- disconnect: disconnect
- };
-
- /* =======================================================================
- WebSocket and Message Handling
- ========================================================================== */
- function onClientMessage(event) {
- const msg = event.data;
- const bot = Client.instance;
- if (msg.startsWith("42")) {
- const msgData = JSON.parse(event.data.substr(2));
- const type = msgData[0];
- switch (type) {
- case "p":
- for (const pixel of msgData[1]) {
- const canvas = canvas_Canvas.instance;
- const x = pixel[0];
- const y = pixel[1];
- const color = pixel[2];
- canvas.updatePixel(x, y, color);
- }
- break;
- case "canvas":
- for (const pixel of msgData[1]) {
- const canvas = canvas_Canvas.instance;
- const x = pixel[0];
- const y = pixel[1];
- const color = pixel[2];
- canvas.updatePixel(x, y, color);
- }
- break;
- }
- }
- }
- async function onBotMessage(event, bot) {
- const message = event.data;
- if (message.startsWith("42")) {
- const msgData = JSON.parse(event.data.substr(2));
- const type = msgData[0];
- const botid = bot.generalinfo.user.id;
- const botname = bot.username;
- switch (type) {
- case "server_time":
- bot.paliveServerTime = msgData[1];
- break;
- case "ping.alive":
- const hash = getPalive(bot.paliveServerTime, botid);
- console.log('[7p]', botname, ': pong =', hash, botid);
- bot.emit('pong.alive', `"` + hash + `"`);
- break;
- case "throw.error":
- if (msgData[1] == 49) {
- console.log(`[7p] [Bot ${botname}] Error (${msgData[1]}): This auth is not valid! Deleting account from saved accounts...`);
- deleteAccount(botname);
- closeBot(bot);
- return;
- }
- console.log(`[7p] [Bot ${botname}] Pixelplace WS error: ${msgData[1]}`);
- break;
- case "canvas":
- console.log(`[7p] Successfully connected to bot ${bot.username}`);
- variables.bots.push(bot);
- break;
- }
- }
- if (message.startsWith("0"))
- bot.ws.send('40');
- if (message.startsWith("40"))
- bot.ws.send(`42["init",{"authKey":"${bot.auth.authKey}","authToken":"${bot.auth.authToken}","authId":"${bot.auth.authId}","boardId":${canvas_Canvas.ID}}]`);
- if (message.startsWith("2"))
- bot.ws.send('3');
- }
- const customWS = window.WebSocket;
- window.WebSocket = function(url, protocols) {
- const client = new Client();
- const socket = new customWS(url, protocols);
- socket.addEventListener("message", (event) => { onClientMessage(event); });
- client.ws = socket;
- return socket;
- };
- async function hookBot(bot) {
- console.log(`[7p] Attempting to connect account ${bot.username}`);
- const socket = new customWS("wss://pixelplace.io/socket.io/?EIO=4&transport=websocket");
- socket.addEventListener("message", (event) => { onBotMessage(event, bot); });
- socket.addEventListener("close", () => { Bot.botIndex -= 1; });
- return socket;
- }
- function closeBot(bot) {
- if (bot instanceof Client)
- return;
- if (!bot) {
- console.log('[7placer] Cannot close bot that doesn\'t exist.');
- return;
- }
- bot.ws.close();
- const result = variables.bots.filter((checkedBot) => checkedBot.botid != bot.botid);
- variables.bots = result;
- console.log('[7placer] Ended bot ', bot.botid);
- }
-
- /* =======================================================================
- Bot Classes – Bot, WSBot and Client
- ========================================================================== */
- class Bot {
- constructor() {
- this.trackeriters = 0;
- this.lastplace = Date.now();
- this.botid = Bot.botIndex;
- Bot.botIndex += 1;
- }
- emit(event, params) {
- this.ws.send(`42["${event}",${params}]`);
- }
- async placePixel(x, y, color, client = false, tracker = true) {
- var tick = 0;
- while (true) {
- const canvas = canvas_Canvas.instance;
- const canvascolor = canvas.getColor(x, y);
- if (canvascolor == color || canvascolor == -1)
- return true;
- if (Date.now() - this.lastplace >= variables.pixelspeed) {
- this.emit('p', `[${x},${y},${color},1]`);
- this.lastplace = Date.now();
- canvas.updatePixel(x, y, color);
- if (tracker && this.trackeriters >= 6) {
- $(this.tracker).css({ top: y, left: x, display: 'block' });
- this.trackeriters = 0;
- }
- this.trackeriters += 1;
- return true;
- }
- tick += 1;
- if (tick == variables.tickspeed) {
- tick = 0;
- await new Promise(resolve => setTimeout(resolve, 0));
- }
- }
- }
- static async findAvailableBot() {
- const bots = variables.bots;
- var tick = 0;
- while (true) {
- for (var i = 0; i < bots.length; i++) {
- const bot = bots[i];
- if (Date.now() - bot.lastplace >= variables.pixelspeed) {
- return bot;
- }
- }
- tick += 1;
- if (tick == variables.tickspeed) {
- tick = 0;
- await new Promise(resolve => setTimeout(resolve, 0));
- }
- }
- }
- createTracker() {
- const tracker = $('<div class="track" id="bottracker">').text(`[7P] ${this.username}`).css(trackercss);
- $('#canvas').ready(function () {
- $('#painting-move').append(tracker);
- });
- return tracker;
- }
- set ws(wss) {
- this._ws = wss;
- }
- get ws() {
- return this._ws;
- }
- }
- Bot.botIndex = 0;
- class WSBot extends Bot {
- constructor(auth, username) {
- super();
- if (!username || !auth) {
- console.error("[7p ERROR]: 'auth' and 'username' should both be provided.");
- return;
- }
- this._auth = auth;
- this.username = username;
- this.startBot();
- }
- async startBot() {
- this.generalinfo = await getPainting(this.auth.authId, this.auth.authKey, this.auth.authToken);
- this.tracker = this.createTracker();
- this.ws = await hookBot(this);
- }
- get auth() {
- return this._auth;
- }
- }
- class Client extends Bot {
- constructor() {
- super();
- this.username = 'Client';
- Client.instance = this;
- this.tracker = this.createTracker();
- variables.bots.push(this);
- }
- static get Client() {
- return Client.instance;
- }
- }
-
- /* =======================================================================
- Queue Functions (Processing queued pixels and checking canvas state)
- ========================================================================== */
- class Queue {
- constructor() { }
- static add(x, y, color) {
- variables.queue.push({ x: x, y: y, color: color });
- }
- static clear() {
- variables.queue = [];
- }
- static async start() {
- if (!canvas_Canvas.isProcessed) {
- console.log('[7p] Error starting queue: Canvas has not been processed yet.');
- Queue.stop();
- return;
- }
- await Queue.sort();
- var pos = 0;
- var tick = 0;
- variables.inprogress = true;
- while (variables.inprogress == true && variables.queue.length > 0) {
- const pixel = variables.queue[pos];
- const currentColor = canvas_Canvas.instance.getColor(pixel.x, pixel.y);
- if (currentColor === pixel.color || currentColor === -1) {
- pos++;
- if (pos >= variables.queue.length) {
- if (variables.protect)
- pos = 0;
- else {
- Queue.stop();
- break;
- }
- }
- continue;
- }
- const bot = await Bot.findAvailableBot();
- await bot.placePixel(pixel.x, pixel.y, pixel.color);
- pos++;
- if (!variables.protect && pos == variables.queue.length) {
- Queue.stop();
- break;
- } else if (variables.protect && pos == variables.queue.length) {
- pos = 0;
- }
- await new Promise(resolve => setTimeout(resolve, 0));
- if (tick >= variables.tickspeed) {
- tick = 0;
- await new Promise(resolve => setTimeout(resolve, 0));
- }
- tick += 1;
- }
- }
- static async sort() {
- const array = variables.queue;
- switch (variables.order) {
- case 'rand':
- array.sort(() => Math.random() - 0.5);
- break;
- case 'colors':
- array.sort((a, b) => a.color - b.color);
- break;
- case 'vertical':
- array.sort((a, b) => a.x - b.x);
- break;
- case 'horizontal':
- array.sort((a, b) => a.y - b.y);
- break;
- default:
- case 'circle':
- const CX = Math.floor((array[0].x + array[array.length - 1].x) / 2);
- const CY = Math.floor((array[0].y + array[array.length - 1].y) / 2);
- array.sort((a, b) => {
- const distanceA = Math.sqrt((a.x - CX) ** 2 + (a.y - CY) ** 2);
- const distanceB = Math.sqrt((b.x - CX) ** 2 + (b.y - CY) ** 2);
- return distanceA - distanceB;
- });
- break;
- }
- }
- static stop() {
- variables.inprogress = false;
- canvas_Canvas.customCanvas.clearRect(0, 0, 3000, 3000);
- Queue.clear();
- }
- }
- const SevenQueue = Queue;
-
- /* =======================================================================
- Image Processing Tools
- ========================================================================== */
- const colors = [
- 0xFFFFFF, 0xC4C4C4, 0xA6A6A6, 0x888888, 0x6F6F6F, 0x555555, 0x3A3A3A, 0x222222,
- 0x000000, 0x003638, 0x006600, 0x477050, 0x1B7400, 0x22B14C, 0x02BE01, 0x51E119,
- 0x94E044, 0x34EB6B, 0x98FB98, 0x75CEA9, 0xCAFF70, 0xFBFF5B, 0xE5D900, 0xFFCC00,
- 0xC1A162, 0xE6BE0C, 0xE59500, 0xFF7000, 0xFF3904, 0xE50000, 0xCE2939, 0xFF416A,
- 0x9F0000, 0x4D082C, 0x6B0000, 0x440414, 0xFF755F, 0xA06A42, 0x633C1F, 0x99530D,
- 0xBB4F00, 0xFFC49F, 0xFFDFCC, 0xFF7EBB, 0xFFA7D1, 0xEC08EC, 0xBB276C, 0xCF6EE4,
- 0x7D26CD, 0x820080, 0x591C91, 0x330077, 0x020763, 0x5100FF, 0x0000EA, 0x044BFF,
- 0x013182, 0x005BA1, 0x6583CF, 0x36BAFF, 0x0083C7, 0x00D3DD, 0x45FFC8, 0xB5E8EE
- ];
- function getColorDistance(c1, c2) {
- const r1 = (c1 >> 16) & 0xFF;
- const g1 = (c1 >> 8) & 0xFF;
- const b1 = c1 & 0xFF;
- const r2 = (c2 >> 16) & 0xFF;
- const g2 = (c2 >> 8) & 0xFF;
- const b2 = c2 & 0xFF;
- return (r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2;
- }
- function findClosestColor(color) {
- let minDistance = Infinity;
- let colorNumber;
- let index = 0;
- for (const pxpColor of colors) {
- const distance = getColorDistance(color, pxpColor);
- if (distance < minDistance) {
- minDistance = distance;
- colorNumber = index;
- }
- index += 1;
- }
- return colorNumber;
- }
- function previewCanvasImage(x, y, image) {
- const ctx = canvas_Canvas.customCanvas;
- const img = new Image();
- img.onload = function () {
- ctx.drawImage(img, x, y);
- };
- img.src = URL.createObjectURL(image);
- }
- async function ImageToPixels(image) {
- const result = [];
- const canvas = new OffscreenCanvas(image.width, image.height);
- const ctx = canvas.getContext('2d');
- ctx.drawImage(image, 0, 0, image.width, image.height);
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- const pixelData = imageData.data;
- for (let y = 0; y < canvas.height; y++) {
- for (let x = 0; x < canvas.width; x++) {
- const pixelIndex = (y * canvas.width + x) * 4;
- const r = pixelData[pixelIndex];
- const g = pixelData[pixelIndex + 1];
- const b = pixelData[pixelIndex + 2];
- const a = pixelData[pixelIndex + 3];
- const colornum = (r << 16) | (g << 8) | b;
- if (a < 1) { continue; }
- const color = findClosestColor(colornum);
- result.push({ x, y, color });
- }
- }
- return result;
- }
- async function botImage(x, y, image) {
- const bitmap = await createImageBitmap(image);
- const processed = await ImageToPixels(bitmap);
- previewCanvasImage(x, y, image);
- processed.forEach((pixel) => SevenQueue.add(pixel.x + x, pixel.y + y, pixel.color));
- SevenQueue.start();
- }
-
- /* =======================================================================
- Square Creation Function
- ========================================================================== */
- function BotSquare(x1, y1, x2, y2, color) {
- if (x2 < x1) [x1, x2] = [x2, x1];
- if (y2 < y1) [y1, y2] = [y2, y1];
- for (let x = x1; x <= x2; x++) {
- for (let y = y1; y <= y2; y++) {
- SevenQueue.add(x, y, color);
- }
- }
- SevenQueue.start();
- }
-
- /* =======================================================================
- Cursor and Selected Color Information
- ========================================================================== */
- function getClientMouse() {
- const coordinates = $('#coordinates').text();
- const [x, y] = coordinates.split(',').map(coord => parseInt(coord.trim()));
- const selectedcolor = $('#palette-buttons a.selected').data('id');
- return [x, y, selectedcolor];
- }
-
- /* =======================================================================
- Image Botting – Drop Area
- ========================================================================== */
- function createDropArea() {
- const dropobject = $('<div>').text('Drop Image').css(drop);
- const [x, y] = getClientMouse();
- $('body').append(dropobject);
- dropobject.on("click", function () {
- dropobject.remove();
- });
- dropobject.on("drop", async function (event) {
- event.preventDefault();
- event.stopPropagation();
- const image = event.originalEvent.dataTransfer.files[0];
- dropobject.remove();
- await botImage(x, y, image);
- }).on('dragover', false);
- }
-
- /* =======================================================================
- Keyboard Shortcuts
- Alt+W: Stop queue
- Alt+B: Create drop area
- Alt+X: Draw square from two points
- Alt+Y: Draw border (1 pixel) around area with ocean and canvas boundaries
- ========================================================================== */
- var coord1 = null;
- var borderCoord1 = null;
- $(document).on('keyup', function (event) {
- if ($(':input[type="text"]').is(':focus'))
- return;
- switch (event.which) {
- case 87: // Alt+W
- if (!event.altKey) return;
- SevenQueue.stop();
- break;
- case 66: // Alt+B
- if (!event.altKey) return;
- createDropArea();
- break;
- case 88: // Alt+X: Draw square
- {
- const [x, y, color] = getClientMouse();
- if (coord1 == null) {
- coord1 = { x: x, y: y };
- return;
- }
- BotSquare(coord1.x, coord1.y, x, y, color);
- coord1 = null;
- }
- break;
- case 89: // Alt+Y: Draw border
- if (!event.altKey) return;
- {
- const [xB, yB, selectedColor] = getClientMouse();
- if (borderCoord1 == null) {
- borderCoord1 = { x: xB, y: yB };
- return;
- }
- // Second point selected, define rectangle area
- let xMin = Math.min(borderCoord1.x, xB);
- let xMax = Math.max(borderCoord1.x, xB);
- let yMin = Math.min(borderCoord1.y, yB);
- let yMax = Math.max(borderCoord1.y, yB);
-
- const canvasInstance = canvas_Canvas.instance;
- // Check each pixel in the selected area:
- for (let i = xMin; i <= xMax; i++) {
- for (let j = yMin; j <= yMax; j++) {
- // If pixel is not ocean (paintable canvas area)
- if (canvasInstance.getColor(i, j) !== -1) {
- let isBorder = false;
- // Check 4 directional neighbors:
- if (i - 1 >= 0 && canvasInstance.getColor(i - 1, j) === -1) isBorder = true;
- if (i + 1 < canvasInstance._CanvasArray.length && canvasInstance.getColor(i + 1, j) === -1) isBorder = true;
- if (j - 1 >= 0 && canvasInstance.getColor(i, j - 1) === -1) isBorder = true;
- if (j + 1 < canvasInstance._CanvasArray[0].length && canvasInstance.getColor(i, j + 1) === -1) isBorder = true;
-
- // If border pixel, add to queue (1 pixel border)
- if (isBorder) {
- SevenQueue.add(i, j, selectedColor);
- }
- }
- }
- }
- SevenQueue.start();
- borderCoord1 = null;
- }
- break;
- }
- });
-
- console.log('7Placer Loaded! Version: 1.5.0a');
- })();