Archimedean Spiral – “Plug a bit of maths in and ‘magic’ will happen!”

After looking at a few options for placing stuff in an outward spiral I came across the Archimedean Spiral. I’m rendering my items on an HTML5 canvas so this is all being done in Javascript. After implementing it I started to play around with the values a bit and produced some very interesting effects. Below are two of my favorites…

Mind you this is being done with part-finished code so it may not even be a good way of achieving it but it did the trick and I thought I’d post it before the code morphs into something far beyond what’s necessary/needed for this.

The little Javascript/HTML snippet that does this is:

        <canvas id="tags" width="1200" height="600"></canvas>     
        <script type="text/javascript">

                var c = document.getElementById('tags');
                var context = c.getContext("2d");
                var halfx = context.canvas.width / 2;
                var halfy = context.canvas.height / 2;

                context.clearRect(0, 0, 300, 300);

                context.moveTo(halfx, halfy);
                //check if both the max X and Y edges have been reached
                var Xmaxxed=false,Ymaxxed=false;
                var i=0;
                    var x = i*0.1 * Math.cos(i);
                    var y = i*0.1 * Math.sin(i);
                    console.log(["Attempt "+i,x,y]);
                    context.lineTo(x, y);
                context.strokeStyle = "#000";


Well, that’s it, play around with the two lines
var x = i*0.1 * Math.cos(i);
var y = i*0.1 * Math.sin(i);
and see what effects you can come up with, I’d be interested to see more…

About these ads

One Response to Archimedean Spiral – “Plug a bit of maths in and ‘magic’ will happen!”

  1. isNull says:

    I liked your formula. :) I put it into an openGL app. It makes circles the hard way if you turn i into a constant.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 1,385 other followers

%d bloggers like this: