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

## Comments

What post did you read about arcs?

The first time I used it was from this post about arc’s in openGL

http://www.allegro.cc/forums/thread/594175. It didn’t dawn on me back then until I re-read it in another group called OooShiny

Cool!

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

I made a similar process a little while ago:

http://www.haptic-data.com/sketches/momentum_wheel.html 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!

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.

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.

Jeez.

Hi, I’ve been inspired by this, and I made a

hexagon experimentthat I have already sent to you by e-mail.## Trackbacks

One Trackback