topical media & game development
sample-collect-hush-js-sketch.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0032)http://physicsketch.appspot.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>physicSketch</title>
<!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script src="sample-collect-hush-js-sketch-files-prototype-1.6.0.2.js"></script>
<script src="sample-collect-hush-js-sketch-files-box2d.js"></script>
<script src="sample-collect-hush-js-sketch-files-draw_world.js"></script>
<script src="sample-collect-hush-js-sketch-files-physicsketch.js"></script>
<link href="sample-collect-hush-js-sketch-files-styles.css" rel="stylesheet" type="text/css">
</head>
<body style="background:transparent; background-color:black;">
<br><br><br><br><br>
<br><br><br><br><br>
<!--
<div style="background:black;" id="contmain">
<div style="background:black;" id="main">
-->
<!-- start header -->
<div xstyle="background-color:black;" id="header">
<!--
<canvas id="canvas" width="980" height="500" style="position:absolute; top:0; left:60px;"></canvas>
-->
<canvas id="canvas" width="1020" height="750" style="position:absolute; top:0px; left:0px; margin:0px;"></canvas>
<!--
<a href="http://www.chromeexperiments.com/detail/physicsketch/" target="_blank" style="position:absolute; top:0px; left:70px;"><img src="sample-collect-hush-js-sketch-files-badge-black_black.png" alt="See my Experiment on ChromeExperiments.com" style="border:none;"></a>
-->
<a href="http://www.chromeexperiments.com/detail/physicsketch/" target="_blank" style="position:absolute; top:0px; left:70px;"><font color=silver>chrome experiment(s)</font></a>
<!-- start sidebar two -->
<div style="background:black;" id="sidebar2" class="sidebar">
<ul>
<li>
<!--
<h2>World</h2>
-->
<div class="title-back" style="background:black;">
<button xstyle="background:black;" onclick="javascript:toggleTimer(this);">stop timer</button>
<button xstyle="background:black;" onclick="javascript:toggleBodyVisibility(this);">show physical body</button>
<table>
<tbody bgcolor=black><tr>
<td class="label">stroke</td><td id="color" class="value">
<select id="stroke-color" onchange="javascript:changeStrokeColor(this.value);">
<option value="#00FFFF" style="background-color:#00FFFF;">aqua</option>
<option value="#0000FF" style="background-color:#0000FF; color:silver;">blue</option>
<option value="#A52A2A" style="background-color:#A52A2A; color:silver;">brown</option>
<option value="#00008B" style="background-color:#00008B; color:silver;">darkblue</option>
<option value="#008B8B" style="background-color:#008B8B; color:silver;">darkcyan</option>
<option value="#A9A9A9" style="background-color:#A9A9A9;" selected="true">darkgray</option>
<option value="#008000" style="background-color:#008000; color:silver;">green</option>
<option value="#FF69B4" style="background-color:#FF69B4;">hotpink</option>
<option value="#800080" style="background-color:#800080; color:silver;">purple</option>
<option value="#FF0000" style="background-color:#FF0000;">red</option>
<option value="#FFFF00" style="background-color:#FFFF00;">yellow</option>
<option value="#FFFFFF" style="background-color:#FFFFFF;">white</option>
<option value="#000000" style="background-color:#000000; color:silver;">black</option>
</select>
</td>
</tr>
<!--
<tr>
<td class="label">selected stroke</td><td id="color" class="value">
<select id="selected-stroke-color" onchange="javascript:changeSelectedStrokeColor(this.value);">
<option value="#00FFFF" style="background-color:#00FFFF;">aqua</option>
<option value="#0000FF" style="background-color:#0000FF; color:silver;">blue</option>
<option value="#A52A2A" style="background-color:#A52A2A; color:silver;">brown</option>
<option value="#00008B" style="background-color:#00008B; color:silver;">darkblue</option>
<option value="#008B8B" style="background-color:#008B8B; color:silver;">darkcyan</option>
<option value="#A9A9A9" style="background-color:#A9A9A9;">darkgray</option>
<option value="#008000" style="background-color:#008000; color:silver;">green</option>
<option value="#FF69B4" style="background-color:#FF69B4;">hotpink</option>
<option value="#800080" style="background-color:#800080; color:silver;">purple</option>
<option value="#FF0000" style="background-color:#FF0000;" selected="true">red</option>
<option value="#FFFF00" style="background-color:#FFFF00;">yellow</option>
<option value="#FFFFFF" style="background-color:#FFFFFF;">white</option>
<option value="#000000" style="background-color:#000000; color:silver;">black</option>
</select>
</td>
</tr>
-->
</tbody></table>
</div>
</li>
<li id="body-inspector" style="display: none; ">
<h2>selected Body</h2>
<div class="title-back">
<table>
<tbody><tr><td class="label">Left</td><td class="value"><span id="position-x"></span>px</td></tr>
<tr><td class="label">Top</td><td class="value"><span id="position-y"></span>px</td></tr>
<tr><td class="label">Angle</td><td class="value"><span id="angle"></span>deg</td></tr>
<tr>
<td class="label">Fill Color</td><td id="color" class="value">
<select id="body-color" onchange="javascript:changeFillColor(this.value);">
<option value="#EEEEFF" style="background-color:#EEEEFF;">Default</option>
<option value="#00FFFF" style="background-color:#00FFFF;">Aqua</option>
<option value="#0000FF" style="background-color:#0000FF; color:white;">Blue</option>
<option value="#A52A2A" style="background-color:#A52A2A; color:white;">Brown</option>
<option value="#00008B" style="background-color:#00008B; color:white;">Darkblue</option>
<option value="#008B8B" style="background-color:#008B8B; color:white;">Darkcyan</option>
<option value="#A9A9A9" style="background-color:#A9A9A9;">Darkgray</option>
<option value="#008000" style="background-color:#008000; color:white;">Green</option>
<option value="#FF69B4" style="background-color:#FF69B4;">Hotpink</option>
<option value="#800080" style="background-color:#800080; color:white;">Purple</option>
<option value="#FF0000" style="background-color:#FF0000;">Red</option>
<option value="#FFFF00" style="background-color:#FFFF00;">Yellow</option>
<option value="#FFFFFF" style="background-color:#FFFFFF;">White</option>
<option value="#000000" style="background-color:#000000; color:white;">Black</option>
</select>
</td>
</tr>
</tbody></table>
<!--button onclick="javascript:void()">Copy</button-->
<button onclick="javascript:deleteSelectedBody()">Delete</button>
</div>
</li>
</ul>
</div><!-- end sidebar two -->
<div id="timer" style="-webkit-transform: rotate(358deg); "></div>
</div>
<div style="background:black;" id="title">p h y s i c S k e t c h</div>
<!-- end header -->
<!-- start page -->
<div style="background:black;" id="page">
<!-- start content -->
<div id="content">
<div class="boxes">
<div class="box-l">
<div class="box2-l">
<h4>About physicSketch</h4><br>
<p>I inspired this demo by <a href="http://www.youtube.com/watch?v=QsTqspnvAaI" target="_blank">a movie about the Crayon Physics</a>. As the movie shows, when you draw something on the above canvas, it starts moving under the Newtonian low.</p>
<p>This demo is using <a href="http://mrdoob.com/" target="_blank">Mr.doob</a>'s improving version of <a href="http://box2d-js.sourceforge.net/" target="_blank">Box2DJS</a>. Thanks Mr.doob!</p>
</div>
</div>
<div class="box-l">
<div class="box2-l">
<h4>How to Use</h4><br>
<table>
<tbody><tr>
<th>Timer Stop/Start</th>
<td>Click the `Stop/Start Timer' button.</td>
</tr>
<tr>
<th>Draw Line</th>
<td>Drag your mouse on the canvas. If the starting and the ending points are far enough, the track becomes connected lines.</td>
</tr>
<tr>
<th>Draw Filled Body</th>
<td>Drag your mouse on the canvas. If the starting and the ending points are near each other, the track becomes a filled body. Note that you stroke must be convex. If not, the displayed line may not show its physical body.</td>
</tr>
<tr>
<th>Show Physical Body</th>
<td>Click the `Show Physical Body' button.</td>
</tr>
<tr>
<th>Select Body</th>
<td>Click a body you want to select. The selected body is inspected and its information is shown on the lower sidebox. Note that the only one body can be selected.</td>
</tr>
<tr>
<th>Fix Body</th>
<td>Stop the timer, then click the point of the selected body you want to fix.</td>
</tr>
<tr>
<th>Connect Bodies</th>
<td>Stop the timer, then click the point in the cross area between two bodies you want to connect.</td>
</tr>
<tr>
<th>Move Body</th>
<td>Stop the timer and select one body, then the body can be dragged.</td>
</tr>
<!--tr>
<th>Copy Body</th>
<td>Click the `Copy' button, then the selected body is copied and it will come from the heaven.</td>
</tr-->
<tr>
<th>Delete Body</th>
<td>Click the `Delete' button to delete a selected body.</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="boxes">
<div class="box-r">
<div class="box2-r">
<h4>Screencast</h4><br>
<div style="text-align:center">
<object width="245" height="205"><param name="movie" value="http://www.youtube.com/v/yzvluxWAKJM&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/yzvluxWAKJM&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="245" height="205"></object>
</div>
</div>
</div>
<div class="box-r">
<div class="box2-r">
<h4>About the Author</h4><br>
<dl>
<dt>Name</dt><dd>ANDO Yasushi</dd>
<dt>Location</dt><dd>Kawasaki, Japan</dd>
<dt>Email</dt><dd>andyjpn _at_ gmail.com</dd>
<dt>Blog[ja]</dt><dd><a href="http://d.hatena.ne.jp/technohippy" target="_blank">d.hatena.ne.jp/technohippy</a></dd>
</dl>
</div>
</div>
</div>
</div>
<!-- end content -->
<div id="bottom" style="clear: both;"></div>
</div><!-- end page -->
<!-- start footer -->
<div id="footer">
<p>Copyright © 2009 ANDO Yasushi All Rights Reserved.</p>
<p>Design by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free Website Templates</a>
</p>
</div>
</div>
</div>
<!-- end footer -->
</body></html>
(C) Æliens
04/09/2009
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.
