Draw a "sliced" circle shape

Processing Coding Questions
1

Hello, I’m working on a project to create “sliced” circle, so that each slice would be separate shape so I would be able to fill with color. .

Circle
Circle.PNG728×596 18.5 KB
. I’ve researched how circles are drawn with brazier’s but I can’t figure out how to create sliced shapes.

1 Like
2

why you want to do it that difficult?

make 10 differently colored rectangles
and mask it with a circle

color cmask, cline,ccirc;

void setup() {
  size(200, 200);
  colorMode(HSB, 100);
  cmask = color(100, 100, 100, 0);
  cline = color(50);
  ccirc = color(60,100,100);
  for (int i = 0; i <= 9; i++ ) {
    stroke(cline);
    fill(i*11, 100, 100);
    rect( 0, i * 20, width, 20);
  }
  fill(cmask);
  stroke(100);
  strokeWeight(100);
  circle(width/2, height/2, 290);
  noFill();
  strokeWeight(3);
  stroke(ccirc);
  circle(width/2, height/2, 189);
}

SNAG-0076
SNAG-0076.jpg693×498 57.5 KB

4 Likes
3

I’m new to processing and also I was trying to understand how to draw with vertices this kind of complex shapes.
I removed strokes from you code and trying to change color of background but it stays white. How should I control color of background in this case ?

color cmask, cline,ccirc;

void setup() {
  size(200, 200);
  background (3, 100, 200, 300);
  colorMode(HSB, 100);
  cmask = color(200, 200, 200, 0);
  for (int i = 0; i <= 9; i++ ) {
    noStroke();
    fill(i*11, 100, 100);
    rect( 0, i * 20, width, 20);
  }
  fill(cmask);
  stroke(100);
  strokeWeight(100);
  circle(width/2, height/2, 290);

}

Thank you !!!

1 Like
4

ok, sorry, ignore my example

there are several ways for curves,
all means that you need some math to calculate points position,
https://www.google.com/search?client=firefox-b-d&q=circlesegment
and a add difficult is the concept of control points
( not give a line to, but are responsible for the angle the last line ends )

also the concept of

a small tip,
if you want play with a example code you not

  • delete
  • modify

lines,
you copy and disable the original

// original
new modified code

this can save you in the progress lots of typing

2 Likes
5

with many points not even need curve,
https://processing.org/reference/vertex_.html
( what give you a series of (many) lines )
might do it too.
a example could be:

float posx, posy, radius = 80, ang, dang=0.01745329;

void setup() {
  size(200, 200);
  //colorMode(HSB, 100);
  stroke(0, 0, 200);
}

void draw() {
  background(200, 200, 0);
  translate(width/2, height/2);
  rotate(-PI/2.0);
  ang = 0;//-PI/2.0;
  beginShape();
  fill(0,200,0);
  for ( int i = 0; i <= 360; i++) {
    posx = radius * sin(ang);
    posy = radius * cos(ang);
    if ( sin(ang) > 0.6 && sin(ang) < 0.9 ) {
      stroke(0, 0, 200);
      circle(posx, posy, 2);
      vertex(posx,posy);
    } else { 
      stroke(100, 100, 100);
      point(posx, posy);
    }
    ang += dang;
  }
  endShape(CLOSE);
}

SNAG-0080

2 Likes
6

Thank you so much, You really helped me to start working on that!!!

2 Likes