p5.js arc() Function

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

• 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. javascript

  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. javascript

  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. javascript

  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. javascript

  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:

sarthak_ishu11

Follow

Improve

Article Tags :

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

+1 More