homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Controlling pixels in javascript
SethCall




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

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




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

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




msg:1489760
 7:10 pm on Oct 8, 2002 (gmt 0)

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved