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

Top comments (0)