topical media & game development

talk show tell print

graphic-canvas-example-function-tool.htm / htm

  <html lang="en-AU"><head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  <title> | Functions 3D</title>
  <meta name="author" content="Benjamin Joffe">
  <meta name="Content-Script-Type" content="text/javascript">
  <meta name="Content-Style-Type" content="text/css">
  <style><!-- @import "/css/main.css"; --></style>
  <script type="text/javascript" src="graphic-canvas-example-function-main.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="alternate" type="application/x-opera-widgets" href="">
  <style type="text/css"><!-- @import "style.css"; --> </style>
  <script type="text/javascript" src="graphic-canvas-example-function-parse.js"></script>
  <script type="text/javascript" src="graphic-canvas-example-function-script.js"></script>
  <div id="benjoffe">
      <div id="head">
          <h1>Ben Joffe</h1>
      <ul id="nav">
          <li><a href="">Home</a>        </li><li><a href="">Code</a>        </li><li><a href="">Contact</a>    </li></ul>
      <div id="content">
  <div style="display: none;" id="loading"><img src="graphic-canvas-example-function-images-loading.gif" alt="" style="width: 16px; height: 16px; vertical-align: top;"> Loading...</div>
  <script type="text/javascript"><!--
      document.getElementById('loading').innerHTML = '<img src="graphic-canvas-example-function-images-loading.gif" alt="" style="width:16px;height:16px;vertical-align:top;"> Loading...';
  <div style="visibility: visible;" id="functions3d">
      <div id="container">
          <div style="width: 1000px; height: 1px;"></div>
          <div id="view1">
              <div id="errorBox"></div>
              <div id="fxy"></div>
              <input id="functionInput" value="(1 - x^2 - y^2) ^ (1/2)" type="text">
              <input id="functionRender" value="Full Render" type="submit">
              <table id="boundaries" cellspacing="3">
                      <td colspan="2" style="font-weight: 700;">Boundaries <span id="reset" href="#">(reset)</span></td>
                      <td><input id="xMin" value="-1" readonly="readonly" type="text"></td>
                      <td><input id="xMax" value="1" readonly="readonly" type="text"></td>
                      <td><input id="yMin" value="-1" readonly="readonly" type="text"></td>
                      <td><input id="yMax" value="1" readonly="readonly" type="text"></td>
                      <td><input id="zMin" value="-1" readonly="readonly" type="text"></td>
                      <td><input id="zMax" value="1" readonly="readonly" type="text"></td>
              <div id="control">
                  <div style="font-weight: 700; padding-bottom: 5px;">Control</div>
                  <input name="dragMode" checked="checked" type="radio"> Rotate camera<br>
                  <input name="dragMode" type="radio"> Pan (x,y)<br>
                  <input name="dragMode" type="radio"> Shift (z)<br>
                  <input name="dragMode" type="radio"> Scale<br>
                  <div id="scaleBoxes" style="padding-left: 25px;">
                      <input id="scaleBoxX" checked="checked" type="checkbox"> x<br>
                      <input id="scaleBoxY" checked="checked" type="checkbox"> y<br>
                      <input id="scaleBoxZ" checked="checked" type="checkbox"> z
              <canvas id="preview" width="300" height="300"></canvas>
              <div id="arrow"></div>
          <div id="view2">
              <canvas id="fullview" width="400" height="400"></canvas>
              <input id="backButton" value="&lt;&lt; Back" type="button">
              <div id="save"></div>
          <div id="view3">
              <div id="config1">
                  <select id="paintType" style="margin-left: 8px; width: 130px;">
                      <option>Single colour</option>
                      <option>Height spectrum</option>
              <div id="colourBox">
                  <div id="colourDisplay"></div>
                  <div id="colour"></div>
                  <div id="mark1"></div>
                  <div id="ring"></div>
              <div id="config2">
                  <p>A function must be written in terms of <b>x</b> and <b>y</b>. The patenthesis: "<b>(</b>" and "<b>)</b>" are used to indicate grouping, as well as to use a function such as <b>sin(x)</b>.</p>
                  <p>A list of functions, operators, variables and constants can be found <a href="">here</a>.</p>
                  <p>To get started, an assortment of interesting looking surfaces can be found <a href="">here</a>.</p>
              <div id="config3">© 2008 | <a href=""></a></div>
              <div id="arrow2"></div>
      <div id="download">
          <a href="" target="_blank">Download this tool as an Opera Widget</a>
      <div id="foot">
              © 2009 Benjamin Joffe<span style="display: none;"> | <a href="">en español</a></span><!-- not enough pages have been translated yet to show the link to users -->

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.