Как нарисовать форму звезды в ProcessingJS - PullRequest
Новая
       49

Как нарисовать форму звезды в ProcessingJS

0 голосов
/ 16 декабря 2018

Вот мой текущий код проекта: 

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)

1 Ответ

0 голосов
/ 16 декабря 2018

См. Документацию по обработке 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>
...