Pixel Mapper



  • I like to create graphs using script.

    Yesterday, I plotted the bifurcation diagram of x^2 + c.

    In HTML + javascript.

    Abusing 1x1 divs as though they were pixels.

    So that's not very efficient. Page took 10 seconds to load and generated 24,000 elements. :D

    What I'm looking for is some kind of prgrammable pixel map so I can play visually without hacking HTML.

    Someting with a relatively complete programming language, like Javascript, but with a proper API to place pixels, and draw fantastic things.

    I wonder if FFX's new CANVAS element can help me. I need to be able to code something like:

    <font color="#000000">
    <font color="#0000bb">
    canvas</font><font color="#007700">.</font><font color="#0000bb">drawPixel</font><font color="#007700">(</font><font color="#0000bb">28</font><font color="#007700">,</font><font color="#0000bb">447</font><font color="#007700">,</font><font color="#dd0000">'red'</font><font color="#007700">);
    </font>
    </font>


    and wrap that in a for loop etc and generally fo funky things.

    Does anyone know such a thing?

    A Java appl(et/ication), maybe?



  • In Java natively, I think you can use just the AWT library, but I don't know Java.  In general [python, perl, java] you can use the wxwindows library wxDC object, and drawPoint(x,y) and setpen(pen) to do exactly what you want.  Tk and Gtk also have such objects, but I don't know what they're called off the top of my head.  You can do anything like that in OpenGL, you might want to look at OpenGL libraries for the language of your choice, instead.

    If you're REALLY brave [read: foolish] you could, in theory and IE/win only, grab a com object with CreateObject and use that IN javascript for DirectX.  No joke.



  • A java applet that does that with AWT would not be very difficult to write; I don't know how difficult it is to make the commuincation between the applet and javascript.



  • you can do interesting things with the javascript vector graphics library:

     

    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

     

    It basically uses positionally placed divs as pixels, however, since a pixel-per-div arrangement is bad, it uses special algorithms to stretch the divs whenever possible. It's an amazing feat, IMO, and it seems to work fairly well. I love the function grapher:

     

    http://www.walterzorn.com/grapher/grapher_e.htm



  • Or you can just do the image generation server-side and use whatever language you please.  I know that .Net and Java both have great image APIs.  I do it all the time with .Net.  If you want dynamic generation, just do it like google maps and have javascript request the image from the server.



  • I thank you all for your suggestions. I ended up doing it with the CANVAS element available in FFX 1.5 and Safari.

    Hurray!

    Firefox sometimes crashes with certain numbers, even though it used to just plod on using Infinity as formula seed, drawing a straight vertical line.

    It also crashes if I use 700 (or more) as the C count.

    Go figure.

    Great fun, nonetheless. :)


Log in to reply