homepage Welcome to WebmasterWorld Guest from 54.197.110.151
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Controlling pixels in javascript
SethCall

10+ Year Member



 
Msg#: 206 posted 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

10+ Year Member



 
Msg#: 206 posted 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

10+ Year Member



 
Msg#: 206 posted 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

10+ Year Member



 
Msg#: 206 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 206 posted 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

10+ Year Member



 
Msg#: 206 posted 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

10+ Year Member



 
Msg#: 206 posted 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