arc experiment

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.

    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


8 Comments so far. Leave a comment below.
  1. What post did you read about arcs?

  2. Very nice results with a good amount of variance! The color really makes it.

    I made a similar process a little while ago: Where you draw an arc connecting the points, and let it build; I draw n points around each of my original points and wipe the background each draw.
    Anyways, very nice, fun to see some new work!

    • mannytan,

      Very nice work Kyle! I like how you’re creating presets and how you added the ability to take a screenshots. (I didn’t know you can do that).

      On a side not, I noticed that you’re also working on porting toxiclibs to javascript. Really exited about it and can’t wait to start using it.

      • Thanks Manny! I’m glad to hear you are excited about toxiclibs.js. Whenever you get around to making something with it, please let me know! I would love to link to it on the site. Also feel free to send me any feedback you may have.

  3. Nice work, Mr. Tan.
    I would like to imitate it in Flash AS3, but it is just too harsh to use trigonometry to draw the arcs.

  4. Hi, I’ve been inspired by this, and I made a hexagon experiment that I have already sent to you by e-mail.


One Trackback

Add Your Comments

Your email is never published nor shared.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>