Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 85e34be7ce
Fetching contributors…

Cannot retrieve contributors at this time

68 lines (64 sloc) 2.216 kb
<!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>
Jump to Line
Something went wrong with that request. Please try again.