writer
2,661
edits
Changes
ZCubes/Making a Donut (view source)
Revision as of 16:00, 17 September 2021
, 16:00, 17 September 2021no edit summary
==Video==
==Video==
<br/>
<br/>
{{#ev:youtube|Ebl4rcc8Fk8|480|left|Brocards Problem & Brown Numbers}}
{{#ev:youtube|Ebl4rcc8Fk8|480|left|Making a Donut}}
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
==ZCubes Code=
<pre>
function Anims()
{
//var wX=ZCx("");
var dx=
ZDivx(600,600)
.prop("id","d")
.css(
{
"white-space":"pre",
"font-family":"monospace"
}
);
var cx=
ZCanvasx(600,600)
.prop("id","canvasdonut");
//ZContentx(wx)
//.append(dx)
//ZContentx(wx)
//.append(cx)
//ZC(dx)
//ZC(cx)
var pretag = dx.get(0);
var canvastag = cx.get(0);
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("");
};
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);
}
}
}
}
anim2 = function() {
if(tmr2 === undefined) {
tmr2 = setInterval(canvasframe, 50);
} else {
clearInterval(tmr2);
tmr2 = undefined;
}
};
asciiframe();
canvasframe();
anim1()
anim2()
}
Anims()
</pre>