Permalink
Browse files

major commit, several new core classes and a build file

  • Loading branch information...
1 parent 931dd34 commit e41fe991f9b7d89c2299dff7d527a917804d4703 @hapticdata hapticdata committed Apr 6, 2011
View
@@ -0,0 +1,109 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+ <title>Wheel Insets - toxiclibs.js examples</title>
+ <meta name="author" content="Kyle Phillips">
+ <link href="css/style.css" rel="stylesheet" type="text/css">
+ <!-- Date: 2011-01-09 -->
+ <script type="text/javascript" src="../build/toxiclibs.js"></script>
+ <script src="../src/core/geom/Ellipse.js"></script>
+ <script src="../src/core/geom/Circle.js"></script>
+ <script type="text/javascript" src="js/processing.js"></script>
+ <script>
+ /*
+ * This code searches for all the <script type="application/processing" target="canvasid">
+ * in your page and loads each script in the target canvas with the proper id.
+ * It is useful to smooth the process of adding Processing code in your page and starting
+ * the Processing.js engine.
+ */
+
+ if (window.addEventListener) {
+ window.addEventListener("load", function() {
+ var scripts = document.getElementsByTagName("script");
+ var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
+ var canvas;
+ for (var i = 0, j = 0; i < scripts.length; i++) {
+ if (scripts[i].type == "application/processing") {
+ var src = scripts[i].getAttribute("target");
+ if (src && src.indexOf("#") > -1) {
+ canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
+ if (canvas) {
+ new Processing(canvas, scripts[i].text);
+ for (var k = 0; k< canvasArray.length; k++)
+ {
+ if (canvasArray[k] === canvas) {
+ // remove the canvas from the array so we dont override it in the else
+ canvasArray.splice(k,1);
+ }
+ }
+ }
+ } else {
+ if (canvasArray.length >= j) {
+ new Processing(canvasArray[j], scripts[i].text);
+ }
+ j++;
+ }
+ }
+ }
+ }, false);
+ }
+
+ </script>
+</head>
+<body class="container_12">
+ <header class="grid_12">
+ <hgroup>
+ <h1>Circle From 3 Points</h1><h2>w/ <a href="http://processingjs.org">Processing.js</a></h2>
+ </hgroup>
+ </header>
+<script type="application/processing">
+
+AbstractWave wave1=new toxi.SineWave(0,0.02,100,200);
+AbstractWave wave2=new toxi.SineWave(0,0.023,100,200);
+
+void setup() {
+ size(940, 382);
+ smooth();
+ stroke(#330077);
+ noFill();
+ ellipseMode(RADIUS); //this changes ellipse 3rd & 4th parameter to being radius instead of diameter
+}
+
+void draw() {
+ background(#cceeff);
+ toxi.Vec2D p1 = new toxi.Vec2D(200, wave1.update());
+ toxi.Vec2D p2 = new toxi.Vec2D(400, wave2.update());
+ toxi.Vec2D p3 = new toxi.Vec2D(mouseX, mouseY);
+ toxi.Circle circle = toxi.Circle.from3Points(p1, p2, p3);
+ if (circle != undefined) {
+ ellipse(circle.x,circle.y,circle.getRadius(),circle.getRadius());
+ ellipse(p1.x,p1.y,3,3);
+ ellipse(p2.x,p2.y,3,3);
+ ellipse(p3.x,p3.y,3,3);
+ }
+}
+</script>
+
+<canvas id="myCanvas" width="200" height="200">
+ your browser doesnt support canvas
+</canvas>
+<section id="details" class="grid_12">
+<aside id="authors" class="grid_6">
+<p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
+ Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
+</aside>
+<aside id="usage" class="grid_6">
+<p><strong>Usage:</strong><ul>
+<li>move mouse to move one of the 3 points</li>
+</ul></p>
+</aside>
+<article id="description" class="grid_9">
+<p>
+This example demonstrates the construction of a circle through 3 given points.
+You can specify one of the points using your mouse, the other two are moved automatically.
+</p>
+</article>
+</section>
+</body>
+</html>
Oops, something went wrong. Retry.

0 comments on commit e41fe99

Please sign in to comment.