examples/Circle3Points_pjs.html

<!doctype html>
<html lang="en">
<head>
	<title>Circle 3 Points  - 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>
</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="text/processing" data-processing-target="myCanvas">
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>