INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Graphics Display

How do I display graphics using JavaScript? by EdwardMartinIII
Posted: 30 Apr 03 (Edited 5 May 03)

As a rule, JavaScript doesn't really support a graphics display.  Naturally, this annoyed me, so I wrote this.

This function accepts a "2-dimensional" array (JavaScript doesn't allow 2-dimensional arrays, either, like I'm going to let that stop me) of RGB values and displays it, with each "pixel" as big as you like (within reason, of course).  So, you can basically display at larger resolutions, in case you're hard of seeing.

The following, which should be saved as "Grafix.js" contains the basic function, GraphicLayout:


function GraphicLayout(DataMap,CellSize)
  {
    var NumberOfColumns = DataMap.length;
    var NumberOfRows = DataMap[0].length;
    var RowCounter;
    var ColumnCounter;
    var w = window.open();
    var d = w.document;
    d.writeln('<!DOCTYPE html ');
    d.writeln('     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"');
    d.writeln('     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
    d.writeln('');
    d.writeln('  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">');
    d.writeln('  <head>');
    d.writeln('    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>');
    d.writeln('    <title>Grafix Output</title>');
    d.writeln('  </head>');
    d.writeln('  <body>');
    d.writeln('    <table border="0" cellpadding="0" cellspacing="0">');
    for (RowCounter = 0; RowCounter < NumberOfRows; RowCounter++) // these are the rows
      {
        d.writeln('      <tr>');
        for (ColumnCounter = 0; ColumnCounter < NumberOfColumns; ColumnCounter++) // these are the columns
          {
            d.writeln('        <td height="'+CellSize+'" width="'+CellSize+'" bgcolor="'+DataMap[ColumnCounter][RowCounter]+'"></td>');
          }
        d.writeln('      </tr>');
      }
    d.writeln('    </table>');
    d.writeln('  </body>');
    d.writeln('</html>');
    d.close();
  }


Now, I'm not going to leave you with just this, so I came up with a calling sample.

First, save this as "style.css":


p.Normal
{
  font-family:"times new roman", serif;
  font-size:10pt;
  font-style:normal;
  color: #000000;
  background-color: #ffffff;
  text-align:left;
  text-decoration:none;
  border-style: none;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
select.Normal
{
  font-family:"times new roman", serif;
  font-size:10pt;
  font-style:normal;
  color: #000000;
  background-color: #ffffff;
  text-align:left;
  text-decoration:none;
  border-style: none;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
input.Normal
{
  font-family:"times new roman", serif;
  font-size:10pt;
  font-style:normal;
  color: #000000;
  text-align:center;
  text-decoration:none;
}


I know, a style file is optional in this case, but I just try to make it a habit to always use one.

The following listing should be saved as "Sample.html".  You'll run it to view the example function calls:


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
    <title>JavaScript Sample</title>
    <link href="style.css" type="text/css" rel="stylesheet"></link>
    <script src="Grafix.js" type="text/javascript"></script>
    <script src="Sample.js" type="text/javascript"></script>
  </head>
  <body>
    <form name="MainForm">
      <p class="Normal">Choose a shape below, then press "Draw it!" to draw.</p>
      <select class="Normal" name="ShapeSelect" id="ShapeSelect"><option value="circle">Circle</option><option value="square">Square</option><option value="line">Lines</option><option value="face">Face</option></select>
      <input class="Normal" type="button" value="Draw it!" onclick="BuildShape(document.MainForm.ShapeSelect.value);return true;"></input><br />
      <p class="Normal">The goal here is to illustrate a method whereby JavaScript exclusively (when combined with styles) can be used to create a graphics display.  The utility is really significant considering that the cross-platform support for online graphics applications is minimal.</p>
      <p class="Normal"><b>Grafix.js</b> contains the basic drawing routine GraphicLayout().<br /><b>Sample.js</b> contains sample routines to build images (DataMap), and then calls the routines in Grafix.js to display the samples.  Sample.js really contains the best examples of function calls for GraphicLayout().</p>
    </form>
  </body>
</html>


That's pretty small, huh?

The last piece is the largest.  This is the function used by Sample.html to make the various images in the DataMap before calling GraphicLayout.  Save this as "Sample.js":


function BuildShape(Argument)
  {
    var NumberOfColumns = 30; // Number of columns
    var NumberOfRows = 30; // Number of rows
    var CellSize = 1; // The pixel size of each cell
    var ColumnCounter = 0;
    var RowCounter = 0;
    eval("var DataMap = Array(" + NumberOfColumns + ");"); // How many columns in the array
    for (ColumnCounter = 0; ColumnCounter < NumberOfColumns; ColumnCounter++) // For each column...
      {
        eval("DataMap[" + ColumnCounter + "] = new Array(" + NumberOfRows + ");"); // ...make a new row
        for (RowCounter = 0; RowCounter < NumberOfRows; RowCounter++) // for each item in the row...
          {
            DataMap[ColumnCounter][RowCounter]="#ffffff"; // erase to all white background
          }
      }
    switch(Argument)
      {
        case "circle":
          var PixColor = "#000000";
          for (ColumnCount = 11; ColumnCount < 19; ColumnCount++)
            {
              DataMap[2][ColumnCount] = PixColor;
              DataMap[27][ColumnCount] = PixColor;
              DataMap[ColumnCount][2] = PixColor;
              DataMap[ColumnCount][27] = PixColor;
            }
          for (ColumnCount = 0; ColumnCount < 2; ColumnCount++)
            {
              DataMap[ColumnCount + 9][3] = PixColor;
              DataMap[ColumnCount + 19][3] = PixColor;
              DataMap[ColumnCount + 9][26] = PixColor;
              DataMap[ColumnCount + 19][26] = PixColor;

              DataMap[ColumnCount + 7][4] = PixColor;
              DataMap[ColumnCount + 21][4] = PixColor;
              DataMap[ColumnCount + 7][25] = PixColor;
              DataMap[ColumnCount + 21][25] = PixColor;

              DataMap[3][ColumnCount + 9] = PixColor;
              DataMap[3][ColumnCount + 19] = PixColor;
              DataMap[26][ColumnCount + 9] = PixColor;
              DataMap[26][ColumnCount + 19] = PixColor;

              DataMap[4][ColumnCount + 7] = PixColor;
              DataMap[4][ColumnCount + 21] = PixColor;
              DataMap[25][ColumnCount + 7] = PixColor;
              DataMap[25][ColumnCount + 21] = PixColor;
            }
          DataMap[5][6] = PixColor;
          DataMap[6][5] = PixColor;
          DataMap[23][5] = PixColor;
          DataMap[24][6] = PixColor;
          DataMap[5][23] = PixColor;
          DataMap[6][24] = PixColor;
          DataMap[23][24] = PixColor;
          DataMap[24][23] = PixColor;
        break;

        case "square":
          for (ColumnCounter = 3; ColumnCounter < 23; ColumnCounter++)
            {
              DataMap[ColumnCounter][7] = "#000000";
              DataMap[ColumnCounter][26] = "#000000";
              DataMap[ColumnCounter + 5][2] = "#000000";
              DataMap[3][ColumnCounter+4] = "#000000";
              DataMap[22][ColumnCounter+4] = "#000000";
              DataMap[27][ColumnCounter-1] = "#000000";
            }
          for (ColumnCounter = 0; ColumnCounter < 4; ColumnCounter++)
            {
              DataMap[ColumnCounter + 4][6 - ColumnCounter] = "#000000";
              DataMap[ColumnCounter + 23][6 - ColumnCounter] = "#000000";
              DataMap[ColumnCounter + 23][25 - ColumnCounter] = "#000000";
            }
        break;

        case "line":
          for (ColumnCounter = 0; ColumnCounter < NumberOfColumns; ColumnCounter++)
            {
              DataMap[ColumnCounter][0] = "#000000";
              DataMap[0][ColumnCounter] = "#000000";
              DataMap[NumberOfRows-1][ColumnCounter] = "#000000";
              DataMap[ColumnCounter][NumberOfRows-1] = "#000000";
              DataMap[ColumnCounter][5] = "#000000";
              DataMap[5][ColumnCounter] = "#000000";
              DataMap[ColumnCounter][NumberOfRows - ColumnCounter - 1] = "#000000";
            }
        break;
        case "face":
          var PixColor = "#ffff00";
          for (ColumnCount = 11; ColumnCount < 19; ColumnCount++)
            {
              DataMap[2][ColumnCount] = PixColor;
              DataMap[27][ColumnCount] = PixColor;
              DataMap[ColumnCount][2] = PixColor;
              DataMap[ColumnCount][27] = PixColor;
            }
          for (ColumnCount = 0; ColumnCount < 2; ColumnCount++)
            {
              DataMap[ColumnCount + 9][3] = PixColor;
              DataMap[ColumnCount + 19][3] = PixColor;
              DataMap[ColumnCount + 9][26] = PixColor;
              DataMap[ColumnCount + 19][26] = PixColor;

              DataMap[ColumnCount + 7][4] = PixColor;
              DataMap[ColumnCount + 21][4] = PixColor;
              DataMap[ColumnCount + 7][25] = PixColor;
              DataMap[ColumnCount + 21][25] = PixColor;

              DataMap[3][ColumnCount + 9] = PixColor;
              DataMap[3][ColumnCount + 19] = PixColor;
              DataMap[26][ColumnCount + 9] = PixColor;
              DataMap[26][ColumnCount + 19] = PixColor;

              DataMap[4][ColumnCount + 7] = PixColor;
              DataMap[4][ColumnCount + 21] = PixColor;
              DataMap[25][ColumnCount + 7] = PixColor;
              DataMap[25][ColumnCount + 21] = PixColor;
            }
          DataMap[5][6] = PixColor;
          DataMap[6][5] = PixColor;
          DataMap[23][5] = PixColor;
          DataMap[24][6] = PixColor;
          DataMap[5][23] = PixColor;
          DataMap[6][24] = PixColor;
          DataMap[23][24] = PixColor;
          DataMap[24][23] = PixColor;
          for (ColumnCounter = 0; ColumnCounter < 4; ColumnCounter++)
            {
              DataMap[ColumnCounter + 7][10] = "#62a4fd";
              DataMap[ColumnCounter + 19][10] = "#62a4fd";
            }
          for (ColumnCounter = 0; ColumnCounter < 2; ColumnCounter++)
            {
              DataMap[ColumnCounter + 9][11] = "#62a4fd";
              DataMap[ColumnCounter + 19][11] = "#62a4fd";
            }
          for (ColumnCounter = 5; ColumnCounter < 25; ColumnCounter++)
            {
              DataMap[ColumnCounter][15] = "#f28393";
              DataMap[ColumnCounter][16] = "#f28393";
            }
          for (ColumnCounter = 6; ColumnCounter < 24; ColumnCounter++)
            {
              DataMap[ColumnCounter][17] = "#f28393";
              DataMap[ColumnCounter][18] = "#f28393";
            }
          for (ColumnCounter = 7; ColumnCounter < 23; ColumnCounter++)
            {
              DataMap[ColumnCounter][19] = "#f28393";
            }
          for (ColumnCounter = 8; ColumnCounter < 22; ColumnCounter++)
            {
              DataMap[ColumnCounter][20] = "#f28393";
            }
          for (ColumnCounter = 9; ColumnCounter < 21; ColumnCounter++)
            {
              DataMap[ColumnCounter][21] = "#f28393";
            }
          for (ColumnCounter = 10; ColumnCounter < 20; ColumnCounter++)
            {
              DataMap[ColumnCounter][22] = "#f28393";
            }
        break;
      }
    GraphicLayout(DataMap,CellSize);
  }


In practice, what you would do is build a "2-dimensional" array as I've done in Sample.js.  You would programatically "draw" on this array, using RGB values as element values (for example: "#88df22").  When you're all done, you call GraphicLayout with the DataMap and CellSize as arguments.  CellSize is how many pixels each of your "pixels" will be.  The smallest size is 1.  The largest size, well, it can get quite silly if you make it very large.

You can draw onto your DataMap however you wish.  In my case, I manually plugged values in, but it's just as easy to do so using equations, if you have enough fingers.

For example, save the following as "SampleMaths.html":


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
    <title>JavaScript Sample</title>
    <link href="style.css" type="text/css" rel="stylesheet"></link>
    <script src="Grafix.js" type="text/javascript"></script>
    <script src="SampleMaths.js" type="text/javascript"></script>
  </head>
  <body>
    <form name="MainForm">
      <p class="Normal">Choose a mathematical shape below, then press "Draw it!" to draw.</p>
      <select class="Normal" name="ShapeSelect" id="ShapeSelect"><option value="circle">Circle</option></select>
      <input class="Normal" type="button" value="Draw it!" onclick="BuildShape(document.MainForm.ShapeSelect.value);return true;"></input><br />
      <p class="Normal"><b>Grafix.js</b> contains the basic drawing routine GraphicLayout().<br /><b>Sample.js</b> contains sample routines to build images (DataMap), and then calls the routines in Grafix.js to display the samples.  Sample.js really contains the best examples of function calls for GraphicLayout().</p>
    </form>
  </body>
</html>


and the following as "SampleMaths.js":


function BuildShape(Argument)
  {
    var NumberOfColumns = 100; // Number of columns
    var NumberOfRows = 100; // Number of rows
    var CellSize = 1; // The pixel size of each cell
    var ColumnCounter = 0;
    var RowCounter = 0;
    eval("var DataMap = Array(" + NumberOfColumns + ");"); // How many columns in the array
    for (ColumnCounter = 0; ColumnCounter < NumberOfColumns; ColumnCounter++) // For each column...
      {
        eval("DataMap[" + ColumnCounter + "] = new Array(" + NumberOfRows + ");"); // ...make a new row
        for (RowCounter = 0; RowCounter < NumberOfRows; RowCounter++) // for each item in the row...
          {
            DataMap[ColumnCounter][RowCounter]="#eeeeee"; // erase to all white background
          }
      }
    switch(Argument)
      {
        case "circle":
          var RadianMeasure;
          var DegreeMeasure;
          var XPos;
          var YPos;
          for (ColumnCounter = 0; ColumnCounter < 360; ColumnCounter++)
            {
              DegreeMeasure = ColumnCounter * 1;
              RadianMeasure = DegreeMeasure * 0.017453293;
              XPos = Math.ceil((Math.sin(RadianMeasure) * 50) + 49);
              YPos = Math.ceil((Math.cos(RadianMeasure) * 50) + 49);
              DataMap[XPos][YPos]="#222222";
            }
        break;
      }
    GraphicLayout(DataMap,CellSize);
  }


This uses the equations to draw a circle of 50-pixel radius.

I'd be happy to add to this with other functions, if you're feeling clever.

Hope this helps!

Cheers,

Edward

http://www.petting-zoo.org/Edward.html

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close