Background
Having seen a short YouTube video by Lex Fridman about Donut-shaped C code that generates a 3D spinning donut where in comments he encouraged to look at the code and play with I did just that.
But before this, I went to the Donut math: how donut.c works link where the author of that code Andy Sloane described how he came from geometry and math to implementation of the donut in C.
The Andy Sloane’s tutorial has two visualizations that you can launch and also the JavaScript implementation of the donut. One visualization is of ASCII donut while another one uses <canvas>: The Graphics Canvas element to create a visualization.
Playing with the code
The easiest way to play with the 3D spinning donut in JavaScript is to use JSFiddle online editor. When the editor is opened you see four main areas, just like in almost any other JS editor, which are HTML, CSS, JavaScript and Result.
To be able to start playing with donut code like crazy we need to do a number of things.
First
First, there is a need to create a basic HTML page with a number of buttons, a <pre> tag to store ASCII generated donut and a <canvas> tag to be able to show another type of donut animation. To do this just copy and paste into HTML area of JSFiddle editor the code below
<html>
<body>
<button onclick="anim1();">toggle ASCII animation</button>
<button onclick="anim2();">toggle canvas animation</button>
<pre id="d" style="background-color:#000; color:#ccc; font-size: 10pt;"></pre>
<canvas id="canvasdonut" width="300" height="240">
</canvas>
</body>
</html>
Second
Second, there is a need to copy and past JS code from Andy’s page or copy and paste the code below into JS area of the JSFiddle editor
(function() {
var _onload = function() {
var pretag = document.getElementById('d');
var canvastag = document.getElementById('canvasdonut');
var tmr1 = undefined, tmr2 = undefined;
var A=1, B=1;
// This is copied, pasted, reformatted, and ported directly from my original
// donut.c code
var asciiframe=function() {
var b=[];
var z=[];
A += 0.07;
B += 0.03;
var cA=Math.cos(A), sA=Math.sin(A),
cB=Math.cos(B), sB=Math.sin(B);
for(var k=0;k<1760;k++) {
b[k]=k%80 == 79 ? "\n" : " ";
z[k]=0;
}
for(var j=0;j<6.28;j+=0.07) { // j <=> theta
var ct=Math.cos(j),st=Math.sin(j);
for(i=0;i<6.28;i+=0.02) { // i <=> phi
var sp=Math.sin(i),cp=Math.cos(i),
h=ct+2, // R1 + R2*cos(theta)
D=1/(sp*h*sA+st*cA+5), // this is 1/z
t=sp*h*cA-st*sA; // this is a clever factoring of some of the terms in x' and y'
var x=0|(40+30*D*(cp*h*cB-t*sB)),
y=0|(12+15*D*(cp*h*sB+t*cB)),
o=x+80*y,
N=0|(8*((st*sA-sp*ct*cA)*cB-sp*ct*sA-st*cA-cp*ct*sB));
if(y<22 && y>=0 && x>=0 && x<79 && D>z[o])
{
z[o]=D;
b[o]=".,-~:;=!*#$@"[N>0?N:0];
}
}
}
pretag.innerHTML = b.join("");
};
window.anim1 = function() {
if(tmr1 === undefined) {
tmr1 = setInterval(asciiframe, 50);
} else {
clearInterval(tmr1);
tmr1 = undefined;
}
};
// This is a reimplementation according to my math derivation on the page
var R1 = 1;
var R2 = 2;
var K1 = 150;
var K2 = 5;
var canvasframe=function() {
var ctx = canvastag.getContext('2d');
ctx.fillStyle ='#000';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
if(tmr1 === undefined) { // only update A and B if the first animation isn't doing it already
A += 0.07;
B += 0.03;
}
// precompute cosines and sines of A, B, theta, phi, same as before
var cA=Math.cos(A), sA=Math.sin(A),
cB=Math.cos(B), sB=Math.sin(B);
for(var j=0;j<6.28;j+=0.3) { // j <=> theta
var ct=Math.cos(j),st=Math.sin(j); // cosine theta, sine theta
for(i=0;i<6.28;i+=0.1) { // i <=> phi
var sp=Math.sin(i),cp=Math.cos(i); // cosine phi, sine phi
var ox = R2 + R1*ct, // object x, y = (R2,0,0) + (R1 cos theta, R1 sin theta, 0)
oy = R1*st;
var x = ox*(cB*cp + sA*sB*sp) - oy*cA*sB; // final 3D x coordinate
var y = ox*(sB*cp - sA*cB*sp) + oy*cA*cB; // final 3D y
var ooz = 1/(K2 + cA*ox*sp + sA*oy); // one over z
var xp=(150+K1*ooz*x); // x' = screen space coordinate, translated and scaled to fit our 320x240 canvas element
var yp=(120-K1*ooz*y); // y' (it's negative here because in our output, positive y goes down but in our 3D space, positive y goes up)
// luminance, scaled back to 0 to 1
var L=0.7*(cp*ct*sB - cA*ct*sp - sA*st + cB*(cA*st - ct*sA*sp));
if(L > 0) {
ctx.fillStyle = 'rgba(255,255,255,'+L+')';
ctx.fillRect(xp, yp, 1.5, 1.5);
}
}
}
}
window.anim2 = function() {
if(tmr2 === undefined) {
tmr2 = setInterval(canvasframe, 50);
} else {
clearInterval(tmr2);
tmr2 = undefined;
}
};
asciiframe();
canvasframe();
}
if(document.all)
window.attachEvent('onload',_onload);
else
window.addEventListener("load",_onload,false);
})();
Third
After HTML and JavaScript areas were populated click on the Run button (as indicated by me with number 1) in the screenshot below and you should see in the Result area on the right two buttons and two donuts (indicated with number 2).
When each button is clicked relevant animation is turned on. Both of them could run in parallel.
This is how it looks like in real-time
Playground
If you want understand the math of how it’s done then first read the explanation by Andy Sloane here. If you want jump right into messing around with the code then stay here.
Need for speed
To change the speed of the animations Ctrl + F in the JSFiddle and search for setInterval function
tmr1 = setInterval(asciiframe, 50);
tmr2 = setInterval(canvasframe, 50);
The second argument controls the speed of rotation of the donut. Increasing it makes it rotate faster and vice versa.
Paint it black
To change the background color of the donut created with the <canvas> animation search for ctx.fillStyle =’#000′;
ctx.fillStyle='#000'; //this is currently black
To change the color of the donut created with the <canvas> animation search for ctx.fillStyle = ‘rgba(255,255,255,’+L+’)’;
ctx.fillStyle = 'rgba(255,255,255,'+L+')'; // update any of the first three arguments which stand for Red, Green, Black in RGB.
See you
There are plenty other things you can try with this code. So why are you waiting? Just do it!
ScienceAppliedForGood 