# [SOLVED] How to make a simple circle line (not shaded)?

What’s up guys,
I was trying to create a simple circle line with playcanvas but I didn’t find anything, someone would have a suggestion.

I need to draw the line just for help when doing Ray Casting.

The only way is me calculating the arc with the Bézier Curve algorithm ?

I was only able to find the `renderLine` and the` renderLines`
URL: https://developer.playcanvas.com/en/api/pc.Application.html#renderLine

## Functional code: url

you could render a circle using lines. I have this code which renders a sphere using 3 circles … perhaps extract a single circle from it.

``````        addSphere: function (center, radius, numSegments, color, duration, options, id) {
duration = duration || 0;

var points = [];
var colors = [];

var step = 2 * Math.PI / numSegments;
var angle = 0, i;
for (i = 0; i < numSegments; i++) {
var sin0 = Math.sin(angle);
var cos0 = Math.cos(angle);
angle += step;
var sin1 = Math.sin(angle);
var cos1 = Math.cos(angle);

points.push(
new pc.Vec3(center.x + radius * sin0, center.y, center.z + radius * cos0), new pc.Vec3(center.x + radius * sin1, center.y, center.z + radius * cos1),
new pc.Vec3(center.x + radius * sin0, center.y + radius * cos0, center.z), new pc.Vec3(center.x + radius * sin1, center.y + radius * cos1, center.z),
new pc.Vec3(center.x, center.y + radius * sin0, center.z + radius * cos0), new pc.Vec3(center.x, center.y + radius * sin1, center.z + radius * cos1)
);

colors.push(color, color, color, color, color, color);
}
lines.push(new DebugLine(points, colors, _currentTime + duration, id, options));
},

``````
3 Likes

Thanks for the quick response, I will test your implementation.

A suggestion for PlayCanvas Add a `renderCircle` or` renderArc` to `pc.Application`

This code worked very well Thank you very much @mvaligursky .

``````var Line = pc.createScript('line');

Line.prototype.update = function(dt) {
var center = new pc.Vec4();
var color = pc.Color.RED;
var numSegments = 100;
};

Line.prototype.renderArc = function (center, radius, numSegments, color) {
var points = [];
var colors = [];

var step = 2 * Math.PI / numSegments;
var angle = 0, i;
for (i = 0; i < numSegments; i++) {
var sin0 = Math.sin(angle);
var cos0 = Math.cos(angle);
angle += step;
var sin1 = Math.sin(angle);
var cos1 = Math.cos(angle);

points.push(new pc.Vec3(center.x + radius * sin0, center.y, center.z + radius * cos0), new pc.Vec3(center.x + radius * sin1, center.y, center.z + radius * cos1));

colors.push(color, color);
}
this.app.renderLines(points, colors);
};
``````

1 Like

We’re planning to add more comprehensive debug primitive for rendering - such as circles, boxes, sphere and similar. Definitely something requested and needed a lot.

4 Likes Hi excellent code! I have a question tho.
how do I force this to always be aligned to the camera ?
I know i can draw orbits and what not, but is there a way this would always face the camera?