How to Draw an ARC display.newArc()?

Please help me. I try to draw an arc but can’t find an apropiate function

There is no such function to draw arc

There is no such function to draw arc

Maybe this helps?

local function newArc(startAngle, widthAngle, radius ) startAngle = startAngle or 0 widthAngle = widthAngle or 90 radius = radius or 100 local vert = {} vert[#vert+1] = 0 vert[#vert+1] = 0 for i = 0, widthAngle do local a = (startAngle+i)\*math.pi/180 vert[#vert+1] = radius \* math.cos(a) vert[#vert+1] = radius \* math.sin(a) end local arc = display.newPolygon(0, 0, vert) arc:setFillColor(1,1,1) arc.strokeWidth = 1 arc:setStrokeColor( 1, 1, 1 ) return arc end local arc = newArc(0, 90, 200) arc.x=display.contentCenterX arc.y=display.contentCenterY

There are various ways of drawing an arc.  The polygonal method is one. You can also do it by drawing a circle / ellipse and putting background colour rectangles over it rotated and clipping. Or having a mask if you want similar sized arcs. Or having a bitmap which is an arc segment and duplicating it sufficient times. Or drawing the arcs with regular polygons and using a circle mask to make it round.

It really depends why you want to draw an arc :slight_smile: I am writing something with an animated arc (looks a bit like the scoring things in Trivial Pursuit) but I cheat, it’s actually a kite shaped quadrilateral, but the frame surrounding it hides that fact :slight_smile:

Maybe this helps?

local function newArc(startAngle, widthAngle, radius ) startAngle = startAngle or 0 widthAngle = widthAngle or 90 radius = radius or 100 local vert = {} vert[#vert+1] = 0 vert[#vert+1] = 0 for i = 0, widthAngle do local a = (startAngle+i)\*math.pi/180 vert[#vert+1] = radius \* math.cos(a) vert[#vert+1] = radius \* math.sin(a) end local arc = display.newPolygon(0, 0, vert) arc:setFillColor(1,1,1) arc.strokeWidth = 1 arc:setStrokeColor( 1, 1, 1 ) return arc end local arc = newArc(0, 90, 200) arc.x=display.contentCenterX arc.y=display.contentCenterY

There are various ways of drawing an arc.  The polygonal method is one. You can also do it by drawing a circle / ellipse and putting background colour rectangles over it rotated and clipping. Or having a mask if you want similar sized arcs. Or having a bitmap which is an arc segment and duplicating it sufficient times. Or drawing the arcs with regular polygons and using a circle mask to make it round.

It really depends why you want to draw an arc :slight_smile: I am writing something with an animated arc (looks a bit like the scoring things in Trivial Pursuit) but I cheat, it’s actually a kite shaped quadrilateral, but the frame surrounding it hides that fact :slight_smile:

I recently required an arc for my project, the code from jyrki.hokkanen only creates a ‘pizza-slice shaped’ arc. I needed a line arc, so I’ve taken paulscottrobson’s advice and created one using vertices. Hope this helps someone else out there.

local function arc(x, y, radius, theta1, theta2, width, detail) local vertices = {}; local k = 1; ---------------------------------------------- -- UPRIGHT - Comment out UPSIDE DOWN if using ---------------------------------------------- for i = (360 - theta2), (360 - theta1), detail do vertices[k] = radius\*math.cos(2\*math.pi\*(i / 360)); vertices[k + 1] = radius\*math.sin(2\*math.pi\*(i / 360)); k = k + 2; end for i = ((360 - theta1) - ((360 - theta1) % detail)), (360 - theta2), -detail do vertices[k] = (radius - width)\*math.cos(2\*math.pi\*(i / 360)); vertices[k + 1] = (radius - width)\*math.sin(2\*math.pi\*(i / 360)); k = k + 2; end ---------------------------------------------- -- UPSIDE DOWN - Comment out UPRIGHT if using ---------------------------------------------- -- for i = theta1, theta2, detail -- do -- vertices[k] = radius\*math.cos(2\*math.pi\*(i / 360)); -- vertices[k + 1] = radius\*math.sin(2\*math.pi\*(i / 360)); -- k = k + 2; -- end -- for i = (theta2 - (theta2 % detail)), theta1, -detail -- do -- vertices[k] = (radius - width)\*math.cos(2\*math.pi\*(i / 360)); -- vertices[k + 1] = (radius - width)\*math.sin(2\*math.pi\*(i / 360)); -- k = k + 2; -- end return display.newPolygon(x, y, vertices), vertices; end ------------------ -- EXAMPLE OF USE ------------------

local shape1, v = arc(0, 0, 100, 45, 315, 10, 5);

shape1.strokeWidth = 3;

shape1:setStrokeColor( 0.5, 1, 0.5 );

shape1.fill = {0.5, 1, 0.5};

shapeGroup = display.newGroup();

shapeGroup:insert(shape1);

shapeGroup.x = display.contentCenterX;

shapeGroup.y = display.contentCenterY;

local myCircle = display.newCircle(display.contentCenterX, display.contentCenterY, 10);

myCircle.fill = {1, 0, 0};

physics.addBody(shapeGroup, “static”, {chain = v, density = 1.0, friction = 0.3, bounce = 0.2});

physics.addBody(myCircle, “dynamic”, {radius = 10, density = 1.0, friction = 0.3, bounce = 0.2});

The arc function returns the polygon; as well as, the vertices table so you can use for a physics body. The ‘detail’ parameter determines the number of vertices in the polygon. It’s somewhat counter-intuitive, the higher the value the less vertices get used.

I recently required an arc for my project, the code from jyrki.hokkanen only creates a ‘pizza-slice shaped’ arc. I needed a line arc, so I’ve taken paulscottrobson’s advice and created one using vertices. Hope this helps someone else out there.

local function arc(x, y, radius, theta1, theta2, width, detail) local vertices = {}; local k = 1; ---------------------------------------------- -- UPRIGHT - Comment out UPSIDE DOWN if using ---------------------------------------------- for i = (360 - theta2), (360 - theta1), detail do vertices[k] = radius\*math.cos(2\*math.pi\*(i / 360)); vertices[k + 1] = radius\*math.sin(2\*math.pi\*(i / 360)); k = k + 2; end for i = ((360 - theta1) - ((360 - theta1) % detail)), (360 - theta2), -detail do vertices[k] = (radius - width)\*math.cos(2\*math.pi\*(i / 360)); vertices[k + 1] = (radius - width)\*math.sin(2\*math.pi\*(i / 360)); k = k + 2; end ---------------------------------------------- -- UPSIDE DOWN - Comment out UPRIGHT if using ---------------------------------------------- -- for i = theta1, theta2, detail -- do -- vertices[k] = radius\*math.cos(2\*math.pi\*(i / 360)); -- vertices[k + 1] = radius\*math.sin(2\*math.pi\*(i / 360)); -- k = k + 2; -- end -- for i = (theta2 - (theta2 % detail)), theta1, -detail -- do -- vertices[k] = (radius - width)\*math.cos(2\*math.pi\*(i / 360)); -- vertices[k + 1] = (radius - width)\*math.sin(2\*math.pi\*(i / 360)); -- k = k + 2; -- end return display.newPolygon(x, y, vertices), vertices; end ------------------ -- EXAMPLE OF USE ------------------

local shape1, v = arc(0, 0, 100, 45, 315, 10, 5);

shape1.strokeWidth = 3;

shape1:setStrokeColor( 0.5, 1, 0.5 );

shape1.fill = {0.5, 1, 0.5};

shapeGroup = display.newGroup();

shapeGroup:insert(shape1);

shapeGroup.x = display.contentCenterX;

shapeGroup.y = display.contentCenterY;

local myCircle = display.newCircle(display.contentCenterX, display.contentCenterY, 10);

myCircle.fill = {1, 0, 0};

physics.addBody(shapeGroup, “static”, {chain = v, density = 1.0, friction = 0.3, bounce = 0.2});

physics.addBody(myCircle, “dynamic”, {radius = 10, density = 1.0, friction = 0.3, bounce = 0.2});

The arc function returns the polygon; as well as, the vertices table so you can use for a physics body. The ‘detail’ parameter determines the number of vertices in the polygon. It’s somewhat counter-intuitive, the higher the value the less vertices get used.