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 › Programs › Drawing a circular shape out of vertex curves
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Drawing a circular shape out of vertex curves (Read 691 times)
ff10
Drawing a circular shape out of vertex curves
Jun 13th, 2009, 4:32am  
Hi guys,

I am sure that there is a simple solution, but I tried a few times and I still don't get rid of the "hole" in my circular shape:


Code:
int counter;
float xcFirst = 0;
float ycFirst = 0;
PGraphics pg;


void setup() {
  frameRate(60);
  background(0);
  size(800, 600);
  pg = createGraphics(800, 600, P3D);
}
 
  
void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.beginShape();
  counter = 0;
  for (int angle = 0; angle < 361; angle +=  36) {

	pg.fill(100, 255, 255, 100);
	
	float xc = cos(radians(angle)) * random(90, 100) + width/2;
	float yc = sin(radians(angle)) * random(90, 100) + height/2;
	pg.curveVertex(xc, yc);
	//pg.point(xc, yc);
	if (counter == 1) {
	  xcFirst = xc;
	  ycFirst = yc;
	}
	counter++;
 
    if (angle > 359) {
	//pg.point(xcFirst, ycFirst);
	pg.curveVertex(xcFirst, ycFirst);
	//pg.vertex(xcFirst, ycFirst);
    }
    
  }
  pg.endShape();
  pg.endDraw();
  image(pg, 0, 0);
}


I thought I just have to connect the last control point to the first one, but all I get is a straight line... I think it has something to do with the pairing/grouping of the curve points...
Back to top
 
 
martin_p
Re: Drawing a circular shape out of vertex curves
Reply #1 - Jun 13th, 2009, 5:29am  
I think you are right on the pairing, grouping of curveVertex points, I think just adding another point (ie 360 + 36) might help also endShape(CLOSE); I'm not sure what you are trying to do with the greater than 359 code, was that a fix that did not work. If it is any comfort I had the same issue when drawing a nautilus shape. Emprical solution just add another point, does not look terribly elegant though.
Back to top
 
WWW  
eskimoblood
Re: Drawing a circular shape out of vertex curves
Reply #2 - Jun 13th, 2009, 5:55am  
You have to add the first 3 points at the and of your loop to get circle close smoothly.
Back to top
 
Andreas Köberle {eskimoblood}
222550793  
PhiLho 
Re: Drawing a circular shape out of vertex curves
Reply #3 - Jun 13th, 2009, 6:49am  
I always have some difficulties with these vertices. I added some visual help, but I am still not sure how to finish properly the circle.
Code:
PGraphics pg;
int currentAngle = 0;
int ANGLE_STEP = 36;

void setup() {
  frameRate(60);
  background(0);
  size(800, 600);
  pg = createGraphics(800, 600, P3D);
  frameRate(1);
}
  
void draw() {
  println(currentAngle);
  float xcFirst = GetXPosition(0);
  float ycFirst = GetYPosition(0);
  float xc = 0, yc = 0;
  pg.beginDraw();
  pg.background(0);
  pg.fill(#FF0000);
  pg.ellipse(xcFirst, ycFirst, 8, 8);
  pg.stroke(255);

  pg.fill(100, 255, 255, 100);
  pg.beginShape();
  pg.curveVertex(xcFirst, ycFirst);
  for (int angle = ANGLE_STEP; angle < currentAngle; angle += ANGLE_STEP) {
    xc = GetXPosition(angle);
    yc = GetYPosition(angle);
    pg.curveVertex(xc, yc);
  }
  pg.vertex(xcFirst, ycFirst);
  pg.endShape();
  pg.fill(#FFFF00);
  pg.ellipse(xc, yc, 8, 8);
  pg.endDraw();
  image(pg, 0, 0);
  if (currentAngle < 361)
    currentAngle += ANGLE_STEP;
} 

float GetXPosition(float angle)
{
  return cos(radians(angle)) * random(90, 100) + width/2;
}
float GetYPosition(float angle)
{
  return sin(radians(angle)) * random(90, 100) + height/2;
}
Back to top
 
WWW  
PhiLho 
Re: Drawing a circular shape out of vertex curves
Reply #4 - Jun 13th, 2009, 6:54am  
Looks better:
Code:
void draw() {
  println(currentAngle);
  float xcFirst = GetXPosition(0);
  float ycFirst = GetYPosition(0);
  float xc = 0, yc = 0;
  pg.beginDraw();
  pg.background(0);
  pg.fill(#FF0000);
  pg.ellipse(xcFirst, ycFirst, 8, 8);
  pg.stroke(255);

  pg.fill(100, 255, 255, 100);
  pg.beginShape();
  pg.vertex(xcFirst, ycFirst);
  pg.curveVertex(xcFirst, ycFirst);
  pg.curveVertex(xcFirst, ycFirst);
  for (int angle = ANGLE_STEP; angle < currentAngle; angle += ANGLE_STEP) {
    xc = GetXPosition(angle);
    yc = GetYPosition(angle);
    pg.curveVertex(xc, yc);
  }
  pg.curveVertex(xcFirst, ycFirst);
  pg.endShape();
  pg.fill(#FFFF00);
  pg.ellipse(xc, yc, 8, 8);
  pg.endDraw();
  image(pg, 0, 0);
  if (currentAngle < 361)
    currentAngle += ANGLE_STEP;
}

so the code you look for should be:
Code:
PGraphics pg;
int ANGLE_STEP = 36;

void setup() {
  frameRate(60);
  background(0);
  size(800, 600);
  pg = createGraphics(800, 600, P3D);
}
  
void draw() {
  float xcFirst = GetXPosition(0);
  float ycFirst = GetYPosition(0);
  float xc = 0, yc = 0;
  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.fill(100, 255, 255, 100);
  pg.beginShape();
  pg.vertex(xcFirst, ycFirst);
  pg.curveVertex(xcFirst, ycFirst);
  pg.curveVertex(xcFirst, ycFirst);
  for (int angle = ANGLE_STEP; angle < 361; angle += ANGLE_STEP) {
    xc = GetXPosition(angle);
    yc = GetYPosition(angle);
    pg.curveVertex(xc, yc);
  }
  pg.curveVertex(xcFirst, ycFirst);
  pg.vertex(xcFirst, ycFirst);
  pg.endShape();
  pg.endDraw();
  image(pg, 0, 0);
} 

float GetXPosition(float angle)
{
  return cos(radians(angle)) * random(90, 100) + width/2;
}
float GetYPosition(float angle)
{
  return sin(radians(angle)) * random(90, 100) + height/2;
}

although the end of loop isn't very nice.
Back to top
 
WWW  
ff10
Re: Drawing a circular shape out of vertex curves
Reply #5 - Jun 13th, 2009, 10:37am  
Great, thanks to all for your help!  Smiley

@martin: Yeah, that was a remainder of my fiddling, sorry for any confusion!

@PhiLho: Thanks for your effort, this illustrated animation was very nice. But as you said, the end is not very tempting.

@eskimoblood: Thanks, that was the solution for me! Here is the code:

Code:
int counter;
float xc1 = 0;
float yc1 = 0;
float xc2 = 0;
float yc2 = 0;
float xc3 = 0;
float yc3 = 0;
PGraphics pg;


void setup() {
  frameRate(2);
  background(0);
  size(800, 600);
  pg = createGraphics(800, 600, P3D);
}
 
  
void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.beginShape();
  counter = 0;
  for (int angle = 0; angle < 360; angle +=  36) {

    pg.fill(150, 255, 255, 100);
    
    float xc = cos(radians(angle)) * random(90, 100) + width/2;
    float yc = sin(radians(angle)) * random(90, 100) + height/2;
    pg.curveVertex(xc, yc);
    if (counter == 0) {
      xc1 = xc;
      yc1 = yc;
    } else if (counter == 1) {
      xc2 = xc;
      yc2 = yc;
    } else if (counter == 2) {
      xc3 = xc;
      yc3 = yc;
    }
    counter++;
    
  }
  pg.curveVertex(xc1, yc1);
  pg.curveVertex(xc2, yc2);
  pg.curveVertex(xc3, yc3);
      
  pg.endShape();
  pg.endDraw();
  image(pg, 0, 0);
}


Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›