บันทึกวิจัย

เข้าใจ donut.c ตั้งแต่ศูนย์

โค้ดก้อนนี้ถูกแชร์ต่อกันมาสิบกว่าปี ทุกคนบอกว่าสวย แต่คำอธิบายที่หาเจอทุกอันเริ่มต้นที่คำว่าเมทริกซ์หมุนสามชั้น บทนี้เริ่มจากศูนย์จริง ๆ ปูไซน์กับโคไซน์ด้วยสามเหลี่ยมมุมฉาก ปูเปอร์สเปกทีฟด้วยสามเหลี่ยมคล้าย แล้วต่อขึ้นไปทีละชั้นจนครบหกชั้น อ่านจบแล้วคุณจะเขียนมันออกมาเองได้ทุกบรรทัด

โค้ดที่หน้าตาเหมือนโดนัทและไม่มีใครอ่านออก

อ่านจบบทนี้ คุณจะเขียนสิ่งที่อยู่ข้างบนนี้ออกมาเองได้ทุกบรรทัด

             k;double sin()
         ,cos();main(){float A=
       0,B=0,i,j,z[1760];char b[
     1760];printf("\x1b[2J");for(;;
  ){memset(b,32,1760);memset(z,0,7040)
  ;for(j=0;6.28>j;j+=0.07)for(i=0;6.28
 >i;i+=0.02){float c=sin(i),d=cos(j),e=
 sin(A),f=sin(j),g=cos(A),h=d+2,D=1/(c*
 h*e+f*g+5),l=cos      (i),m=cos(B),n=s\
in(B),t=c*h*g-f*        e;int x=40+30*D*
(l*h*m-t*n),y=            12+15*D*(l*h*n
+t*m),o=x+80*y,          N=8*((f*e-c*d*g
 )*m-c*d*e-f*g-l        *d*n);if(22>y&&
 y>0&&x>0&&80>x&&D>z[o]){z[o]=D;;;b[o]=
 ".,-~:;=!*#$@"[N>0?N:0];}}/*#****!!-*/
  printf("\x1b[H");for(k=0;1761>k;k++)
   putchar(k%80?b[k]:10);A+=0.04;B+=
     0.02;}}/*****####*******!!=;:~
       ~::==!!!**********!!!==::-
         .,~~;;;========;;;:~-.
             ..,--------,*/

คอมไพล์ด้วย gcc -o donut donut.c -lm แล้วรันบนเทอร์มินัลที่รองรับ ANSI ได้เลย

คุณน่าจะเคยเลื่อนผ่านมันมาแล้ว โค้ด C ที่จัดหน้าเป็นรูปโดนัท พอคอมไพล์แล้วรัน มันพ่นโดนัทที่หมุนอยู่จริง ๆ ออกมาบนเทอร์มินัล มีเงา มีด้านสว่างด้านมืด ทั้งที่ทั้งจอมีแต่ตัวอักษร แล้วคุณก็กดเข้าไปอ่านคำอธิบาย พอถึงบรรทัดที่สามที่เขียนว่า "หลังจากคูณเมทริกซ์หมุนสามตัวเข้าด้วยกัน จะได้ว่า" คุณก็ปิดแท็บ

ผมอยากบอกเรื่องหนึ่งก่อน ของยากในโค้ดนี้คือการบีบให้มันสั้นและจัดหน้าให้เป็นรูปโดนัท ส่วนคณิตศาสตร์ข้างในเป็นของ ม.ต้นเกือบทั้งหมด สิ่งที่ต้องใช้จริง ๆ มีสี่อย่าง คือสามเหลี่ยมมุมฉาก สามเหลี่ยมคล้าย พีทาโกรัส และการคูณเลขบวกกัน ที่เหลือเป็นการเรียงของให้ถูกลำดับ

ที่มันดูอ่านไม่ออก เพราะตัวแปรทุกตัวถูกตั้งชื่อเหลือตัวอักษรเดียว และหกชั้นความคิดที่แยกกันชัดเจนถูกยัดรวมกันอยู่ในบรรทัดเดียวกัน บทนี้จะแกะมันกลับออกมาเป็นหกชั้น แล้วต่อกลับทีละชั้น ท้ายทุกชั้นจะมีหน้าต่างโค้ดที่ยาวขึ้นเรื่อย ๆ พอถึงชั้นที่หก คุณจะเห็นว่าตัวเองประกอบมันมาครบแล้ว

ชั้นที่ 1 จาก 6 · วาดวงกลมด้วยมุมเดียว

เริ่มจากของที่เล็กที่สุดในภาพ โดนัทหนึ่งใบคือวงกลมเล็ก ๆ วงหนึ่งที่ถูกลากไปรอบ ๆ แกน ถ้าวาดวงกลมวงเดียวไม่ได้ ก็ไปต่อไม่ได้ คำถามคือ ถ้าผมบอกคุณว่าเอาจุดหนึ่งจุดไปวางบนวงกลมที่มุม 30 องศา คุณจะรู้ได้ยังไงว่าจุดนั้นอยู่ตรงพิกัดไหน

วาดวงกลมรัศมี 1 โดยให้จุดศูนย์กลางอยู่ที่ศูนย์ แล้วเลือกจุดหนึ่งจุดบนเส้นวงกลม ลากเส้นตรงจากจุดนั้นดิ่งลงมาชนแกนนอน จะได้สามเหลี่ยมมุมฉากมาหนึ่งรูป ด้านเฉียงคือรัศมี ยาว 1 เสมอ ด้านนอนคือระยะจากศูนย์กลางไปทางขวา ด้านตั้งคือความสูงของจุดนั้น

ความยาวของด้านนอนคือค่าที่เราเรียกว่าโคไซน์ ความยาวของด้านตั้งคือค่าที่เราเรียกว่าไซน์ แค่นั้นเลยครับ มันไม่ใช่ปุ่มลึกลับบนเครื่องคิดเลข มันคือ เงา ของจุดที่ตกลงบนแกนนอนกับแกนตั้ง จุดบนวงกลมรัศมี 1 ที่มุม θ จึงอยู่ที่

ลองแทนค่าดู ที่มุม 0 องศา จุดอยู่ขวาสุด เงาบนแกนนอนยาวเต็ม 1 เงาบนแกนตั้งเป็น 0 ก็คือ cos(0) = 1 กับ sin(0) = 0 พอหมุนไปถึง 90 องศา จุดขึ้นไปอยู่บนสุด เงาบนแกนนอนหดเหลือ 0 เงาบนแกนตั้งยืดเป็น 1 พอถึง 180 องศา จุดไปอยู่ซ้ายสุด เงาบนแกนนอนกลายเป็น -1 เพราะมันอยู่ฝั่งซ้ายของศูนย์

ถ้าอยากได้วงกลมรัศมีอื่น ก็คูณเข้าไปตรง ๆ วงกลมรัศมี R1 คือ

ในโค้ดจริง มุมถูกเดินทีละ 0.07 ไปจนครบ 6.28 ซึ่งก็คือรอบเต็มหนึ่งรอบในหน่วยเรเดียน ตัวเลข 6.28 คือ 2π ปัดเศษ

// ชั้นที่ 1: จุดบนวงกลมรัศมี R1 ตำแหน่งเดียว ใช้มุมเดียว
for (float theta = 0; theta < 6.28; theta += 0.07) {
  float circlex = 1 * cos(theta);
  float circley = 1 * sin(theta);
}

ชั้นที่ 2 จาก 6 · วงกลมกลายเป็นโดนัท

ผ่าห่วงยางในแนวตั้งตรงไหนก็ได้ หน้าตัดที่ได้คือวงกลมวงหนึ่ง โดนัทคือวงกลมวงเดียวที่ถูกลากไปรอบแกนจนครบวง ชั้นนี้จึงมีสองขั้น เลื่อนวงกลมออกจากแกนก่อน แล้วค่อยกวาด

ก่อนอื่นต้องตกลงมุมมองกันก่อน เพราะชั้นนี้ต้องสลับไปมาระหว่างสองมุม

ขั้นแรกคือ เลื่อนวงกลมออกจากแกนก่อน ถ้าไม่เลื่อน จะได้ของคนละอย่างกันเลย

ค่าในโค้ดคือ R1 = 1 กับ R2 = 2 เขียนออกมาได้สองตัว ระยะจากแกน กับความสูง

ขั้นที่สองคือกวาดไปรอบแกน และตรงนี้คือหัวใจของทั้งชั้น

ความสูงไม่เกี่ยวกับการกวาด จึงอยู่ที่เดิม ส่วนแกนที่สามโผล่มาตรงนี้เอง คือแกน z หรือแกนความลึก

// ชั้นที่ 2: เลื่อนวงกลมออกไป R2 แล้วกวาดรอบแกน y ด้วยมุม phi
for (float theta = 0; theta < 6.28; theta += 0.07) {
  float circlex = 2 + 1 * cos(theta);   // <-- ใหม่: บวก R2
  float circley = 1 * sin(theta);

  for (float phi = 0; phi < 6.28; phi += 0.02) {  // <-- ใหม่: มุมที่สอง
    float x = circlex * cos(phi);
    float y = circley;
    float z = circlex * sin(phi);
  }
}

// ชั้นที่ 2: เลื่อนวงกลมออกไป R2 แล้วกวาดรอบแกน y ด้วยมุม phi
for (float theta = 0; theta < 6.28; theta += 0.07) {
  float circlex = 2 + 1 * cos(theta);   // <-- ใหม่: บวก R2
  float circley = 1 * sin(theta);

  for (float phi = 0; phi < 6.28; phi += 0.02) {  // <-- ใหม่: มุมที่สอง
    float x = circlex * cos(phi);
    float y = circley;
    float z = circlex * sin(phi);
  }
}

// ทรงกลม: ไม่ต้องเลื่อนวงกลมออกจากแกนเลย
float circlex = R1;                  // เดิมคือ R2 + R1 * cos(theta)
float circley = R1 * sin(theta);     // <-- ไม่เปลี่ยน... แต่ต้องคิดใหม่ทั้งคู่

// เขียนตรง ๆ แบบนี้อ่านง่ายกว่า
float x = R1 * cos(theta) * cos(phi);
float y = R1 * sin(theta);
float z = R1 * cos(theta) * sin(phi);

// ทิศตั้งฉาก ยังใช้ทางลัดเดิมได้ เพราะผิวทรงกลมตั้งฉากกับรัศมีเสมอ
float Nx = cos(theta) * cos(phi), Ny = sin(theta), Nz = cos(theta) * sin(phi);

// ทรงกระบอก: หน้าตัดเปลี่ยนจากวงกลมเป็นเส้นตรง
float x = R2 * cos(phi);
float y = R1 * 1.6 * (theta / 3.14159f - 1);   // เดินเป็นเส้นตรงตาม theta
float z = R2 * sin(phi);

// ทิศตั้งฉากของผิวข้าง ชี้ออกด้านข้างเสมอ ไม่มีส่วนประกอบแนวตั้ง
float Nx = cos(phi), Ny = 0, Nz = sin(phi);

// ริบบิ้นเมอบิอุส: หน้าตัดหมุนไปครึ่งรอบ ระหว่างที่กวาดครบหนึ่งรอบ
float w = R1 * (theta / 3.14159f - 1);   // ตำแหน่งบนความกว้างของริบบิ้น
float half = phi / 2;                    // ครึ่งหนึ่งของมุมกวาด คือตัวที่ทำให้บิด
float r = R2 + w * cos(half);
float x = r * cos(phi);
float y = w * sin(half);
float z = r * sin(phi);

// ทิศตั้งฉากหาด้วยทางลัดไม่ได้ ต้องครอสโปรดักต์ของอนุพันธ์ย่อยสองทิศ
// แล้วเพราะมันมีด้านเดียว ต้องใช้ค่าสัมบูรณ์ของความสว่าง ไม่งั้นผิวหายไปครึ่งหนึ่ง
float L = fabsf(dot(N, light));

ถึงตรงนี้เรายังไม่ได้วาดอะไรลงจอเลยสักตัว เรากำลังทำแค่รายชื่อจุดที่ลอยอยู่กลางอากาศ

ชั้นที่ 3 จาก 6 · หมุนทั้งก้อน

ชั้นที่ 2 ทำให้เรามีจุดครบทุกจุดบนผิวแล้ว แต่ทั้งก้อนยังลอยนิ่งอยู่กับที่ ถ้าจะหมุนมัน ต้องตอบคำถามเดียวให้ได้ก่อน จุดหนึ่งจุด พอถูกหมุนแล้วไปอยู่ตรงไหน เครื่องมือที่ตอบคำถามนี้มีสองชิ้น ต้องยืมมาก่อนถึงจะเขียนสูตรหมุนได้

ของชิ้นแรก ลูกศรที่เรียกว่าเวกเตอร์

เวกเตอร์ (vector) คือ ลูกศร มีทิศกับความยาว จบ บวกกันคือเดินตามอันแรกแล้วต่อด้วยอันที่สอง คูณด้วยเลขคือยืดหรือหด ส่วนลูกศรที่ยาว 1 พอดีเรียกว่า เวกเตอร์หนึ่งหน่วย คือลูกศรที่เก็บแต่ทิศ

ของที่ตำราไทยแทบไม่พูดคือ จุดกับทิศเป็นคนละเรื่องกัน

ของชิ้นที่สอง เมทริกซ์

ก่อนจะไปดูว่ามันคืออะไร ขอวางปัญหาที่มันเกิดมาแก้ก่อนครับ โค้ดนี้หมุนโดนัทสองรอบต่อกัน รอบแกน x ด้วยมุม A แล้วรอบแกน z ด้วยมุม B ถ้าเราไม่มีอะไรเลยนอกจากสูตรสองบรรทัดจากชั้นที่ 1 เราต้องเขียนพิกัดหลังหมุนรอบแรกออกมาเป็นตัวหนังสือ แล้วเอาผลนั้นไปแทนลงในสูตรของรอบที่สองด้วยมือ พอทำเสร็จได้พจน์ยาว ๆ มาชุดหนึ่ง แล้ววันไหนอยากสลับลำดับหรือเพิ่มการหมุนรอบที่สาม ก็ต้องนั่งแทนค่าใหม่ทั้งชุดอีกรอบ

ปัญหาที่หนักกว่านั้นคือปริมาณ โดนัทหนึ่งเฟรมมีจุดที่ต้องหมุน 28,350 จุด (ที่มาของเลขตัวนี้อยู่ในชั้นที่ 5) การหมุนชุดเดิมถูกใช้ซ้ำกับทุกจุด ของที่เราอยากได้จึงเป็นวิธีเก็บ "การหมุนชุดนี้" ไว้เป็นก้อนเดียว คิดครั้งเดียว แล้วเอาไปใช้กับจุดทั้งกองซ้ำ ๆ โดยไม่ต้องแทนค่าใหม่ทุกครั้ง

ก่อนจะไปดูหน้าตาของมัน ขอเดินไปหามันสามช่องครับ ช่องแรกเขียนจุดหนึ่งจุดใหม่ให้เป็น การเดินตามแกน จุด (2, 1) คือเดินตามแกนแรก 2 ก้าว แล้วเดินตามแกนที่สองอีก 1 ก้าว ช่องที่สองหมุนทั้งระนาบ ลูกศรของแกนทั้งสองย้ายไปที่ใหม่ แต่ จำนวนก้าวยังเป็น 2 กับ 1 เท่าเดิม เพราะจุดนั้นถูกหมุนไปพร้อมแกนทั้งแผ่น ช่องที่สามจึงเหลืองานเดียว คือจดปลายทางของสองแกนลงตาราง เพราะจำนวนก้าวไม่เปลี่ยน รู้แค่ปลายทางของแกนก็ประกอบจุดใหม่ได้ทุกจุด

เมทริกซ์ไม่ใช่ตารางตัวเลข มันคือใบบันทึกว่าแกนเดิมไปโผล่ที่ไหนหลังการแปลง

ที่ต้องเห็นให้ได้คือ คอลัมน์แรกคือตำแหน่งใหม่ของแกน x คอลัมน์ที่สองคือของแกน y ที่เหลือตามมาเอง เพราะการคูณเมทริกซ์กับเวกเตอร์คือ การผสมคอลัมน์ตามน้ำหนัก

ถ้าคุณเคยเรียนเมทริกซ์มาแล้ว ตรงนี้อาจสะดุด เพราะในห้องเรียนเราคูณแบบ แถวคูณคอลัมน์ คือไล่ทีละช่องผลลัพธ์ เอาแถวของเมทริกซ์คูณกับเวกเตอร์แล้วบวกกัน ส่วนบทความนี้พูดว่า ผสมคอลัมน์ตามน้ำหนัก สองอันนี้คือการคูณอันเดียวกันเป๊ะ ต่างกันแค่ลำดับที่เราเก็บตัวเลข วิธีแรกอ่านตามแนวนอนทีละช่องผลลัพธ์ วิธีที่สองอ่านตามแนวตั้งทีละก้าว พอบวกครบทั้งสองวิธีก็ได้เลขชุดเดียวกัน

กดปุ่มหมุน 30 องศา แล้วเลขสี่ตัวนั้นมาจากไหน

ปุ่มลัดในของเล่นเปลี่ยนตัวเลขให้เลย ซึ่งดูเหมือนเวทมนตร์ ทั้งที่มันคือการตอบคำถามสองข้อเท่านั้น แกน x ไปโผล่ที่ไหน และ แกน y ไปโผล่ที่ไหน ทั้งสองข้อตอบด้วยสูตรวงกลมจากชั้นที่ 1 ล้วน ๆ กดเดินทีละขั้นดูได้ครับ ขั้นสุดท้ายคือการตรวจคำตอบด้วยวิธีที่ไม่ใช้เมทริกซ์เลย

ตอนนี้ตอบคำถามที่ค้างไว้ตอนต้นหัวข้อได้แล้ว ที่เมทริกซ์ช่วยคือ มันแยกงานสองอย่างออกจากกัน งานแรกคือคิดว่าการหมุนชุดนี้พาแกนไปไหน ซึ่งคิดครั้งเดียวต่อเฟรม งานที่สองคือเอาผลนั้นไปใช้กับจุดแต่ละจุด ซึ่งเหลือแค่การคูณกับบวก โค้ดจริงก็ทำแบบนี้ มันคำนวณไซน์กับโคไซน์ของ A และ B ไว้ก่อนนอกลูป แล้วในลูปเหลือแต่การคูณกับบวกล้วน ๆ

พอรู้สองอย่างนี้ สูตรหมุนก็ไม่ต้องท่อง

เริ่มจากคอลัมน์แรกก่อน แกน x คือลูกศรยาว 1 ที่ชี้ไปทางขวา ซึ่งก็คือจุดบนวงกลมรัศมี 1 ที่มุม 0 พอดี พอเห็นว่ามันเป็นจุดบนวงกลมอยู่แล้ว การหมุนมันไป θ จึงแปลว่าเลื่อนมันไปที่มุม θ ตรง ๆ คือ (cos θ, sin θ) ตามสูตรวงกลมของชั้นที่ 1 ลองกดปุ่มหมุน 30 องศาข้างบน แล้วเทียบคอลัมน์แรกกับ cos 30° = 0.87 และ sin 30° = 0.50 ดูครับ

คอลัมน์ที่สองใช้ข้อเท็จจริงอีกข้อ คือ แกน y ก็คือแกน x ที่หมุนไปแล้ว 90 องศา พอหมุนทั้งระนาบไปอีก θ มันจึงไปนั่งที่มุม θ บวก 90 ซึ่งบนวงกลมวงเดิมคือ (−sin θ, cos θ) ข้อนี้ไม่ต้องใช้แคลคูลัสเลย ใครอยากเห็นเป็นภาพ ของเล่นเส้นสัมผัสในชั้นที่ 1 แสดงไว้ให้แล้ว

เอาสองคอลัมน์นี้ไปผสมตามน้ำหนัก ก็ได้สูตรหมุนที่จดไปใช้ได้เลยสองบรรทัด ขอตั้งชื่อจุดหลังหมุนว่า x' กับ y' อ่านว่า เอ็กซ์ไพรม์ กับ วายไพรม์ ขีดเดียวข้างบนแปลว่า ตัวเดิมที่ผ่านการหมุนมาแล้ว ส่วน x กับ y เปล่า ๆ คือจุดก่อนหมุน

บรรทัดบนคือ เดินตามคอลัมน์แรก x ก้าว แล้วเดินตามคอลัมน์ที่สองอีก y ก้าว แล้วอ่านเฉพาะค่าตามแนวนอน บรรทัดล่างคืออันเดียวกันแต่อ่านตามแนวตั้ง เครื่องหมายลบบรรทัดบนมาจาก −sin θ ในคอลัมน์ที่สอง ไม่ได้มาจากที่ไหนอื่น

เหลืออีกสองข้อที่ต้องรู้ก่อนไปเจอสูตรจริง ข้อแรก ลำดับการหมุนสลับกันไม่ได้ ข้อสอง การหมุนไม่ยืดไม่หดอะไรเลย ระยะทุกระยะกับมุมทุกมุมเท่าเดิม ซึ่งเป็นใบอนุญาตให้เราหมุนทิศตั้งฉากของผิวตามไปด้วยแบบดื้อ ๆ ในชั้นที่ 6

สูตรหมุนที่อยู่ในโค้ดจริง

โค้ดจริงหมุนสองรอบ คือรอบแกน x ด้วยมุม A แล้วรอบแกน z ด้วยมุม B ทุกเฟรมมันบวก A เพิ่ม 0.04 และ B เพิ่ม 0.02 โดนัทเลยหมุนแบบส่ายไปด้วยแทนที่จะหมุนอยู่แกนเดียว

ทีนี้เขียนการหมุนสองรอบนี้ออกมาเป็นเมทริกซ์จริง ๆ ด้วยคำถามเดิมข้อเดียว แกนแต่ละแกนไปโผล่ที่ไหน เริ่มจากจุดที่เราได้มาจากชั้นที่ 2 เขียนเป็นเวกเตอร์คอลัมน์ก่อน ขอเรียกจุดตั้งต้นจุดนี้ว่า p และเรียกพิกัดสามตัวของมันว่า x₀, y₀, z₀ เลขศูนย์ห้อยท้ายแปลว่ายังไม่ผ่านการหมุนอะไรเลย

ตรงนี้มีการกระโดดหนึ่งจังหวะที่ต้องพูดให้ชัด ของทุกอย่างที่เล่ามาเป็นตาราง 2 คูณ 2 ในระนาบเดียว แต่โดนัทอยู่ในสามมิติ ท่าที่ใช้ข้ามคือ หมุนรอบแกนหนึ่ง ก็คืออีกสองแกนหมุนกันเองในระนาบของมัน ด้วยเมทริกซ์ 2 คูณ 2 ตัวเดิมที่เพิ่งเรียนไป แล้วเอาตารางเล็กใบนั้นฝังลงในตาราง 3 คูณ 3 ถ้าหลับตามองทะลุลงไปตามแกน x ภาพที่เห็นคือรูปสองมิติอันเดิมเป๊ะ มีแค่ชื่อแกนที่เปลี่ยนจาก x กับ y เป็น y กับ z

การหมุนรอบแกน x ด้วยมุม A ไม่แตะแกน x เลย มันจึงยังอยู่ที่เดิม นั่นคือคอลัมน์แรก ส่วนแกน y กับแกน z หมุนกันเองในระนาบที่เหลือ ด้วยสูตรวงกลมชุดเดิมเป๊ะ แกน y ไปโผล่ที่ (cos A, sin A) ของระนาบนั้น แล้วแกน z คือแกน y ที่หมุนต่อไปอีก 90 องศา จึงไปโผล่ที่ (−sin A, cos A) จดสามคอลัมน์นี้ลงตาราง ได้ใบบันทึกของการหมุนรอบแกน x ขอเรียกใบนี้ว่า R ห้อย A ตามชื่อมุมของมัน

การหมุนรอบแกน z ด้วยมุม B เล่าด้วยประโยคเดียวกันทุกคำ แค่ย้ายแกนที่อยู่นิ่งจาก x ไปเป็น z ใบบันทึกของมันเรียกว่า R ห้อย B

เอาสองใบมาต่อกัน หมุน A ก่อน แล้วค่อย B เขียนเป็นการคูณเมทริกซ์สองใบ ได้ใบเดียวที่เก็บการหมุนทั้งชุดไว้ครบ

ลำดับตรงนี้ชวนสะดุดตา เนื้อความบอกว่า A มาก่อน แต่ในสมการ R ห้อย B กลับไปอยู่ซ้ายมือ เหตุผลคือเวกเตอร์ของจุดถูกวางไว้ขวาสุดเสมอ การคูณจึงเดินจากขวาไปซ้าย ใบที่ติดกับจุดมากที่สุดคือใบที่ทำงานก่อน ตัวที่ทำทีหลังจึงอยู่ซ้าย อ่านออกเสียงว่า เอาจุดไปเข้าใบ A ก่อน แล้วค่อยเอาผลไปเข้าใบ B

ถึงตรงนี้เหลืองานเดียว คือเอาใบนี้ไปคูณกับเวกเตอร์คอลัมน์ของจุด ซึ่งแปลว่าผสมสามคอลัมน์ตามน้ำหนัก x₀, y₀, z₀ เหมือนที่เดินไปทีละก้าวในตัวเดินขั้นข้างบน

คูณออกมาแล้วจัดพจน์ที่มี circlex ไว้ด้วยกัน ก็ได้บรรทัดยาวสามบรรทัดที่ทำให้คนปิดแท็บกันมาสิบกว่าปี

เทียบดูได้ตรง ๆ ครับ แถวบนของเมทริกซ์คือ cos B, −sin B cos A, sin B sin A เอาไปคูณกับ circlex cos φ, circley, circlex sin φ ตามลำดับ แล้วบวกกัน ก็คือบรรทัด x ข้างบนเป๊ะ แถวล่างสุดว่างไปหนึ่งช่อง เพราะการหมุนรอบแกน z ไม่ยุ่งกับความลึกเลย บรรทัด z จึงสั้นกว่าเพื่อน

มันยาวก็จริง แต่ไม่มีอะไรใหม่อยู่ในนั้นเลยแม้แต่ตัวเดียว ทุกพจน์คือ circlex หรือ circley จากชั้นที่ 2 คูณกับไซน์หรือโคไซน์ของมุมหมุน มันยาวเพราะเราคูณเมทริกซ์ออกมาแล้วเขียนผลลัพธ์แบบกางออก ไม่ใช่เพราะมันซับซ้อน

จุดเดียวจากทั้งหมด 28,350 จุดในเฟรมนั้น เดินครบทั้งท่อตั้งแต่มุมสองตัวจนกลายเป็นตัวอักษรหนึ่งตัว

มีของแปลกอยู่ตัวเดียวในบรรทัด z คือเลข K2 = 5 ที่โผล่มาบวกอยู่ข้างหน้า มันคือระยะที่เราดันโดนัททั้งใบให้ถอยห่างออกไปจากตา เหตุผลอยู่ในชั้นถัดไป

// ชั้นที่ 3: หมุนทั้งก้อนด้วยมุม A (รอบแกน x) และ B (รอบแกน z)
float sinA = sin(A), cosA = cos(A), sinB = sin(B), cosB = cos(B);

for (float theta = 0; theta < 6.28; theta += 0.07) {
  float circlex = 2 + 1 * cos(theta);
  float circley = 1 * sin(theta);

  for (float phi = 0; phi < 6.28; phi += 0.02) {
    float cosPhi = cos(phi), sinPhi = sin(phi);

    // <-- ใหม่ทั้งสามบรรทัด: พิกัดหลังหมุนแล้ว
    float x = circlex * (cosB * cosPhi + sinA * sinB * sinPhi) - circley * cosA * sinB;
    float y = circlex * (sinB * cosPhi - sinA * cosB * sinPhi) + circley * cosA * cosB;
    float z = 5 + cosA * circlex * sinPhi + circley * sinA;
  }
}

ถึงตรงนี้โดนัทมีจริงแล้ว หมุนได้แล้ว แต่ยังไม่มีใครมองเห็นมัน เพราะเรายังไม่ได้ตัดสินใจเลยว่าจะมองมันจากตรงไหน

ชั้นที่ 4 จาก 6 · ของไกลต้องดูเล็ก

จอเทอร์มินัลเป็นตาราง 80 คูณ 22 ช่อง มันแบน มีแค่สองแกน ส่วนโดนัทของเรามีสามแกน ต้องมีวิธีบีบสามให้เหลือสอง และวิธีนั้นต้องบีบแล้วยังดูเป็นสามมิติอยู่

ยืนห่างจากเสาไฟฟ้าต้นหนึ่งสิบเมตร แล้วเดินถอยหลังไปอีกจนห่างยี่สิบเมตร เสาต้นเดิมสูงเท่าเดิมทุกประการ แต่มันดูเตี้ยลงครึ่งหนึ่ง ระยะเพิ่มเป็นสองเท่า ขนาดที่เห็นลดลงครึ่งหนึ่ง คือมันแปรผกผันกันตรง ๆ

เหตุผลคือสามเหลี่ยมคล้าย ลากเส้นจากตาไปยังยอดเสา เส้นนั้นจะพาดผ่านจอที่อยู่ตรงหน้าเราที่ความสูงหนึ่ง ยิ่งเสาอยู่ไกล เส้นยิ่งเอียงน้อย จุดที่มันตัดจอยิ่งต่ำลง สามเหลี่ยมสองรูปคือรูปเล็กจากตาถึงจอ กับรูปใหญ่จากตาถึงเสา มันคล้ายกัน อัตราส่วนด้านจึงเท่ากัน ผลลัพธ์คือหารด้วยระยะ

การหารด้วยระยะคือทั้งหมดของคำว่าเปอร์สเปกทีฟ เกมสามมิติทุกเกมที่คุณเคยเล่นใช้บรรทัดนี้บรรทัดเดียวกัน

เขียนออกมาเป็นสูตรได้สองบรรทัด ขอเรียกช่องที่จุดไปตกบนจอว่า xp กับ yp ตัว p ย่อมาจาก projection ที่แปลว่า การฉาย คือเงาของจุดสามมิติที่ทาบลงบนจอแบน ๆ ชื่อเดียวกันนี้อยู่ในโค้ดจริงด้วย

เลข 40 กับ 12 คือจุดกลางจอ เพราะจอกว้าง 80 สูง 22 ส่วนเครื่องหมายลบหน้า 15 มีเหตุผลที่ไม่เกี่ยวกับคณิตศาสตร์เลย แกน y ของจอคอมพิวเตอร์ชี้ลง แถวที่ 0 อยู่บนสุด แถวที่ 21 อยู่ล่างสุด ถ้าลืมใส่ลบ โดนัทจะกลับหัว

ส่วน K2 = 5 จากชั้นที่แล้วคือระยะที่ผลักโดนัทออกไปจากตา จำเป็นเพราะจุดที่ไกลสุดของโดนัทอยู่ที่ R1 + R2 = 3 ถ้า K2 น้อยกว่านั้น จะมีจุดที่มี z เป็นศูนย์หรือติดลบ แปลว่ากล้องจมอยู่ในเนื้อโดนัท แล้วการหารด้วย z จะพังทันที ค่า 5 มากกว่า 3 อยู่พอสมควร จึงปลอดภัย

    // ...พิกัด x, y, z จากชั้นที่ 3...

    // <-- ใหม่: ของไกลต้องดูเล็ก คือหารด้วยระยะ
    float ooz = 1 / z;                  // เก็บส่วนกลับไว้ก่อน จะได้ไม่ต้องหารซ้ำ
    int xp = (int)(40 + 30 * ooz * x);       // 40 คือกลางจอในแนวนอน
    int yp = (int)(12 - 15 * ooz * y);       // ลบ เพราะแกน y ของจอชี้ลง

ชั้นที่ 5 จาก 6 · อะไรบังอะไร

ตอนนี้เรามีสูตรที่บอกได้แล้วว่าจุดบนผิวโดนัทจะไปตกที่ช่องไหนบนจอ แล้วก็เจอปัญหาทันที โดนัทมีผิวสองด้าน และผิวด้านหลังก็ตกลงบนจอเหมือนกัน จุดที่อยู่ด้านหลังกับจุดที่อยู่ด้านหน้าตกลงในช่องเดียวกันเป๊ะ แต่ช่องตัวอักษรหนึ่งช่องพิมพ์ตัวอักษรได้แค่ตัวเดียว

ถ้าปล่อยให้ใครมาทีหลังทับได้เลย ผิวด้านหลังจะทะลุออกมาข้างหน้าแบบสุ่ม ๆ ภาพจะดูเหมือนโดนัทที่ทำจากแก้ว

วิธีแก้คือตั้งคนเฝ้าประตูไว้ทุกช่อง ทำตารางอีกใบขนาดเท่าจอเป๊ะ ๆ ช่องละหนึ่งตัวเลข เก็บว่า ตอนนี้ของที่ยึดช่องนี้อยู่ อยู่ใกล้ตาแค่ไหน พอมีจุดใหม่มาขอลง ก็เทียบกัน ใกล้กว่าของเดิมถึงจะได้เขียนทับ ไกลกว่าก็ถูกปฏิเสธไปเงียบ ๆ ตารางใบนี้เรียกว่า z-buffer

รายละเอียดที่คมคือมันเก็บ 1/z ไม่ใช่ z แล้วเทียบด้วยเครื่องหมายมากกว่า เพราะ z เป็นบวกเสมอ (ขอบคุณ K2 จากชั้นที่แล้ว) ของที่ใกล้กว่ามี z น้อยกว่า จึงมี 1/z มากกว่า และค่านี้เราคำนวณไว้แล้วตั้งแต่ชั้นที่ 4 ไม่ต้องหารเพิ่มเลยสักครั้ง

จุดที่วิ่งเข้ามาในหน้าต่างเล็ก ๆ นี้เป็นจุดจริงจากเฟรมจริง เรียงตามลำดับที่ลูปคำนวณมันออกมา และในชุดนี้มีจุดที่ถูกปฏิเสธไป 7 จุด

    // ...xp, yp จากชั้นที่ 4...

    // <-- ใหม่: ช่องหนึ่งช่องรับได้ตัวเดียว ใครใกล้กว่าคนนั้นได้
    if (ooz > zbuffer[xp + 80 * yp]) {
      zbuffer[xp + 80 * yp] = ooz;
      output[xp + 80 * yp] = '#';   // ยังเป็นตัวเดิมทุกจุด
    }

ห้าชั้นผ่านไป สิ่งที่ได้คือเงาทึบรูปโดนัทหนึ่งใบ รูปร่างถูกต้องทุกอย่าง แต่ยังไม่มีใครดูออกว่ามันเป็นสามมิติ

ชั้นที่ 6 จาก 6 · แสงตกกระทบ

ลองเอามือถือส่องไฟไปที่ลูกบอลในห้องมืด ส่วนที่หันเข้าหาไฟจะสว่างที่สุด ส่วนที่หันเฉียงจะสลัวลง ส่วนที่หันหนีไปเลยจะมืดสนิท ความสว่างขึ้นกับว่าผิวตรงนั้นหันเข้าหาแสงมากแค่ไหน ไม่ได้ขึ้นกับว่ามันอยู่ใกล้ไฟแค่ไหน

แปลว่าเราต้องรู้สองอย่างต่อหนึ่งจุด คือทิศที่ผิวตรงนั้นหันไป กับทิศของแสง แล้วต้องมีวิธีวัดว่าสองทิศนี้ตรงกันแค่ไหน

ทิศที่ผิวหันไป เรียกว่า นอร์มอล (normal) คือลูกศรที่ตั้งฉากกับผิวตรงจุดนั้น ข่าวดีคือของชิ้นนี้เราได้มาฟรี เพราะผิวโดนัทตรงจุดใด ๆ ตั้งฉากกับรัศมีของวงกลมหน้าตัดที่ลากผ่านจุดนั้นพอดี ทิศตั้งฉากจึงเป็นสูตรเดียวกับสูตรตำแหน่งในชั้นที่ 1 และ 2 แค่ตัดตัว R1 กับ R2 ทิ้งไป เหลือแต่ทิศ ขอเรียกลูกศรนอร์มอลนี้ว่า N ตามตัวแรกของคำ และเรียกสามช่องของมันว่า Nx, Ny, Nz

แล้วมันต้องถูกหมุนตามด้วยมุม A และ B ชุดเดียวกับที่หมุนตัวโดนัท ซึ่งทำได้ตรง ๆ เพราะการหมุนไม่ยืดไม่หด ตามที่คุยกันไว้ในหัวข้อเวกเตอร์

ดอทโปรดักต์ คือเงาที่ลูกศรหนึ่งทอดลงบนอีกลูกศร

เหลือคำถามเดียว มีลูกศรสองอัน จะวัดยังไงว่ามันหันไปทางเดียวกันแค่ไหน

เอาลูกศรอันแรกไปทอดเงาลงบนอีกอันหนึ่ง แล้ววัดว่าเงายาวเท่าไร ถ้าสองอันหันทางเดียวกันเป๊ะ เงาจะยาวเต็มที่ ถ้าตั้งฉากกัน เงาจะเป็นศูนย์พอดี และถ้าหันสวนทางกัน เงาจะติดลบ ค่านี้เรียกว่าดอทโปรดักต์ (dot product)

วิธีคำนวณคือคูณทีละช่องแล้วบวกกัน ช่อง x คูณช่อง x ช่อง y คูณช่อง y ช่อง z คูณช่อง z แล้วบวกทั้งสามเข้าด้วยกัน แค่นั้น ที่ตำราชอบทำคือให้สูตรนี้ก่อนโดยไม่บอกว่ามันแปลว่าอะไร

ทิศแสงในโค้ดคือ (0, 1, -1) แปลว่าแสงมาจากด้านบนและด้านหน้าเยื้องมาทางคนดู ดอทโปรดักต์ของมันกับนอร์มอลจึงสั้นมาก ค่าที่ได้คือความสว่างของจุดนั้น ขอเรียกมันว่า L ตามคำว่า luminance ที่แปลว่า ความสว่าง ชื่อเดียวกับตัวแปรในโค้ดจริง

ช่อง x คูณกับศูนย์ จึงหายไปทั้งพจน์ เหลือแค่เอาค่าในช่อง y ลบด้วยค่าในช่อง z ของนอร์มอล

เครื่องหมายมีความหมายจริง ๆ ถ้า L ติดลบ แปลว่าผิวตรงนั้นหันหลังให้แสง คือมันเป็นด้านที่เรามองไม่เห็นอยู่แล้ว โค้ดจึงมีเงื่อนไข L > 0 คอยกรองทิ้ง ในวงการกราฟิกท่านี้มีชื่อว่า backface culling

ค่า L มากที่สุดได้เท่าไร นอร์มอลยาว 1 ส่วนทิศแสงยาวเท่านี้

ค่า L จึงอยู่ระหว่าง -1.414 ถึง 1.414 โค้ดคูณมันด้วย 8 แล้วเอาไปใช้เป็นลำดับที่ในแถบตัวอักษร

แถบตัวอักษรคือ .,-~:;=!*#$@ เรียงจากจางไปเข้ม จุดที่หันเข้าหาแสงเต็ม ๆ ได้ @ ที่ทึบที่สุด จุดที่หันเฉียงมาก ๆ ได้ . ที่บางที่สุด และ 1.414 คูณ 8 ได้ประมาณ 11.3 ซึ่งตกที่ตำแหน่งสุดท้ายของแถบยาว 12 ตัวพอดี

    // <-- ใหม่: ทิศตั้งฉากของผิว แล้วเทียบกับทิศแสง
    float Nx = cos(theta) * cos(phi);
    float Ny = sin(theta);
    float Nz = cos(theta) * sin(phi);
    // หมุน N ด้วยมุม A และ B ชุดเดียวกับที่หมุนตัวโดนัท แล้วเอามาทำดอทโปรดักต์กับ (0, 1, -1)
    float L = ...;

    if (L > 0 && ooz > zbuffer[xp + 80 * yp]) {
      zbuffer[xp + 80 * yp] = ooz;
      int index = (int)(8 * L);            // <-- ใหม่: แปลงความสว่างเป็นตัวอักษร
      output[xp + 80 * yp] = ".,-~:;=!*#$@"[index > 0 ? index : 0];
    }

ถึงตรงนี้ผมอยากชี้ให้เห็นอะไรอย่างหนึ่ง ตลอดหกชั้นที่ผ่านมา ไม่มีตรงไหนเลยที่โค้ด "วาดโดนัท" สิ่งที่มันทำคือคำนวณว่าตัวอักษรแต่ละช่องบนจอควรเข้มแค่ไหน ส่วนโดนัทเป็นผลข้างเคียงที่โผล่ออกมาเอง

ถอดชิ้นส่วนโดนัทเล่น

หกชั้นครบแล้ว ทีนี้ลองถอดออกทีละชิ้นดูครับ ปิดชั้นไหนแล้วภาพพังยังไง เป็นวิธีที่เร็วที่สุดที่จะรู้ว่าชั้นนั้นทำหน้าที่อะไรจริง ๆ

โค้ดจริงทั้งไฟล์

ตรงนี้คือปลายทางของหน้าต่างโค้ดที่งอกมาทั้งหกชั้น เอามาต่อกันเป็นไฟล์เดียวที่รันได้จริง ตัวแปรชื่อยาว คอมเมนต์ไทย และกำกับไว้ว่าก้อนไหนคือชั้นไหน

#include <stdio.h>
#include <string.h>
#include <math.h>

/* ---- รูปทรง ---- */
const float R1 = 1;              /* รัศมีวงกลมหน้าตัด */
const float R2 = 2;              /* ระยะจากแกนกลางถึงจุดกลางวงกลมหน้าตัด */
/* ---- กล้องกับจอ ---- */
const float K2 = 5;              /* ระยะจากตาถึงโดนัท ต้องมากกว่า R1 + R2 */
const int   SCREEN_W = 80, SCREEN_H = 22;
const int   CENTER_X = 40, CENTER_Y = 12;
const float MULT_X = 30, MULT_Y = 15;  /* ต่างกันเท่าตัว เพราะช่องอักษรสูงราวสองเท่าของความกว้าง */
/* ---- ความละเอียดของการกวาด ---- */
const float THETA_SPACING = 0.07, PHI_SPACING = 0.02;
/* ---- แถบอักขระ เรียงจากจางไปเข้ม ---- */
const char *CHARS = ".,-~:;=!*#$@";

int main(void) {
  float A = 0, B = 0;                        /* มุมหมุนสองตัว เพิ่มขึ้นทุกเฟรม */
  char  output[SCREEN_W * SCREEN_H];
  float zbuffer[SCREEN_W * SCREEN_H];

  printf("\x1b[2J");                        /* ล้างจอครั้งเดียวตอนเริ่ม */
  for (;;) {
    memset(output, ' ', sizeof(output));
    memset(zbuffer, 0, sizeof(zbuffer));
    float cosA = cos(A), sinA = sin(A), cosB = cos(B), sinB = sin(B);

    for (float theta = 0; theta < 6.28; theta += THETA_SPACING) {
      float costheta = cos(theta), sintheta = sin(theta);

      /* ชั้นที่ 1 จุดบนวงกลม  ชั้นที่ 2 เลื่อนออกไปให้ห่างแกน R2 */
      float circlex = R2 + R1 * costheta;
      float circley = R1 * sintheta;

      for (float phi = 0; phi < 6.28; phi += PHI_SPACING) {
        float cosphi = cos(phi), sinphi = sin(phi);

        /* ชั้นที่ 2 กวาดรอบแกน แล้วชั้นที่ 3 หมุนด้วย A ตามด้วย B และถอยออกไป K2 */
        float x = circlex * (cosB*cosphi + sinA*sinB*sinphi) - circley*cosA*sinB;
        float y = circlex * (sinB*cosphi - sinA*cosB*sinphi) + circley*cosA*cosB;
        float z = K2 + cosA*circlex*sinphi + circley*sinA;

        /* ชั้นที่ 4 หารด้วยระยะ แล้วปัดลงเป็นช่องบนจอ */
        float ooz = 1 / z;
        int xp = (int)(CENTER_X + MULT_X * ooz * x);
        int yp = (int)(CENTER_Y - MULT_Y * ooz * y);   /* ลบ เพราะแกน y ของจอชี้ลง */
        if (xp < 0 || xp >= SCREEN_W || yp < 0 || yp >= SCREEN_H) continue;

        /* ชั้นที่ 6 ทิศตั้งฉากของผิว หมุนด้วยมุมชุดเดียวกัน แล้วทำดอทโปรดักต์กับทิศแสง (0, 1, -1) */
        float L = cosphi*costheta*sinB - cosA*costheta*sinphi - sinA*sintheta
                + cosB*(cosA*sintheta - costheta*sinA*sinphi);
        if (L <= 0) continue;                 /* หันหลังให้แสง ไม่ต้องวาด */

        /* ชั้นที่ 5 ช่องหนึ่งช่องรับได้ตัวเดียว ใครใกล้ตากว่าคนนั้นได้ */
        int idx = xp + SCREEN_W * yp;
        if (ooz > zbuffer[idx]) {
          zbuffer[idx] = ooz;
          int c = (int)(L * 8);               /* ความสว่างกลายเป็นลำดับที่ในแถบอักขระ */
          output[idx] = CHARS[c > 0 ? (c < 11 ? c : 11) : 0];
        }
      }
    }

    printf("\x1b[H");                       /* เลื่อนเคอร์เซอร์กลับมุมซ้ายบน ไม่ล้างจอ ภาพจะได้ไม่กะพริบ */
    for (int k = 0; k < SCREEN_W * SCREEN_H; k++)
      putchar(k % SCREEN_W == SCREEN_W - 1 ? '\n' : output[k]);

    A += 0.04;
    B += 0.02;
  }
  return 0;
}

คอมไพล์ด้วย gcc -o donut donut.c -lm ได้เลยครับ ผมคอมไพล์แล้วรันจริง แล้วเทียบเฟรมที่ได้กับโดนัทที่หมุนอยู่ในหน้านี้

เทียบกับต้นฉบับที่จัดหน้าเป็นรูปโดนัทตอนต้นบท มันคือโปรแกรมเดียวกันเป๊ะ ต่างแค่ชื่อตัวแปรกับการขึ้นบรรทัด ถ้ากลับไปอ่านก้อนนั้นอีกรอบตอนนี้ คุณน่าจะชี้ได้แล้วว่าตัวไหนคือ circlex และวงเล็บก้อนไหนคือการหมุน

ลองแก้ค่าคงที่ดูเอง

โดนัทป่วยสี่ใบ

สี่ใบข้างล่างนี้เขียนผิดไปคนละที่ ทั้งสี่ใบยังคอมไพล์ผ่านและรันได้ ไม่มีใครแจ้งข้อผิดพลาดอะไรเลย ลองทายดูครับว่าแต่ละใบพังตรงชั้นไหน

คนที่เขียนโค้ดก้อนนี้

คนเขียนชื่อ Andy Sloane อ่านว่า "แอนดี้ สโลน" ใช้ชื่อบนเน็ตว่า a1k0n เขาโพสต์โดนัทตัวแรกเมื่อวันที่ 15 กันยายน 2006 และเขียนกำกับไว้เองว่า "This was my first attempt at obfuscated C and I feel it's pretty amateurish" แปลว่านี่เป็นงาน obfuscated C ชิ้นแรกของเขา และเขารู้สึกว่ามันยังมือสมัครเล่นอยู่มาก

ห้าวันต่อมาเขาโพสต์ภาคต่อ ชื่อโพสต์คือ Embellishing the donut: an old-school CG cliche คราวนี้เป็นโดนัทหมุนอยู่เหนือกระดานหมากรุกที่ทอดยาวไม่รู้จบ และตัวนี้เองที่เขาส่งเข้าประกวด IOCCC ปี 2006 แล้วได้รางวัลในสาขาชื่อ Homer's favorite

สิ่งที่ผมอยากให้สังเกตคือชื่อโพสต์ของเขาเอง คำว่า cliche แปลว่าของที่ทำกันจนเฝือ เขาบอกเองว่าโดนัทหมุนไม่ใช่ของใหม่ตั้งแต่ปี 2006 แล้ว มันเป็นแบบฝึกหัดที่วงการเดโมซีนทำกันมานานก่อนหน้านั้น เขาไม่ได้นั่งคิดทุกอย่างขึ้นมาจากศูนย์ เขายืนอยู่บนกองของที่คนอื่นทำไว้ก่อน สิ่งที่เราขาดเวลาเทียบตัวเองกับคนแบบนี้จึงไม่ใช่สมอง แต่คือการเคยเห็นของพวกนี้ผ่านตามาก่อนหลายรอบ

แล้วเรื่องที่ผมชอบที่สุดคือสิ่งที่เกิดขึ้นหลังจากนั้น

สิบเก้าปีกับโดนัทใบเดิม รอบล่าสุดคือการออกแบบวงจรที่ไล่วาดภาพตามลำแสงของจอ VGA ไปสด ๆ โดยไม่มีหน่วยความจำเก็บภาพเลยสักไบต์ ใช้เกตประมาณเจ็ดพันตัว

ระหว่างนั้นเขาก็ทำอย่างอื่นด้วย ตัวเล่นไฟล์เพลง FastTracker 2 บนจาวาสคริปต์ในปี 2015 การเรนเดอร์สามมิติบนเครื่องเล่นเกมจิ๋ว Arduboy ในปี 2017 และหุ่นยนต์เดินตามเส้นความเร็วสูงในปี 2018 เว็บของเขาไม่มีหน้าแนะนำตัว ไม่บอกว่าเรียนอะไรมา ทำงานที่ไหน และไม่มีที่ไหนเลยที่เขาเล่าว่าทำไมวันนั้นถึงเริ่มเขียนโดนัท

ของแถม ตัด sin กับ cos ทิ้งทั้งไฟล์

ปี 2021 Andy กลับมาเขียนภาคบีบโค้ด เขาบอกว่าสิ่งที่ค้างคาใจมาตลอดคือการเรียกไซน์กับโคไซน์เยอะเกินไป ทั้งเพราะมันบังคับให้ต้องลิงก์ไลบรารีคณิตศาสตร์ตอนคอมไพล์ และเพราะมันกินซีพียูมากกว่าที่งานนี้ควรจะกิน ผลคือเวอร์ชันที่หมุนโดยไม่เรียกตรีโกณเลยสักครั้ง และเวอร์ชันที่ใช้เลขจำนวนเต็มล้วนจนรันบนไมโครคอนโทรลเลอร์ที่มีแรมสี่กิโลไบต์ได้

โจทย์ฝึกต่อ

ขอบคุณที่อ่านมาจนถึงตรงนี้

คำว่า amateur ที่ Andy ใช้เรียกงานตัวเองในปี 2006 อ่านว่า "แอมะเชอร์" ภาษาไทยแปลกันว่ามือสมัครเล่น ซึ่งฟังดูเหมือนคำด้อยค่า แต่รากของมันคือคำละติน amator ที่แปลว่า คนที่ทำเพราะรัก ไม่ได้แปลว่าทำไม่เก่ง แปลว่าทำโดยไม่มีใครจ้าง

คุณเพิ่งอ่านบทความยาวเรื่องโค้ดที่พ่นโดนัทออกมาบนเทอร์มินัล มันไม่ได้ทำให้ได้เงิน ไม่ได้อยู่ในข้อสอบ ไม่มีใครสั่งให้เข้าใจ

แหล่งอ้างอิง

1. Andy Sloane, "Donut math: how donut.c works" · a1k0n.net (เผยแพร่ 20 ก.ค. 2011 · สืบค้น 27 ส.ค. 2026) แหล่งของสูตรและค่าคงที่ทุกตัวในบทความนี้ เรียบเรียงและอธิบายใหม่ด้วยคำตัวเอง
2. Andy Sloane, "Have a donut." · a1k0n.net (เผยแพร่ 15 ก.ย. 2006 · สืบค้น 27 ส.ค. 2026) ที่มาของประโยค amateurish
3. Andy Sloane, "Embellishing the donut: an old-school CG cliche" · a1k0n.net (เผยแพร่ 20 ก.ย. 2006 · สืบค้น 27 ส.ค. 2026)
4. IOCCC 2006, "sloane · Homer's favorite" · ioccc.org (สืบค้น 27 ส.ค. 2026) หน้าผลรางวัลที่ยืนยันสาขา
5. Andy Sloane, "Donut math, optimized" · a1k0n.net (เผยแพร่ 13 ม.ค. 2021 · สืบค้น 27 ส.ค. 2026) ที่มาของคำอธิบายเรื่องการเลี่ยงไลบรารีคณิตศาสตร์และเวอร์ชันจำนวนเต็ม
6. Andy Sloane, "From ASCII to ASIC: Porting donut.c to a tiny slice of silicon" · a1k0n.net (เผยแพร่ 10 ม.ค. 2025 · สืบค้น 27 ส.ค. 2026)