CODEWITHSUNDEEP
processingprocessing.js
Ben2050
Ben2050

Reputation: 31

How to draw a star shape in ProcessingJS

Here is my current project code:

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

Could someone please provide code on how to draw a basic 5 pointed star beside the deadpool character? (within the sized 500,500 dimensions)

Upvotes: 2

Views: 5708

Answers (1)

Rabbid76
Rabbid76

Reputation: 211116

See the processing documentation of PShapes where there is a very simple implementation of a star shape in the Custom PShapes section.

See the p5.js example which is very similar.
The code can be used in processing.js, too. You have to change createCanvas(500,500) to size(500,500) and push() respectively pop() to pushMatrix() respectively 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>

Upvotes: 3

Related Questions