topical media & game development

talk show tell print

#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 &lt; 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.