topical media & game development
graphic-canvas-example-function-tool.htm / htm
<!DOCTYPE HTML>
<html lang="en-AU"><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>www.benjoffe.com | 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="http://widgets.opera.com/widget/download/4408/1.4/">
<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>
</head><body>
<div id="benjoffe">
<div id="head">
<h1>Ben Joffe</h1>
</div>
<ul id="nav">
<li><a href="http://www.benjoffe.com/">Home</a> </li><li><a href="http://www.benjoffe.com/code/">Code</a> </li><li><a href="http://www.benjoffe.com/contact">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...';
--></script>
<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">
<tbody><tr>
<td></td>
<td colspan="2" style="font-weight: 700;">Boundaries <span id="reset" href="#">(reset)</span></td>
</tr>
<tr>
<td></td>
<td>Minimum</td>
<td>Maximum</td>
</tr>
<tr>
<td>x</td>
<td><input id="xMin" value="-1" readonly="readonly" type="text"></td>
<td><input id="xMax" value="1" readonly="readonly" type="text"></td>
</tr>
<tr>
<td>y</td>
<td><input id="yMin" value="-1" readonly="readonly" type="text"></td>
<td><input id="yMax" value="1" readonly="readonly" type="text"></td>
</tr>
<tr>
<td>z</td>
<td><input id="zMin" value="-1" readonly="readonly" type="text"></td>
<td><input id="zMax" value="1" readonly="readonly" type="text"></td>
</tr>
</tbody></table>
<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
</div>
</div>
<canvas id="preview" width="300" height="300"></canvas>
<div id="arrow"></div>
</div>
<div id="view2">
<canvas id="fullview" width="400" height="400"></canvas>
<input id="backButton" value="<< Back" type="button">
<div id="save"></div>
</div>
<div id="view3">
<div id="config1">
<h2>Options</h2>
<p><label>Surface:
<select id="paintType" style="margin-left: 8px; width: 130px;">
<option>Single colour</option>
<option>Height spectrum</option>
</select>
</label>
</p>
</div>
<div id="colourBox">
<div id="colourDisplay"></div>
<div id="colour"></div>
<div id="mark1"></div>
<div id="ring"></div>
</div>
<div id="config2">
<h2>Syntax</h2>
<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="http://www.benjoffe.com/code/tools/functions3d/keywords">here</a>.</p>
<p>To get started, an assortment of interesting looking surfaces can be found <a href="http://www.benjoffe.com/code/tools/functions3d/examples">here</a>.</p>
</div>
<div id="config3">© 2008 | <a href="http://www.benjoffe.com/">www.benjoffe.com</a></div>
<div id="arrow2"></div>
</div>
</div>
<div id="download">
<a href="http://widgets.opera.com/widget/4408/" target="_blank">Download this tool as an Opera Widget</a>
</div>
</div>
</div>
<div id="foot">
<p>
© 2009 Benjamin Joffe<span style="display: none;"> | <a href="http://www.benjoffe.com/es/code/tools/functions3d/">en español</a></span><!-- not enough pages have been translated yet to show the link to users -->
</p>
</div>
</div>
</body></html>
(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.
