General
An Pixelart Editor in an table?
0 views

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
Read original: https://dev.to/taminodev/an-pixelart-editor-in-an-table-1ngo
PreviousAn Organizational Second Brain: Building an AI That Learns From ExpertsNextAn unquoted heredoc halved my backslashes and turned a character class into the letter w
Related posts
The Trump Administration Is Wreaking Havoc on the Electoral System Before the Midterms
0Wired

YouTuber Druski is going to make exclusive content for Netflix
0The Verge
Why are Soviet math textbooks so hardcore in comparison to US textbooks? (2017)
0Hacker News
Technofeudalism
0Hacker News
The Linkerd Story: The people Behind The Service Mesh — A new documentary premieres at KubeCon + CloudNativeCon North America 2026
0CNCF Blog
Londres en otoño: barrios, mercados y museos a tu ritmo
0dev.to Watercooler