Controlling pixels in javascript

[SethCall]

Is it possible to control pixels in javascript?
I wanted to make a 256 * 256 drawing area,
and the only way I could think to do it was to use one pixel wide and high divs.

So i used perl to pre-make an html sheet with 65,000 divs each with different id's,
and a style sheet for all of those divs.

LOL ... IE and mozilla aren't really too good at dealing with these pages (the wepbage as 1.7 mg and the style was 700k)... and that was loading them using my harddrive.

Any suggestions? I am now going to use php to autogenerate images, and.. well I just dont know howto do what I wantto do :)

[moonbiter]

I've seen this done before with a table. The trick to getting it down to a manageable size is to colspan and rowspan the table cells when there is a bunch of them with the same color value.

[SethCall]

humm well... ok.... but... i still want to have 256 * 256 pixels,

So if wanted a <td> for every pixel (so I can control the <td>'s color) I would still have 65,000 of them...

[moonbiter]

Actually, I'm an idiot and spoke from a bad memory. It wasn't a table and table cells that were used, but spans and line breaks [a.jaundicedeye.com]. The author used the # symbol to size the spans, using several in a row for multi-pixel areas of color.

None of these are 256 x 256, though.

To answer your initial question, javascript has no inherent ability to control pixels.

[Purple Martin]

javascript has no inherent ability to control pixels

However, what JavaScript CAN do is "pre-make an html sheet with 65,000 divs each with different id's", and it does it client-side not server-side like your perl script did, which should save you at about 1.69 mg download!

Two nested JavaScript for loops will allow you to build a string which looks just like the HTML served by your perl script for your grid of divs. Then simply use document.write() to "include" the string in the page.

[SethCall]

heh well.... whenI opened up my huge document in IE (from local harddrive) IE *could* handle it... but a simple routine such as
for(i=0;i<65556;i++)
document.getElementById["Pixel#"].style.background-Color = "black"

would crash it immediatly...

seems like it should be able to handle it. to me

[moonbiter]

seems like it should be able to handle it. to me

Heh. If you really want to grind your machine to a halt, try this:

<script type="text/javascript">
var i, j, count, objTemp, colorValue;
count = 0;
for (i = 0; i < 32; i++) {
for (j = 0; j < 32; j++) {
count++
document.write('<span id="a' + count + '">###<\/span>');
colorValue = 'rgb(' + rdm() + '%,' + rdm() + '%,' + rdm() + '%,)';
objTemp = document.getElementById('a' + count).style;
objTemp.color = colorValue;
objTemp.backgroundColor = colorValue;
}
document.write('<br \/>');
}
function rdm(){
var num = Math.round(Math.random()*100);
return num;
}
</script>

and change the values in the loop to 256.

Browsers just weren't built to handle code abominations like this. ;)