Breaking down the Circle of Friends Code

Your browser does not support the HTML5 canvas tag.

The Ubuntu logo, aka Circle of Friends, is a very nice piece of art and geometry. Of course, you can draw it by hand if you have the skills, but what is the secret mathematics behind it? I was looking for a while for a piece of code that can render it until I decided to write it myself. So here is how to draw the Ubuntu logo in HTML5 canvas. I have chosen html canvas because it would be easier to display it on the web. The logo is designed to fill the canvas, so you can modify its size by changing the canvas size. Feel free to play with the code.

<a href="http://www.ubunTumult.blogspot.com">

<canvas id="http://www.ubunTumult.blogspot.com" width="200" height="200" style="border:0px solid #ffffff;">

Your browser does not support the HTML5 canvas tag.

</canvas>

</a>

<script>

var c=document.getElementById("http://www.ubunTumult.blogspot.com");

var ubunTumult=c.getContext("2d");

var centerx=c.width/2;

var centery=c.height/2;

var radius=Math.min(centerx,centery);

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,radius,0,2*Math.PI);

ubunTumult.fillStyle="#dd4814";

ubunTumult.fill();

ubunTumult.fillStyle="#ffffff";

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,0.58*radius,7.5/360*Math.PI,90.9/360*Math.PI);

ubunTumult.arc(centerx+0.68/2*radius,centery+0.68/2*Math.sqrt(3)*radius,0.188*radius,290/180*Math.PI,190/180*Math.PI,1);

ubunTumult.arc(centerx,centery,0.58*radius,149.1/360*Math.PI,232.5/360*Math.PI);

ubunTumult.arc(centerx,centery,0.39*radius,115/180*Math.PI,5/180*Math.PI,1);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx+0.68*radius/2,centery+0.68/2*Math.sqrt(3)*radius,0.1334*radius,0,2*Math.PI);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,0.58*radius,247.5/360*Math.PI,330.9/360*Math.PI);

ubunTumult.arc(centerx-0.68*radius,centery,0.188*radius,50/180*Math.PI,310/180*Math.PI,1);

ubunTumult.arc(centerx,centery,0.58*radius,389.1/360*Math.PI,472.5/360*Math.PI);

ubunTumult.arc(centerx,centery,0.39*radius,235/180*Math.PI,125/180*Math.PI,1);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx-0.68*radius,centery,0.1334*radius,0,2*Math.PI);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,0.58*radius,487.5/360*Math.PI,570.9/360*Math.PI);

ubunTumult.arc(centerx+0.68/2*radius,centery-0.68/2*Math.sqrt(3)*radius,0.188*radius,170/180*Math.PI,70/180*Math.PI,1);

ubunTumult.arc(centerx,centery,0.58*radius,629.1/360*Math.PI,712.5/360*Math.PI);

ubunTumult.arc(centerx,centery,0.39*radius,355/180*Math.PI,245/180*Math.PI,1);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx+0.68*radius/2,centery-0.68/2*Math.sqrt(3)*radius,0.1334*radius,0,2*Math.PI);

ubunTumult.fill();

</script>