Lets add a few more points and use a bit or trigonometry to arrange them into two circles. Just for fun, we make the inner points red. Try dragging the points!
const initialData = { radius: 100, angle: 0 } function render(data, ctx){ var sides = 10 for(var i=0; i<sides; i++){ var a = data.angle + i/sides * Math.PI * 2 var r1 = data.radius var r2 = r1/2 ctx.point(r1 * Math.cos( a), r1 * Math.sin( a)) ctx.point(r2 * Math.cos(-a), r2 * Math.sin(-a), {fill: 'red'}) /* uncomment this following line to make this drawing more exciting! */ /*ctx.line(r1 * Math.cos( a), r1 * Math.sin( a), r2 * Math.cos(-a), r2 * Math.sin(-a)) */ } }
In the frame below we can view the results.
//wiki.ralfbarkow.ch/assets/pages/g9-demos/run-g9.html HEIGHT 160