Processing 1.0 - Processing Discourse - circle + control points

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › circle + control points

‹ Previous Topic | Next Topic ›

Pages: 1

circle + control points (Read 259 times)

leanderlike

circle + control points
Oct 29^th, 2008, 4:40pm

hello,

i want to draw a circle with four control points. At 0°/360°, 90°, 180° and 270°.
I tried to realised it with ellipse (), but this gives me no control over any point on the ellipse.

So I tried
beginShape();
strokeWeight(1);
curveVertex (350,200);
curveVertex (400,250);
curveVertex (400,250);
curveVertex (350,300);
curveVertex (350,300);
curveVertex (300,250);
curveVertex (300,250);
curveVertex (350,200);
endShape();

but this gives me a triangle and not a circle...

maybe you know any option to get these four points. actually i want to place variables so that depending on their values the shape of the circle might change to an ellipse or so.

thanks for help!!

Ira

Re: circle + control points
Reply #1 - Oct 29^th, 2008, 4:50pm

/**Bézier implementation**/
Quote:

/**
* bezierVertex() circle
* By Ira Greenberg <br />
* Processing for Flash Developers,
* Friends of ED, 2009
*/

int detail = 4;
PVector[] anchors = new PVector[detail];
PVector[] controlsRt = new PVector[detail];
PVector[] controlsLft = new PVector[detail];

void setup(){
  size(400, 400);
  background(200);
  translate(width/2, height/2);
  smooth();
  noFill();
  strokeWeight(3);
  rectMode(CENTER);
  calcCircle(150);
  drawCircle();
  showControls();
}

void calcCircle(float radius){
  /* cubic curve internal implementation
   only requires 4 anchor PVectors for circle*/

  // spacing of anchor PVectors
  float anchorTheta = 0;
  // spacing of control PVectors
  float controlTheta = TWO_PI/detail/3;
  // distance of control PVectors
  float controlRadius = radius/cos(controlTheta);
  // for anchors
  float px = 0;
  float py = 0;
  //for controls
  float cx1 = 0;
  float cy1 = 0;
  float cx2 = 0;
  float cy2 = 0;
  for (int i=0; i<detail; i++){
    // anchor PVectors
    px = cos(anchorTheta)*radius;
    py = sin(anchorTheta)*radius;
    anchors[i] = new PVector(px, py);

    // control PVectors
    cx1 = cos(anchorTheta+controlTheta)*controlRadius;
    cy1 = sin(anchorTheta+controlTheta)*controlRadius;
    controlsLft[i] = new PVector(cx1, cy1);
    cx2 = cos(anchorTheta+controlTheta*2)*controlRadius;
    cy2 = sin(anchorTheta+controlTheta*2)*controlRadius;
    controlsRt[i] = new PVector(cx2, cy2);
    // increment theta
    anchorTheta += TWO_PI/detail;
  }
}

void drawCircle(){
  beginShape();
  vertex(anchors[0].x, anchors[0].y);
  for (int i=0; i<detail; i++){
    if (i<detail-1){
      bezierVertex(controlsLft[i].x, controlsLft[i].y, controlsRt[i].x, controlsRt[i].y, anchors[i+1].x, anchors[i+1].y);
    }
    else {
      // close circle
      bezierVertex(controlsLft[i].x, controlsLft[i].y, controlsRt[i].x, controlsRt[i].y, anchors[0].x, anchors[0].y);
    }
  }
  endShape();
}

void showControls(){
  strokeWeight(1);
  fill(255);
  for (int i=0; i<detail; i++){
    line(controlsLft[i].x, controlsLft[i].y, anchors[i].x, anchors[i].y);
    if (i<detail-1){
      line(controlsRt[i].x, controlsRt[i].y, anchors[i+1].x, anchors[i+1].y);
    }
    else if (i==detail-1){
      line(controlsRt[i].x, controlsRt[i].y, anchors[0].x, anchors[0].y);
    }
  }
// ensure lines stay underneath anchors/controls
  for (int i=0; i<detail; i++){
    // anchor PVectors and control handles
    ellipse(controlsLft[i].x, controlsLft[i].y, 8, 8);
    ellipse(controlsRt[i].x, controlsRt[i].y, 8, 8);
    rect(anchors[i].x, anchors[i].y, 8, 8);
  }
}

Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas

Ira

Re: circle + control points
Reply #2 - Oct 29^th, 2008, 4:52pm

/**spline implementation**/
Quote:

/**
* curve() circle
* By Ira Greenberg <br />
* Processing for Flash Developers,
* Friends of ED, 2009
*/

float x, y;
PVector[] vecs = new PVector[4];

void setup(){
size(300, 300);
smooth();
noFill();
strokeWeight(4);
// controls curvature of spline
curveTightness(-.7);
translate(150, height/2);
calcCircle(125);
drawCircle();
drawVecs();
}

void calcCircle(float radius){
float px=0, py=0, theta=0;
for (int i=0; i<4; i++){
px = cos(theta)*radius;
py = sin(theta)*radius;
vecs[i] = new PVector(px, py);
theta+=TWO_PI/4;
}
}

void drawCircle(){
// the loooong hand way
curve(vecs[3].x, vecs[3].y, vecs[0].x, vecs[0].y, vecs[1].x, vecs[1].y, vecs[2].x, vecs[2].y);
curve(vecs[0].x, vecs[0].y, vecs[1].x, vecs[1].y, vecs[2].x, vecs[2].y, vecs[3].x, vecs[3].y);
curve(vecs[1].x, vecs[1].y, vecs[2].x, vecs[2].y, vecs[3].x, vecs[3].y, vecs[0].x, vecs[0].y);
curve(vecs[2].x, vecs[2].y, vecs[3].x, vecs[3].y, vecs[0].x, vecs[0].y, vecs[1].x, vecs[1].y);
}

void drawVecs(){
fill(255);
strokeWeight(1);
for (int i=0; i<4; i++){
ellipse(vecs[i].x, vecs[i].y, 8, 8);
}
}

Pages: 1

‹ Previous Topic | Next Topic ›