p5.js arc() Function

The arc() function is an inbuilt function in p5.js which is used to draw an arc. This function accepts seven parameters which are x-ordinate, y-ordinate, width, height, start, stop and an optional parameter mode.

Syntax:

arc(x, y, w, h, start, stop, mode)

Parameters: This function accepts seven parameters as mentioned above and described below:

x: This parameter is used to hold the value of x-coordinate of the arc of ellipse.
y: This parameter is used to hold the value of y-coordinate of the arc of ellipse.
w: This parameter takes the value of width of the arc of ellipse.
h: This parameter takes the value of height of the arc of ellipse.
start: This parameter takes the value of angle to start the arc, specified in radians.
stop: This parameter takes the value of angle to stop the arc, specified in radians.
mode: This is an optional parameter which determines the way of drawing the arc either CHORD, PIE or OPEN

Program 1: This program uses the DEFAULT mode.

function setup() { 
    createCanvas(400, 400); 
} 
  
function draw() { 
    background('gray'); 
  
    // Quarter arc at 150, 55 of height and width 290px 
    arc(150, 55, 290, 290, 0, HALF_PI);  
    fill('lightblue'); 
} 

Output:

Program 2: This program uses the OPEN mode.

function setup() { 
    createCanvas(400, 400); 
} 
  
function draw() { 
    background(220); 
    fill('lightgreen'); 
  
    // An open arc at 150, 150 with radius 280 
    arc(150, 150, 280, 280, 0, PI + QUARTER_PI, OPEN);  
} 

Output:

Program 3: This program uses the CHORD mode.

function setup() { 
    createCanvas(400, 400); 
} 
  
function draw() { 
    background(220); 
    fill('orange'); 
  
    // A chord-arc at 150, 150 with radius 280 
    arc(150, 150, 280, 280, 0, PI + QUARTER_PI, CHORD);  
}  

Output:

Program 4: This program uses PIE mode.

function setup() { 
    createCanvas(400, 400); 
} 
  
function draw() { 
    background(220); 
    fill('blue'); 
      
    // A pie-arc at 150, 150 with radius 280 
    arc(150, 150, 280, 280, 0, PI + QUARTER_PI, PIE);  
}  

Output:

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

Tags:

#JavaScript-p5.js #Technical Scripter 2018 #JavaScript #Technical Scripter #Web Technologies

p5.js Color Complete Reference

p5.js ellipse() Function

p5.js arc() Function

Contact Us