An Pixelart Editor in an table?

TaMinoDev — Sun, 06 Sep 2026 19:46:52 +0000

I made an Pixelart Editor that is a table and I could make a few Nice Things with it:

An Jump and Run Game

as you can see, you are an red dot in an grid.
You can Walk, jump and... where is nothing more...

A Noising algorithm It took me way to long but now you can run the simplest Noising algorithm ever made:

the algorithm basicly sets each 5 steps an Point with a random value between 0 and 1, then it's each other pixel searches the nearest Point and calulates the value of the Point +/- an random value.

It's mid but maby I will find an better was soon.

A dumb Noising algorithm I can't realy explain how I come up with this code but... Its generating Noise... bute more in an Stripe format... yeah... I think it's looks like an old TV without signal:

You can find all of this on GitHub:
https://github.com/TaMinoDev/Full-Page-Pixel
and other Projects too:
https://github.com/TaMinoDev

Wo does it work?

a JavaScript Function calculates how many rows and colums the table should have:

function calculate() { if(free === true) { free = false; table.style.height = window.innerHeight + 'px'; table.style.width = window.innerWidth + 'px'; } }

     function generate() {
         const colums = window.innerHeight/multiplier; // Multiplier is a first 5
         const rows = window.innerWidth/multiplier;
         table.innerHTML = '';
         console.log({
             "cols": colums,
             "rows": rows
         });
         if(confirm('Continue?')) {
             let columIndex = 0;
             for(let c = 1; c <= colums; c = c + multiplier) {
                 const colum = document.createElement('tr');
                 colum.innerHTML = ``;


                 let rowIndex = 1;
                 columIndex++;


                 for(let r = 1; r <= rows; r = r + multiplier) {
                     colum.innerHTML += `<td style="width: ${1*multiplier}px; height: ${1*multiplier}px;" id="${columIndex}x${rowIndex}"></td>`;
                     rowIndex++;
                 }


                 table.appendChild(colum);
                 rowIndex = 1;
             }
         }
         oneRow = document.querySelector('tr').querySelectorAll('td').length;
         eventListener(); // Lets you click each Pixel to Change his color
         free = true;
     }

Thanks for reading :D

DEV Community: TaMinoDev

An Pixelart Editor in an table?

Wo does it work?