topical media & game development
#javascript-processing-example-basic-form-bezier.htm / htm
<!DOCTYPE html>
<html><head>
<script src="javascript-processing-example-processing.js"></script>
<script src="javascript-processing-example-init.js"></script>
<link rel="stylesheet" href="javascript-processing-example-style.css">
</head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Bezier</h2>
<p>The first two parameters for the bezier() function specify the
first point in the curve and the last two parameters specify
the last point. The middle parameters set the control points
that define the shape of the curve.</p>
<p><a href="http://processing.org/learning/basics/bezier.html"><b>Original Processing.org Example:</b> Bezier</a><br>
<script type="application/processing">
size(200, 200);
background(0);
stroke(255);
noFill();
smooth();
for(int i = 0; i < 100; i += 20) {
bezier(90-(i/2.0), 20+i, 210, 10, 220, 150, 120-(i/8.0), 150+(i/4.0));
}
</script><canvas width="200" height="200"></canvas></p>
<div style="overflow: hidden; height: 0px; width: 0px;"></div>
<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
size(200, 200);
background(0);
stroke(255);
noFill();
smooth();
for(int i = 0; i < 100; i += 20) {
bezier(90-(i/2.0), 20+i, 210, 10, 220, 150, 120-(i/8.0), 150+(i/4.0));
}</pre>
</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.