# Draw a "sliced" circle shape
**URL:** https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524
**Category:** Coding Questions
**Created:** [April 21, 2019, 9:34pm UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524 "2019-04-21T21:34:02Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@smeskhishvili](https://discourse.processing.org/u/smeskhishvili)
#### Post date: [April 21, 2019, 9:34pm UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524/1 "2019-04-21T21:34:02Z")
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. .
. I’ve researched how circles are drawn with brazier’s but I can’t figure out how to create sliced shapes.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [April 22, 2019, 1:34am UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524/2 "2019-04-22T01:34:31Z")
why you want to do it that difficult?
make 10 differently colored rectangles
and mask it with a circle
```auto
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);
}
```
---
### Author:  [@smeskhishvili](https://discourse.processing.org/u/smeskhishvili)
#### Post date: [April 22, 2019, 6:54am UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524/3 "2019-04-22T06:54:18Z")
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 ?
```auto
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 !!!
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [April 22, 2019, 7:34am UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524/4 "2019-04-22T07:34:15Z")
> [@smeskhishvili](#):
>
> also I was trying to understand how to draw with vertices this kind of complex shapes
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](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 )
> **[curve() / Reference](https://processing.org/reference/curve_.html)**
>
> Draws a curved line on the screen. The first and second parameters specify the beginning control point and the last two parameters specify the ending control point. The middle parameters specify the s…
> **[bezier() / Reference](https://processing.org/reference/bezier_.html)**
>
> Draws a Bézier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the o…
> **[curveVertex() / Reference](https://processing.org/reference/curveVertex_.html)**
>
> Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The…
also the concept of
> **[createShape() / Reference](https://processing.org/reference/createShape_.html)**
>
> The createShape() function is used to define a new shape. Once created, this shape can be drawn with the shape() function. The basic way to use the function defines new primitive shapes.…
* * *
a small tip,
if you want play with a example code you not
- delete
- modify
lines,
you copy and disable the original
```auto
// original
new modified code
```
this can save you in the progress lots of typing
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [April 22, 2019, 8:06am UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524/5 "2019-04-22T08:06:10Z")
with many points not even need curve,
[https://processing.org/reference/vertex\_.html](https://processing.org/reference/vertex_.html)
( what give you a series of (many) lines )
might do it too.
a example could be:
```auto
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);
}
```
---
### Author:  [@smeskhishvili](https://discourse.processing.org/u/smeskhishvili)
#### Post date: [April 22, 2019, 8:14am UTC](https://discourse.processing.org/t/draw-a-sliced-circle-shape/10524/6 "2019-04-22T08:14:18Z")
Thank you so much, You really helped me to start working on that!!!