I’ve been drawing circles with code for quite a little while now.
For the most part, I’ve been drawing them using a simple sinusoidal equation which I’ve used a ridiculous amount of times.
for(i=0;i<total;i++){
var percentage = i/total*Math.PI / 180
var xPos = Math.cos(percentage) * radius + offsetX;
var yPos = Math.sin(percentage) * radius + offsetY;
// do stuff with values
}
You don’t have to fully understand trigonometry (although it does help if you do). Plug in some values that change the parameters and you can easily modify code. However, once I started to create arcs, this proved to cause a whole mess of issues, the biggest when determining when to rotate clockwise vs counterclockwise. From my understanding, the sin/cos functions are smart enough to get a range from 0-360°. Once you go pass that, the values reset back to 0°. You can keep track of it using states but the values keep getting clobbered. It’s like the the tall man, small blanket problem. Covering your head makes your feet cold and covering your feet makes your head cold. I wasn’t smart enough to figure this out so I sat on it for a few months, then a few years, I’ve tried tackling this a few times but I’ve always ended up using a workaround instead.
Cut away to a month back. I was reading a post about drawing arcs and circles without using sine and cosine in the main loop. I believe the purpose was to skip trigonometry which can be processing intensive.
var da = (endPositionInRads - startPositionInRads); // distance angle
var ss = 45; // segmenet spacing
var rs = (Math.abs(da) / (Math.PI * 2) * ss); // real segments
var tm = Math.tan(da / real_segments); // tangent multiplier
var rm = 1 - Math.cos(da / real_segments); //radial multiplier
// first position uses sinusoidal
var xPos = Math.cos(startPositionInRads) * radius + offsetX;
var yPos = Math.sin(startPositionInRads) * radius + offsetY;
var tx; // transitionX
var ty; // transitionY
for (i = 0; i < rs; i++) {
tx = -(yPos - offsetY);
ty = xPos - offsetX;
xPos += tx * tm;
yPos += ty * tm;
xPos += (offsetX - xPos) * rm;
yPos += (offsetY - yPos) * rm;
// do stuff with values
}
(The code is a little larger but it works)
I didn’t think much of it at first. I’ve actually used it before just for the sake of using it. Going back to the arc problem again, I realized that a simple way to not get the modulus 360° problem was to not use sine and cosines at all. Sure enough it worked and the results of that can be seen below.
(left image uses trig, right image just uses math)
I’ve been completely reliant on using sines and cosines for the pass decade that it actually prevented me from doing what I wanted to do. I think I’m going to revisit a few old experiments that I’ve never published due to code complexity and take a look at it from a different perspective. All the iterations can be found below.
version 01
version 02
version 03
version 04
version 05
version 06
version 07
version 08
version 09
version 10
