Issue by firlifanz
Saturday May 10, 2014 at 20:51 GMT
Originally opened as processing/processing-web-archive#417
I tried to create a ring using beginContour and endContour. I found out, that it is important to draw the outer shape e.g. in clockwise direction and the inner shape in counter clockwise direction to create a hole in the shape. I think this fact should be mentioned in the reference.
Demo Sketch:
/** RingDemo may/10/2014 by Peter Bosshard Schneider
- A contribution to the reference of processing stating that it is important
- to draw the inner contour of a combined shape counter clockwise to the outer shape.*/
float inner_radius, outer_radius; // inner and outer radius
float cp1_x, cp2_x, cp3_x, cp4_x; // control points x
float cp1_y, cp2_y, cp3_y, cp4_y; // control points y
float ap1_x, ap2_x, ap3_x, ap4_x; // anchor points x
float ap1_y, ap2_y, ap3_y, ap4_y; // anchor points y
float cx_1, cx_2, cy_1, cy_2; // center of the rings
float ring_width = 50; // ring width
float cpd = 8; // control points diameter
float apd = 10; // anchor points diameter
void setup() {
size(600, 300);
background(0);
// outer and inner radius of the rings
outer_radius = width*0.2;
inner_radius = outer_radius - ring_width;
// center of the rings
cx_1 = width/4;
cx_2 = width/4*3;
cy_1 = cy_2 = height/2;
}
void draw() {
background(0);
rectMode(CENTER);
//draw a rectangle in the background
fill(0,180,255);
noStroke();
rect(width/2,height/2,width_0.6,height_0.6);
// left ring
pushMatrix();
translate(cx_1, cy_1);
//outer circle
ap1_x = 0;
ap1_y = -outer_radius;
ap2_x = outer_radius;
ap2_y = 0;
ap3_x = 0;
ap3_y = outer_radius;
ap4_x = -outer_radius;
ap4_y = 0;
cp1_x = -outer_radius;
cp1_y = -outer_radius;
cp2_x = outer_radius;
cp2_y = -outer_radius;
cp3_x = outer_radius;
cp3_y = outer_radius;
cp4_x = -outer_radius;
cp4_y = outer_radius;
// draw achor points of left outercircle
noFill();
stroke(0, 255, 0);
ellipse(ap1_x, ap1_y, apd, apd);
ellipse(ap2_x, ap2_y, apd, apd);
ellipse(ap3_x, ap3_y, apd, apd);
ellipse(ap4_x, ap4_y, apd, apd);
// draw control points of left outer circle
stroke(255, 0, 0);
ellipse(cp1_x, cp1_y, cpd, cpd);
ellipse(cp2_x, cp2_y, cpd, cpd);
ellipse(cp3_x, cp3_y, cpd, cpd);
ellipse(cp4_x, cp4_y, cpd, cpd);
// draw lines between anchor points and control points
stroke(255, 180, 0);
line(ap1_x, ap1_y, cp1_x, cp1_y);
line(ap2_x, ap2_y, cp2_x, cp2_y);
line(ap3_x, ap3_y, cp3_x, cp3_y);
line(ap4_x, ap4_y, cp4_x, cp4_y);
// draw outer circle clockwise
stroke(255);
fill(153,100);
beginShape();
vertex(ap1_x, ap1_y);
bezierVertex(ap1_x, ap1_y, cp2_x, cp2_y, ap2_x, ap2_y);
bezierVertex(ap2_x, ap2_y, cp3_x, cp3_y, ap3_x, ap3_y);
bezierVertex(ap3_x, ap3_y, cp4_x, cp4_y, ap4_x, ap4_y);
bezierVertex(ap4_x, ap4_y, cp1_x, cp1_y, ap1_x, ap1_y);
// inner left circle
ap1_x = 0;
ap1_y = -inner_radius;
ap2_x = inner_radius;
ap2_y = 0;
ap3_x = 0;
ap3_y = inner_radius;
ap4_x = -inner_radius;
ap4_y = 0;
cp1_x = -inner_radius;
cp1_y = -inner_radius;
cp2_x = inner_radius;
cp2_y = -inner_radius;
cp3_x = inner_radius;
cp3_y = inner_radius;
cp4_x = -inner_radius;
cp4_y = inner_radius;
beginContour();
// draw inner circle clockwise
vertex(ap1_x, ap1_y);
bezierVertex(ap1_x, ap1_y, cp2_x, cp2_y, ap2_x, ap2_y);
bezierVertex(ap2_x, ap2_y, cp3_x, cp3_y, ap3_x, ap3_y);
bezierVertex(ap3_x, ap3_y, cp4_x, cp4_y, ap4_x, ap4_y);
bezierVertex(ap4_x, ap4_y, cp1_x, cp1_y, ap1_x, ap1_y);
endContour();
endShape(CLOSE);
// draw achor points of left inner circle
noFill();
stroke(0, 255, 0);
ellipse(ap1_x, ap1_y, apd, apd);
ellipse(ap2_x, ap2_y, apd, apd);
ellipse(ap3_x, ap3_y, apd, apd);
ellipse(ap4_x, ap4_y, apd, apd);
// draw control points of left inner circle
stroke(255, 0, 0);
ellipse(cp1_x, cp1_y, cpd, cpd);
ellipse(cp2_x, cp2_y, cpd, cpd);
ellipse(cp3_x, cp3_y, cpd, cpd);
ellipse(cp4_x, cp4_y, cpd, cpd);
// draw lines between anchor points and control points
stroke(255, 180, 0);
line(ap1_x, ap1_y, cp1_x, cp1_y);
line(ap2_x, ap2_y, cp2_x, cp2_y);
line(ap3_x, ap3_y, cp3_x, cp3_y);
line(ap4_x, ap4_y, cp4_x, cp4_y);
popMatrix();
///////////////////////////////////////////////////////////
// right ring
pushMatrix();
translate(cx_2, cy_2);
//outer circle
ap1_x = 0;
ap1_y = -outer_radius;
ap2_x = outer_radius;
ap2_y = 0;
ap3_x = 0;
ap3_y = outer_radius;
ap4_x = -outer_radius;
ap4_y = 0;
cp1_x = -outer_radius;
cp1_y = -outer_radius;
cp2_x = outer_radius;
cp2_y = -outer_radius;
cp3_x = outer_radius;
cp3_y = outer_radius;
cp4_x = -outer_radius;
cp4_y = outer_radius;
// draw outer circle clockwise
// draw achor points of right outercircle
noFill();
stroke(0, 255, 0);
ellipse(ap1_x, ap1_y, apd, apd);
ellipse(ap2_x, ap2_y, apd, apd);
ellipse(ap3_x, ap3_y, apd, apd);
ellipse(ap4_x, ap4_y, apd, apd);
// draw control points of left outer circle
stroke(255, 0, 0);
ellipse(cp1_x, cp1_y, cpd, cpd);
ellipse(cp2_x, cp2_y, cpd, cpd);
ellipse(cp3_x, cp3_y, cpd, cpd);
ellipse(cp4_x, cp4_y, cpd, cpd);
// draw lines between anchor points and control points
stroke(255, 180, 0);
line(ap1_x, ap1_y, cp1_x, cp1_y);
line(ap2_x, ap2_y, cp2_x, cp2_y);
line(ap3_x, ap3_y, cp3_x, cp3_y);
line(ap4_x, ap4_y, cp4_x, cp4_y);
// draw right outer circle
stroke(255);
fill(153,100);
beginShape();
vertex(ap1_x, ap1_y);
bezierVertex(ap1_x, ap1_y, cp2_x, cp2_y, ap2_x, ap2_y);
bezierVertex(ap2_x, ap2_y, cp3_x, cp3_y, ap3_x, ap3_y);
bezierVertex(ap3_x, ap3_y, cp4_x, cp4_y, ap4_x, ap4_y);
bezierVertex(ap4_x, ap4_y, cp1_x, cp1_y, ap1_x, ap1_y);
ap1_x = 0;
ap1_y = -inner_radius;
ap2_x = -inner_radius;
ap2_y = 0;
ap3_x = 0;
ap3_y = inner_radius;
ap4_x = inner_radius;
ap4_y = 0;
cp1_x = inner_radius;
cp1_y = -inner_radius;
cp2_x = -inner_radius;
cp2_y = -inner_radius;
cp3_x = -inner_radius;
cp3_y = inner_radius;
cp4_x = inner_radius;
cp4_y = inner_radius;
// draw right inner circle counter clockwise
beginContour();
vertex(ap1_x, ap1_y);
bezierVertex(ap1_x, ap1_y, cp2_x, cp2_y, ap2_x, ap2_y);
bezierVertex(ap2_x, ap2_y, cp3_x, cp3_y, ap3_x, ap3_y);
bezierVertex(ap3_x, ap3_y, cp4_x, cp4_y, ap4_x, ap4_y);
bezierVertex(ap4_x, ap4_y, cp1_x, cp1_y, ap1_x, ap1_y);
endContour();
endShape(CLOSE);
// draw achor points of right inner circle
noFill();
stroke(0, 255, 0);
ellipse(ap1_x, ap1_y, apd, apd);
ellipse(ap2_x, ap2_y, apd, apd);
ellipse(ap3_x, ap3_y, apd, apd);
ellipse(ap4_x, ap4_y, apd, apd);
// draw control points of left inner circle
stroke(255, 0, 0);
ellipse(cp1_x, cp1_y, cpd, cpd);
ellipse(cp2_x, cp2_y, cpd, cpd);
ellipse(cp3_x, cp3_y, cpd, cpd);
ellipse(cp4_x, cp4_y, cpd, cpd);
// draw lines between anchor points and control points
stroke(255, 180, 0);
line(ap1_x, ap1_y, cp1_x, cp1_y);
line(ap2_x, ap2_y, cp2_x, cp2_y);
line(ap3_x, ap3_y, cp3_x, cp3_y);
line(ap4_x, ap4_y, cp4_x, cp4_y);
popMatrix();
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent