Welcome to WebmasterWorld Guest from 54.205.75.60

Forum Moderators: open

Message Too Old, No Replies

Controlling pixels in javascript

   
5:12 pm on Oct 8, 2002 (gmt 0)

10+ Year Member



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 :)

7:04 pm on Oct 8, 2002 (gmt 0)

10+ Year Member



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.
7:10 pm on Oct 8, 2002 (gmt 0)

10+ Year Member



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...

9:14 pm on Oct 8, 2002 (gmt 0)

10+ Year Member



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.

9:34 am on Oct 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

12:29 pm on Oct 9, 2002 (gmt 0)

10+ Year Member



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

2:49 pm on Oct 9, 2002 (gmt 0)

10+ Year Member



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. ;)