const areaW=80;
const areaH = 24;const area
=new Array( areaW*areaH ).fill(0);const
areaElement = document.getElementById( 'areaId');
const clearArea = () =>{ area.fill(0); };const drawToArea
=(x, y, color)=>{if(x >= 0 && x < areaW && y>=0 && y<areaH){const
index=y * areaW+x; area[index] = color; }}; const renderArea= () =>{let
result = ''; for (let i = 0; i<area.length; i++) {result+=" .,-~:;=!*#$"[area
[i] || 0]; if((i + 1)%areaW===0){result += '\n';}}areaElement.textContent=result;
};const main=()=>{ clearArea(); let A=0;let B=0;const sin=(x)=>{return(
Math.sin(x))}; const cos = (x)=>{ return Math.cos(x);}; const floor
=(x) =>{return Math.floor(x);}; const round = (x)=>{return Math
.round(x);}; const memset=(arr, val, count) => { for (let i = 0;
i < count; i++) {arr[i]=val;}}; let updateArea= ()=>{clearArea()
;for(let j = 0;j < 6.28;j+=0.07 ){for (let i=0; i <6.28;i+=0.02)
{const c = sin(i); const d=cos(j) ;const e = sin(A);const f = sin(j)
;const g =cos(A);const h =d+2;const D=1/(c* h * e + f * g + 5);const l=
cos(i); const m = cos(B);const n = sin(B); const t = c * h *g - f*e;const x=round
(40 + 30 * D * (l * h * m - t * n)); const y = round(12 + 15 * D * (l * h*n +
t * m));const o = x + areaW * y; const N = round(8 * ((f * e- c * d*g)*
m - c * d * e - f *g-l * d * n)); if (y >= 0 && y < areaH && x>=0
&& x < areaW && D > area[o] ) { area[o] = D; drawToArea(x
,y,N > 0?N:0);}}}};const loop= () =>{ updateArea()
;renderArea() ; A += 0.04 ; B += 0.02;
requestAnimationFrame(loop)}
loop()};main()
ASCII art, using characters to represent images, dates back to the early days of computing. The 3D spinning donut takes this a step further by creating an illusion of three-dimensionality.
At the heart of this visual marvel is mathematics. The donut shape can be described using parametric equations. These equations use angles (typically referred to as theta and phi) to compute the coordinates for points on the surface of a torus (the geometric term for a donut shape).
The basic equations for a torus are as follows:
where R is the distance from the center of the torus tube to the center of the torus, r is the radius of the torus tube, and θ and ϕ are the angles that define the position on the torus.
The next step is projecting these 3D coordinates onto a 2D plane (the screen) and representing them with ASCII characters. The code uses sine and cosine functions to rotate the torus, creating the spinning effect. The characters chosen for rendering are based on the brightness of the point on the torus, creating a sense of depth and shadow.
This website serves as an excellent educational tool, demonstrating complex concepts like 3D projection, rotational mathematics, and ASCII art rendering in an accessible and visually appealing way. It showcases how theoretical mathematics and computer science concepts can be applied to create engaging visual experiences.
In conclusion, the ASCII spinning donut is a beautiful blend of art and science, offering a practical application of mathematical theory and programming skills that captivates and educates simultaneously.
The mesmerizing 3D spinning donut in ASCII, featured on this website, draws its inspiration from the pioneering work of Andy Sloane. Andy originally conceived and implemented this creative concept in C back in 2006. His innovative approach to visualizing complex mathematical ideas in such an accessible and engaging format has been a source of inspiration for enthusiasts and developers alike. To explore more of Andy Sloane's fascinating projects and contributions to the world of programming and mathematics, visit his website at a1k0n.net. His work exemplifies the intersection of artistic creativity and technical expertise, providing a unique and captivating experience for audiences around the globe.