Advertisement
Ultizin

JS PIXEL

Sep 26th, 2023 (edited)
619
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //Constantes
  2.  
  3. const grid = document.getElementById('grid');
  4. const outputField = document.getElementById('output');
  5. const drawButton = document.getElementById('drawButton');
  6. const blackPixels = [];
  7.  
  8. //Criando a Malha e Definindo Tamanho
  9.  
  10. for (let i = 0; i < 128 * 64; i++) {
  11.     const cell = document.createElement('div');
  12.     cell.classList.add('cell');
  13.     grid.appendChild(cell);
  14. }
  15.  
  16. //Código para Pintar
  17.  
  18. const cells = document.querySelectorAll('.cell');
  19. cells.forEach((cell, index) => {
  20.     cell.addEventListener('mousedown', function (event) {
  21.         if (event.button === 0) {
  22.             // Botão Esquerdo = Pixel Preto
  23.             this.style.backgroundColor = 'black';
  24.            
  25.             // Registro de Pixel Preto (no Array)
  26.  
  27.             const x = index % 128;
  28.             const y = Math.floor(index / 128);
  29.             blackPixels.push({ x, y });
  30.         } else if (event.button === 2) {
  31.  
  32.             // Botão Direito = Pixel Branco
  33.  
  34.             this.style.backgroundColor = 'white';
  35.             // Registro de Pixel Branco (Remoção de Pixel e no Array)
  36.  
  37.             const x = index % 128;
  38.             const y = Math.floor(index / 128);
  39.             blackPixels.splice(blackPixels.findIndex(pixel => pixel.x === x && pixel.y === y), 1);
  40.         }
  41.     });
  42. });
  43.  
  44. // Botão de Saida de Códigos
  45.  
  46. drawButton.addEventListener('click', function () {
  47.     const output = blackPixels.map(pixel => `display.drawPixel(${pixel.x}, ${pixel.y}, SSD1306_WHITE);`).join('\n');
  48.     outputField.value = output;
  49. });
  50.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement