arc()

Category:Drawing

Draws an arc onto the display from start to stop angle, centered at x and y and inscribed in a rectangle with sides length w(idth) and h(eight).

You can draw many things with the commands in the Drawing drawer of your Game Lab toolbox. For arc(), the x and y coordinates specify the center of the arc, relative to the top-left corner of the display area (x:0 y:0). The width and height of the rectangle that the arc is inscribed in are measured in pixels. The start parameter specifies what angle in degrees to start the arc at, 0 degrees is to the right. The stop parameter specifies what angle in degrees to end the arc in a clockwise direction from start.

Arcs are drawn using the current stroke weight and current stroke color, and then filled with the current fill color (unless noStroke() or noFill() commands have been run).

Examples

Shades of Red

Use a loop to sweep out many sections of a circle in different shades of red.

// Use a loop to sweep out many sections of a circle in different shades of red.
var sections=50;
for (var i = 0; i < sections; i++) {
  fill(rgb(255-((255/sections)*i), 0, 0));
  arc(200, 200, 200, 200, i*(360/sections), (i+1)*(360/sections));
}


arc(0, 0, 800, 800, 0, 90);

Some Arcs

A selection of arcs.

// A selection of arcs.
arc(50, 55, 50, 50, 0, 90);
noFill();
arc(50, 55, 60, 60, 90, 180);
arc(50, 55, 70, 70, 180, 225);
arc(50, 55, 80, 80, 225, 360);

Syntax

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

Parameters

NameTypeRequired?Description
x Number The x-location in pixels of the center of the arc, from left to right on the display. Should be a number from 0 to 400, but negative numbers will center the arc to the left of the display and numbers greater than 400 will center the arc to the right of the display (possibly unseen).
y Number The y-location in pixels of the center of the arc, from top to bottom on the display. Should be a number from 0 to 400, but negative numbers will center the arc above the display and numbers greater than 400 will center the arc below the display (possibly unseen).
w Number The horizontal width in pixels of the rectangle that the arc is inscribed in. Should be a positive number, but negative numbers will draw the same arc as positive.
h Number The vertical height in pixels of the rectangle that the arc is inscribed in. Should be a positive number, but negative numbers will draw the same arc as positive.
start Number The angle in degrees to start the arc, 0 degrees is to the right.
stop Number The angle in degrees to end the arc in a clockwise direction from start. 0 degrees is to the right.

Returns

No return value. Outputs to the display only.

Tips

  • If you're having trouble getting a ellipse to show up, make sure that noFill() or noStroke() haven't been called, and where you're trying to draw the ellipse fits within the coordinates of the display (400 x 400).
  • Anything you draw will overlap previous things you drew. The sequence of drawing statements is usually important.
  • The default stroke is black, the default stroke weight is 1 pixel, and the default fill is gray. Change the width of the line, color of the line, and fill color used to draw all subsequent shapes using strokeWeight(), stroke(), and fill().
  • When drawing thick lines, the width and length of the arc is relative to the center of the perimeter line. The outside perimeter of the arc will be one half the stroke weight larger all around.

Found a bug in the documentation? Let us know at documentation@code.org