☰

Greasy Fork is available in English.

OWOP Image To Pixel

Script that inserts the image for pixelart in OWOP

  1. // ==UserScript==
  2. // @name         OWOP Image To Pixel
  3. // @match        *.ourworldofpixels.com/*
  4. // @description  Script that inserts the image for pixelart in OWOP
  5. // @author       Pedro Henrique
  6. // @license      MIT
  7. // @version      3.0
  8. // @namespace https://greatest.deepsurf.us/users/831014
  9. // @icon https://www.google.com/s2/favicons?domain=ourworldofpixels.com
  10. // ==/UserScript==
  11. var x = 0;
  12. var y = 0;
  13. var alphar = 255;
  14. var alphag = 255;
  15. var alphab = 255;
  16. var imagesize = 64;
  17.  
  18. var image = [];
  19. var delay = 50;
  20. var pointpaint = false;
  21. var alphacheck = true;
  22. var replacealphacheck = false;
  23. var running;
  24. function run() {
  25.     var _lastimagepixel = [parseInt(image[image.length-1][0]), parseInt(image[image.length-1][1])];
  26.     running = setInterval(function () {
  27.         var iposX = OWOP.mouse.tileX - x;
  28.         var iposY = OWOP.mouse.tileY - y;
  29.         var currentpos = ((iposX + 1) + (_lastimagepixel[0] * iposY)) + iposY
  30.         if (pointpaint == true) {
  31.             if (currentpos < 0 || currentpos > image.length) {
  32.                 currentpos = 0
  33.             }
  34.         }
  35.         else {
  36.             currentpos = 0
  37.         }
  38.         loop:
  39.         for (var i = currentpos; i < image.length; i++) {
  40.             var x1 = x + parseInt(image[i][0]);
  41.             var y1 = y + parseInt(image[i][1]);
  42.             var red = parseInt(image[i][2]);
  43.             var green = parseInt(image[i][3]);
  44.             var blue = parseInt(image[i][4]);
  45.             var alpha = parseInt(image[i][5]);
  46.             if (replacealphacheck == false && alphacheck == true && alpha < 127) {
  47.                 red = OWOP.world.getPixel(x1, y1)[0];
  48.                 green = OWOP.world.getPixel(x1, y1)[1];
  49.                 blue = OWOP.world.getPixel(x1, y1)[2];
  50.             } else if (replacealphacheck == true && alpha < 127) {
  51.                 red = alphar;
  52.                 green = alphag;
  53.                 blue = alphab;
  54.             }
  55.             if (OWOP.world.getPixel(x1, y1) != null && (OWOP.world.getPixel(x1, y1)[0] != red || OWOP.world.getPixel(x1, y1)[1] != green || OWOP.world.getPixel(x1, y1)[2] != blue)) {
  56.                 if (x1 < (OWOP.mouse.tileX + 30) && x1 > (OWOP.mouse.tileX - 30) && y1 > (OWOP.mouse.tileY - 30) && y1 < (OWOP.mouse.tileY + 30)) {
  57.  
  58.                     OWOP.world.setPixel(x1, y1, [red, green, blue], false)
  59.                     break loop;
  60.                 }
  61.             }
  62.         }
  63.     }, delay);
  64. }
  65.  
  66.  
  67. function initializeComponent() {
  68.     OWOP.windowSys.addWindow(new OWOP.windowSys.class.window("Image to PixelArt", {}, function (win) {
  69.         win.container.style = "height:auto;width:175px;overflow:hidden"
  70.  
  71.         // Imagem
  72.         win.addObj(document.createTextNode('Choose image'));
  73.         win.addObj(OWOP.util.mkHTML('div', {}));
  74.         var imagem = OWOP.util.mkHTML('img', {
  75.             id: 'imagem',
  76.             width: 32,
  77.             height: 32,
  78.         })
  79.         win.addObj(imagem);
  80.         win.addObj(OWOP.util.mkHTML('div', {}));
  81.         // Tamanho da Imagem
  82.         var imgsizetxt = win.addObj(document.createTextNode('Image Size (0px) : '));
  83.         var imgsizeinput = OWOP.util.mkHTML('input', {
  84.             id: 'imgsizeinput',
  85.             value: 64,
  86.             oninput: function () {
  87.                 imgsizetxt.nodeValue = "Image Size (" + this.value + "px) : "
  88.                 imagesize = this.value;
  89.             }
  90.         });
  91.         win.addObj(imgsizeinput);
  92.         // Aplicat tamanho
  93.         var applysize_button = OWOP.util.mkHTML('button', {
  94.             id: 'applysize',
  95.             innerHTML: 'Apply Size',
  96.             onclick: function () {
  97.                 applysize();
  98.             }
  99.         });
  100.         win.addObj(applysize_button);
  101.         // Escolher imagem
  102.         var escolherimagem = OWOP.util.mkHTML('input', {
  103.             id: 'imageminput',
  104.             type: 'file',
  105.             oninput: function (evt) {
  106.                 function readURL(input) {
  107.  
  108.                     if (input.files && input.files[0]) {
  109.                         var reader = new FileReader();
  110.                         reader.onloadend = async function (e) {
  111.                             var img = new Image();
  112.                             img.src = await e.target.result;
  113.                             document.getElementById("imagem").src = img.src;
  114.                             applysize();
  115.                         }
  116.  
  117.                         reader.readAsDataURL(input.files[0]);
  118.                     }
  119.                 }
  120.                 readURL(this)
  121.             }
  122.         });
  123.         win.addObj(escolherimagem);
  124.         // Input da posição da imagem no OWOP
  125.         win.addObj(document.createTextNode('X : '));
  126.         var inputX = OWOP.util.mkHTML('input', {
  127.             id: 'Xinput',
  128.             oninput: function () {
  129.                 x = parseInt(this.value);
  130.             }
  131.         });
  132.         win.addObj(OWOP.util.mkHTML('div', {}));
  133.         win.addObj(inputX);
  134.         win.addObj(document.createTextNode('Y : '));
  135.         var inputY = OWOP.util.mkHTML('input', {
  136.             id: 'Yinput',
  137.             oninput: function () {
  138.                 y = parseInt(this.value);
  139.             }
  140.         });
  141.         win.addObj(inputY);
  142.         // Delay para aplicar pixel no owop
  143.         var delaytext = win.addObj(document.createTextNode('Delay : '));
  144.         var delayinput = OWOP.util.mkHTML('input', {
  145.             id: 'delayinput',
  146.             type: 'range',
  147.             min: 1, max: 500,
  148.             oninput: function () {
  149.                 delaytext.nodeValue = "Delay : " + parseInt(this.value);
  150.                 delay = parseInt(this.value);
  151.             }
  152.         });
  153.         win.addObj(delayinput);
  154.         // Modo Point Paint, que pinta o pixel onde você está apontando o mouse
  155.         win.addObj(document.createTextNode('Point Paint'));
  156.         var pointpaintcheck = OWOP.util.mkHTML('input', {
  157.             id: 'pointpaintcheck',
  158.             type: 'checkbox',
  159.             oninput: function () {
  160.                 pointpaint = this.checked;
  161.             }
  162.         });
  163.         win.addObj(pointpaintcheck);
  164.         win.addObj(OWOP.util.mkHTML('div', {}));
  165.         // Substituir a cor apha do OWOP
  166.         win.addObj(document.createTextNode('Replace Alpha Color'));
  167.         var alphainput = OWOP.util.mkHTML('input', {
  168.             id: 'replacecheck',
  169.             type: 'checkbox',
  170.             oninput: function () {
  171.                 replacealphacheck = this.checked;
  172.             }
  173.         });
  174.         win.addObj(alphainput);
  175.         // Tipo de cor
  176.         var coloriralpha = OWOP.util.mkHTML('input', {
  177.             type: 'color',
  178.             id: 'replacealphacolor',
  179.             onchange: function () {
  180.                 alphar = hexToRgb(this.value).r;
  181.                 alphag = hexToRgb(this.value).g;
  182.                 alphab = hexToRgb(this.value).b;
  183.             }
  184.         });
  185.         win.addObj(coloriralpha);
  186.         win.addObj(OWOP.util.mkHTML('div', {}));
  187.         // Opção de ignorar o Alpha da imagem
  188.         win.addObj(document.createTextNode('Ignore Alpha (.png)'));
  189.         var alphainput = OWOP.util.mkHTML('input', {
  190.             id: 'alphacheck',
  191.             type: 'checkbox',
  192.             checked: 'true',
  193.             oninput: function () {
  194.                 alphacheck = this.checked;
  195.             }
  196.         });
  197.         win.addObj(alphainput);
  198.         win.addObj(OWOP.util.mkHTML('div', {}));
  199.         // Botão de Ativar
  200.         var button = OWOP.util.mkHTML('button', {
  201.             id: 'EnableImageToPixel',
  202.             innerHTML: 'Activate',
  203.             onclick: function () {
  204.                 if (document.getElementById("Xinput").value != "") {
  205.                     if (document.getElementById("Yinput").value != "") {
  206.                         run();
  207.                         document.getElementById("EnableImageToPixel").disabled = 'true';
  208.                     }
  209.                 }
  210.             }
  211.         });
  212.         win.addObj(button);
  213.         // Botão de desativar
  214.         var desativar = OWOP.util.mkHTML('button', {
  215.             id: 'DisableImageToPixel',
  216.             innerHTML: 'Disable',
  217.             onclick: function () {
  218.                 clearInterval(running);
  219.                 document.getElementById("EnableImageToPixel").removeAttribute("disabled");
  220.  
  221.             }
  222.         });
  223.         win.addObj(desativar);
  224.  
  225.         // Evento para definir a posição da imagem no OWOP
  226.         document.addEventListener('keydown', (event) => {
  227.             const keyName = event.key;
  228.             if (keyName == "e" || keyName == "E") {
  229.                 document.getElementById("Xinput").value = OWOP.mouse.tileX
  230.                 document.getElementById("Yinput").value = OWOP.mouse.tileY
  231.                 x = OWOP.mouse.tileX
  232.                 y = OWOP.mouse.tileY
  233.             }
  234.         });
  235.     }).move(window.innerWidth - 500, 32));
  236. }
  237.  
  238. function applysize() {
  239.     var img = new Image();
  240.     img.src = document.getElementById("imagem").src
  241.  
  242.  
  243.     var canvas = document.createElement('canvas');
  244.     var imgW = 0;
  245.     var imgH = 0;
  246.     if (imagesize == 0) {
  247.         imgW = img.width;
  248.         imgH = img.height;
  249.     }
  250.     else {
  251.         if (imagesize.toString().includes(";")) {
  252.             let wh = imagesize.toString().split(";");
  253.             imgW = parseInt(wh[0]);
  254.             imgH = parseInt(wh[1]);
  255.         }
  256.         else {
  257.             imgW = imagesize;
  258.             imgH = imagesize;
  259.         }
  260.     }
  261.     canvas.width = imgW;
  262.     canvas.height = imgH;
  263.  
  264.     var context = canvas.getContext('2d');
  265.     context.drawImage(img, 0, 0, imgW, imgH);
  266.     //context.drawImage(img, 0, 0, img.width, img.height);
  267.  
  268.     image = [];
  269.     for (var v = 0; v < imgH; v++) {
  270.         for (var i = 0; i < imgW; i++) {
  271.             var pixelData = context.getImageData(i, v, 1, 1).data;
  272.             image.push([i,v,pixelData[0],pixelData[1],pixelData[2],pixelData[3]])
  273.         }
  274.     }
  275. }
  276. function hexToRgb(hex) {
  277.     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  278.     return result ? {
  279.         r: parseInt(result[1], 16),
  280.         g: parseInt(result[2], 16),
  281.         b: parseInt(result[3], 16)
  282.     } : null;
  283. }
  284. if (typeof OWOP != 'undefined') initializeComponent();
  285. window.addEventListener('load', function () {
  286.     setTimeout(initializeComponent, 2000);
  287.  
  288.     // Função que auto reconecta o OWOP
  289.     setInterval(() => {
  290.         if (document.getElementById("load-options").class == "hide") {
  291.             document.getElementById("reconnect-btn").click();
  292.         }
  293.     }, 1000);
  294. });