如何在ProcessingJS中绘制星形

Question

这是我目前的项目代码：

size(500,500);
background(255, 255, 255);

fill(250,0,0);
ellipse(150, 230, 100, 200);            
fill(10,0,0);
ellipse(180, 233, 30, 30);
fill(10,0,0);
ellipse(120, 233, 30, 30);
fill(250,250,250);
ellipse(120,233,10,20);
fill(250,250,250);
ellipse(180,233,10,20);

arc(150, 280, 60, 90, 0, PI/1);

fill(250,0,0);
rect(100,330,100,100);
fill(10,10,10);
rect(50,330,50,50);
fill(10,10,10);
rect(200,330,50,50);
fill(250,0,0);
rect(90,430,50,100);
fill(250,0,0);
rect(160,430,50,100);

fill(10,0,0);
triangle(60, 300, 101, 10, 50, 450);

有人可以提供如何在死区角色旁边画一个基本的5角星的代码吗？ （尺寸500,500尺寸范围内）

Answer 1

请参阅PShapes的处理文档，其中自定义PShapes部分中有一个非常简单的星形实现。

请参阅非常相似的p5.js示例。 该代码也可以在processing.js中使用。你必须分别将createCanvas(500,500)改为size(500,500)和push() pop()到pushMatrix() popMatrix()：

function setup() {    
    createCanvas(500,500);
}

function draw() {
    background(255, 255, 255);

    // star
    push();
    translate(280, 290); // center of the star
    fill(102);
    beginShape();
    vertex(0, -50);
    vertex(14, -20);
    vertex(47, -15);
    vertex(23, 7);
    vertex(29, 40);
    vertex(0, 25);
    vertex(-29, 40);
    vertex(-23, 7);
    vertex(-47, -15);
    vertex(-14, -20);
    endShape(CLOSE);
    translate(100, 100);
    pop();

    // character
    fill(250,0,0);
    ellipse(150, 230, 100, 200);  
    fill(10,0,0);
    ellipse(180, 233, 30, 30);
    fill(10,0,0);
    ellipse(120, 233, 30, 30);
    fill(250,250,250);
    ellipse(120,233,10,20);
    fill(250,250,250);
    ellipse(180,233,10,20);
    arc(150, 280, 60, 90, 0, PI/1);
    fill(250,0,0);
    rect(100,330,100,100);
    fill(10,10,10);
    rect(50,330,50,50);
    fill(10,10,10);
    rect(200,330,50,50);
    fill(250,0,0);
    rect(90,430,50,100);
    fill(250,0,0);
    rect(160,430,50,100);
    fill(10,0,0);
    triangle(60, 300, 101, 10, 50, 450);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>