在形状内填充颜色

时间:2018-06-03 00:54:41

标签: javascript p5.js

我使用point()函数绘制了一个带有算法的圆,以绘制圆弧中的每个点。然后我使用line()函数使不同的线连接到弧和&中心。我的目标是在里面的形状中显示不同颜色的饼图。我甚至无法使用beginshape()&由于endshape()功能所致 必须算法&我无法改变算法。 我想要一些帮助,在由线条区分的区域内添加颜色。

我的代码是

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)
}

1 个答案:

答案 0 :(得分:0)

在不改变绘制圆的方式的情况下为这些区域着色的最简单方法是使用arc()函数创建形状。

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

这是你的意思吗?请告诉我们,如果您因为某些原因无法使用此功能,您可以使用贝塞尔节点进行模拟。 如果这项工作为你测试或告诉我,我做了一个例子。

P.S。在每个语句之后总是使用分号是一种很好的做法,即使它不需要也是如此。

祝你好运! Dknacht。