Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I display graphics using JavaScript?

Graphics Display

How do I display graphics using JavaScript?

by EdwardMartinIII Posted Apr 30, 2003 (Edited May 5, 2003)

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:

Code:

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

Code:

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:

Code:

<!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":

Code:

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

Code:

<!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":

Code:

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,

[monkey]

Edward

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

Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Accept Learn more…

Back

Top