topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
#javascript-processing-example-basic-form-bezierellipse.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>BezierEllipse</h2>
  
  <p>By Ira Greenberg 
  
  Generates an ellipse using bezier() and
  trig functions. Approximately every 1/2 
  second a new ellipse is plotted using 
  random values for control/anchor points.</p>
  
  <p><a href="http://processing.org/learning/basics/bezierellipse.html"><b>Original Processing.org Example:</b> BezierEllipse</a><br>
  <script type="application/processing">
  // arrays to hold ellipse coordinate data
  float[] px, py, cx, cy, cx2, cy2;
  
  // global variable-points in ellipse
  int pts = 4;
  
  color controlPtCol = #222222;
  color anchorPtCol = #BBBBBB;
  
  void setup(){
    size(200, 200);
    smooth();
    setEllipse(pts, 65, 65);
    frameRate(0.5);
  }
  
  void draw(){
    background(145);
    drawEllipse();
    setEllipse(int(random(3, 12)), random(-100, 150), random(-100, 150));
  }
  
  // draw ellipse with anchor/control points
  void drawEllipse(){
    strokeWeight(1.125);
    stroke(255);
    noFill();
    // create ellipse
    for (int i=0; i<pts; i++){
      if (i==pts-1) {
        bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i],  px[0], py[0]);
      }
      else{
        bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i],  px[i+1], py[i+1]);
      }
    }
    strokeWeight(.75);
    stroke(0);
    rectMode(CENTER);
  
    // control handles and tangent lines
    for ( int i=0; i< pts; i++){
      if (i==pts-1){  // last loop iteration-close path
        line(px[0], py[0], cx2[i], cy2[i]);
      }
      if (i>0){
        line(px[i], py[i], cx2[i-1], cy2[i-1]);
      }
      line(px[i], py[i], cx[i], cy[i]);
    }
  
    for ( int i=0; i< pts; i++){
      fill(controlPtCol);
      noStroke();
      //control handles
      ellipse(cx[i], cy[i], 4, 4);
      ellipse(cx2[i], cy2[i], 4, 4);
  
      fill(anchorPtCol);
      stroke(0);
      //anchor points
      rect(px[i], py[i], 5, 5);
    }
  }
  
  // fill up arrays with ellipse coordinate data
  void setEllipse(int points, float radius, float controlRadius){
    pts = points;
    px = new float[points];
    py = new float[points];
    cx = new float[points];
    cy = new float[points];
    cx2 = new float[points];
    cy2 = new float[points];
    float angle = 360.0/points;
    float controlAngle1 = angle/3.0;
    float controlAngle2 = controlAngle1*2.0;
    for ( int i=0; i<points; i++){
      px[i] = width/2+cos(radians(angle))*radius;
      py[i] = height/2+sin(radians(angle))*radius;
      cx[i] = width/2+cos(radians(angle+controlAngle1))* 
        controlRadius/cos(radians(controlAngle1));
      cy[i] = height/2+sin(radians(angle+controlAngle1))* 
        controlRadius/cos(radians(controlAngle1));
      cx2[i] = width/2+cos(radians(angle+controlAngle2))* 
        controlRadius/cos(radians(controlAngle1));
      cy2[i] = height/2+sin(radians(angle+controlAngle2))* 
        controlRadius/cos(radians(controlAngle1));
  
      //increment angle so trig functions keep chugging along
      angle+=360.0/points;
    }
  }
  </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>
  // arrays to hold ellipse coordinate data
  float[] px, py, cx, cy, cx2, cy2;
  
  // global variable-points in ellipse
  int pts = 4;
  
  color controlPtCol = #222222;
  color anchorPtCol = #BBBBBB;
  
  void setup(){
    size(200, 200);
    smooth();
    setEllipse(pts, 65, 65);
    frameRate(0.5);
  }
  
  void draw(){
    background(145);
    drawEllipse();
    setEllipse(int(random(3, 12)), random(-100, 150), random(-100, 150));
  }
  
  // draw ellipse with anchor/control points
  void drawEllipse(){
    strokeWeight(1.125);
    stroke(255);
    noFill();
    // create ellipse
    for (int i=0; i&lt;pts; i++){
      if (i==pts-1) {
        bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i],  px[0], py[0]);
      }
      else{
        bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i],  px[i+1], py[i+1]);
      }
    }
    strokeWeight(.75);
    stroke(0);
    rectMode(CENTER);
  
    // control handles and tangent lines
    for ( int i=0; i&lt; pts; i++){
      if (i==pts-1){  // last loop iteration-close path
        line(px[0], py[0], cx2[i], cy2[i]);
      }
      if (i&gt;0){
        line(px[i], py[i], cx2[i-1], cy2[i-1]);
      }
      line(px[i], py[i], cx[i], cy[i]);
    }
  
    for ( int i=0; i&lt; pts; i++){
      fill(controlPtCol);
      noStroke();
      //control handles
      ellipse(cx[i], cy[i], 4, 4);
      ellipse(cx2[i], cy2[i], 4, 4);
  
      fill(anchorPtCol);
      stroke(0);
      //anchor points
      rect(px[i], py[i], 5, 5);
    }
  }
  
  // fill up arrays with ellipse coordinate data
  void setEllipse(int points, float radius, float controlRadius){
    pts = points;
    px = new float[points];
    py = new float[points];
    cx = new float[points];
    cy = new float[points];
    cx2 = new float[points];
    cy2 = new float[points];
    float angle = 360.0/points;
    float controlAngle1 = angle/3.0;
    float controlAngle2 = controlAngle1*2.0;
    for ( int i=0; i&lt;points; i++){
      px[i] = width/2+cos(radians(angle))*radius;
      py[i] = height/2+sin(radians(angle))*radius;
      cx[i] = width/2+cos(radians(angle+controlAngle1))* 
        controlRadius/cos(radians(controlAngle1));
      cy[i] = height/2+sin(radians(angle+controlAngle1))* 
        controlRadius/cos(radians(controlAngle1));
      cx2[i] = width/2+cos(radians(angle+controlAngle2))* 
        controlRadius/cos(radians(controlAngle1));
      cy2[i] = height/2+sin(radians(angle+controlAngle2))* 
        controlRadius/cos(radians(controlAngle1));
  
      //increment angle so trig functions keep chugging along
      angle+=360.0/points;
    }
  }</pre>
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
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.