Fill a colour inside a shape

Question

I plotted a circle with an algorithm using point() function to plot each points in the circular arc. Then I used line() function to make different lines joining the arc & the center. My goal is to display a pie chart with different colors in the shapes inside. I can't even use beginshape() & endshape() function due to must-be-algorithm & I can't change the algorithm. I want some help adding colors inside the regions differentiated by the lines.

My code is

function setup() {
    var col=0;
    col=mouseX;
    // body...
    createCanvas(1280,720)
    translate(width/2, height/2)
    drawcircle(0 ,0, 200)
}


function drawcircle(xc , yc, r) {
    let p0;
    let xall = [];
    let yall = [];
    if(Number.isInteger(r))
        p0 = 1-r
    else
        p0 = 5/4 -r
    let x = 0, y = r;
    let pk = p0;
    while (x <= y) {
        if(pk<0){
            x=x+1;
            pk = pk + 2*x +1;
        } 
        else{
            x=x+1;
            y=y-1;
            pk = pk + 2*x -2*y +1;
        }
        displayCircle(x,y);
        displayCircle(x, -y);
        displayCircle(-x, y);
        displayCircle(-x, -y);
        displayCircle(y, x);
        displayCircle(y, -x);
        displayCircle(-y, x);
        displayCircle(-y, -x);
    }


    function displayCircle(x,y){
        let x2=x+xc;
        let y2=y+yc;
        console.log(x2,y2)
        point(x2,y2);
    }

    // body...
    line(xc, yc, x, y);
    line(xc, yc, -y, x);
    rotate(PI/3);
    line(xc, yc, y, x);
    rotate(-PI/3);
    rotate(PI+10)
    line(xc,yc, y, -x);
    rotate(-PI-10)
    rotate(-0.3)
    line(xc,yc, -x, -y)
    rotate(0.3)
}

I can't see how is it possible to color those regions, since they're formed by those lines, you may wanna draw a regular circle, and have those regions made using `beginShape() endShap()` — Rainbow, Jun 03 '18 at 01:02
I can't change the algortihm of plotting the circle. Is there any ways to do it maybe not using those line functions or any? — Prabin, Jun 03 '18 at 01:09
well you can keep the circle, and draw those regions using `beginShape() endShap()` — Rainbow, Jun 03 '18 at 01:11

score 0 · Answer 1 · answered Jun 03 '18 at 01:43

The easiest way to color these regions without changing the way the circle is being drawn is to create shapes using the arc() function.

https://p5js.org/reference/#/p5/arc

Is that what you meant? please tellme if you can't use this function for some reason you can emulate with bezier nodes. If this work for you test it out or tell me and I make an example.

P.S. Its a good practice to always use semicolons after every statement, even if it's not needed.

Best regards! Dknacht.

Fill a colour inside a shape

1 Answers1