Manim: Remotion + HyperFrames For Explanatory Math
สรุปย่อ
ประเด็นสำคัญจากวิดีโอ
ช่อง: DevsKingdom · ความยาว: 4 นาที 6 วินาที · ลิงก์: https://www.youtube.com/watch?v=Keavlq8DbnA
# สรุป: Manim: Remotion + HyperFrames For Explanatory Math ช่อง: DevsKingdom · ความยาว: 4 นาที 6 วินาที · ลิงก์: https://www.youtube.com/watch?v=Keavlq8DbnA - วิดีโอแนะนำ Manim เอนจินโอเพนซอร์สสำหรับสร้างแอนิเมชันอธิบายคณิตศาสตร์จากโค้ด เปรียบได้กับ Remotion หรือ HyperFrames ในวงการคณิตศาสตร์ - โปรเจกต์มีดาว (stars) บน GitHub ถึง 90,000 ดาว และเป็นที่นิยมเพราะช่วยแปลงโค้ดให้เป็นวิดีโออธิบายคณิตศาสตร์ได้จริง - สาธิตการติดตั้งที่ตรงไปตรงมาเพียงไม่กี่ขั้นตอน ทั้งบน Kaggle, VPS และเครื่อง local (บนเครื่อง local จะง่ายกว่าเพราะไม่ต้องรันในโหมด VPS) - บน VPS ที่ไม่มีหน้าจอแสดงผล (display) ให้ใช้ flag -w เพื่อส่งออกผลลัพธ์เป็นไฟล์ mp4 ตามคำสั่งตัวอย่างจาก GitHub repo - วิดีโอที่สร้างจะถูกบันทึกลงโฟลเดอร์ videos ซึ่งเป็นโฟลเดอร์เริ่มต้น และจะถูกรีเฟรชทุกครั้งที่รันคำสั่ง - โค้ดตัวอย่างเบื้องต้นคือการสร้างสี่เหลี่ยมจัตุรัสแล้วแปลง (transform) เป็นวงกลม - documentation ของ Manim มี tutorials ตั้งแต่ quick start การสร้างโปรเจกต์ใหม่ ไปจนถึงการทำแอนิเมชันวงกลมและการแปลงรูปทรง - จุดเด่นที่สุดคือเมนู Try it out บนเว็บเบราว์เซอร์ ที่วางโค้ดแล้วรันได้เลย วิดีโอถูกสร้างขึ้นบนหน้าเว็บทันทีและดาวน์โหลดได้ - ไม่จำเป็นต้องใช้เครื่อง local, Kaggle notebook หรือ GPU เพราะรันบนเบราว์เซอร์ของ documentation ได้โดยตรง - ปิดท้ายด้วยคำขอให้กดไลก์ กดติดตาม และคอมเมนต์หากมีคำถาม **ความเห็นสั้นๆ:** วิดีโอสั้นและกระชับ เหมาะสำหรับผู้ที่อยากรู้จัก Manim อย่างรวดเร็ว โดยเฉพาะไฮไลต์เรื่องการลองเล่นบนเว็บเบราว์เซอร์โดยไม่ต้องติดตั้งอะไร ส่วนเนื้อหาเชิงลึกเรื่องการใช้งานจริงยังมีจำกัด ควรดู documentation เพิ่มเติม
คำแปลเต็ม
แปลตามบทสนทนาต้นฉบับ ปรับเป็นภาษาไทยธรรมชาติ
สวัสดีทุกคน ยินดีต้อนรับกลับสู่อีกหนึ่งวิดีโอครับ ในบทช่วยสอนวันนี้ เราจะมาแนะนำโปรเจกต์ที่น่าสนใจมาก ซึ่งเรียกได้ว่าเป็น Remotion ของวงการคณิตศาสตร์เลยก็ว่าได้ ชื่อว่า Manim ครับ นี่คือเอนจินสำหรับสร้างแอนิเมชันเพื่ออธิบายเนื้อหาคณิตศาสตร์ในวิดีโอ มันจะแปลงโค้ดให้กลายเป็นวิดีโอเพื่ออธิบายคณิตศาสตร์ และคุณจะเห็นว่าตอนนี้โปรเจกต์นี้มีดาว (stars) บน GitHub ถึง 90,000 ดาวแล้ว ผู้คนชอบโปรเจกต์นี้มากเพราะมันมีประโยชน์มากจริงๆ
ในบทช่วยสอนวันนี้ ผมจะแสดงวิธีใช้งาน วิธีติดตั้ง และวิธีรันจริงๆ โดยที่ไม่ต้องใช้เครื่องมือเขียนโค้ดอะไรเลย แค่รันบนเว็บเบราว์เซอร์ก็ได้ สะดวกมากครับ ถ้าอยากรู้ว่ามันหน้าตาเป็นยังไง ก็มี documentation ที่ดีมาก ผมจะพาไปดูกันทีหลังในวิดีโอนี้ แต่ก่อนอื่นมาดูกันก่อนว่ามันหน้าตาเป็นแบบไหน นี่คือวิดีโอตัวอย่างจาก GitHub repo ของโปรเจกต์ เค้ามีตัวอย่างอยู่ตรงนี้ แล้วนี่คือหน้าตาของตัวอย่าง ลองกดเล่นดูว่ามันดีแค่ไหน
มันดีจริงๆ ครับ นี่คือเหมือน Remotion หรือ HyperFrames สำหรับคณิตศาสตร์เลย และถ้าอยากติดตั้ง ก็ใช้แค่ไม่กี่ขั้นตอน ตรงไปตรงมามากครับ เราจะตั้งค่าบน Kaggle กัน จะทำบน VPS ก็ได้ ถ้าทำบนเครื่อง local ของตัวเองก็ยิ่งง่ายกว่า เพราะไม่ต้องรันในโหมด VPS
ถ้าอยากลองติดตั้งจริงๆ ก็ทำตามขั้นตอนการติดตั้งแพ็กเกจ (packages) เหล่านี้ แล้วก็ดาวน์โหลด repo และติดตั้ง dependencies ตามหลังได้เลย เพราะว่าถ้ารันบน VPS มันไม่มีหน้าจอแสดงผล (display) คุณก็แค่ใช้ flag -w ได้ นี่คือคำสั่งตัวอย่างจาก GitHub repo และคุณใช้ -w เพื่อให้ผลลัพธ์ออกมาเป็นไฟล์ mp4 ซึ่งคุณสามารถดาวน์โหลดได้จากโฟลเดอร์ videos ในไดเรกทอรีทำงานของคุณ
โฟลเดอร์ videos คือโฟลเดอร์เริ่มต้นสำหรับวิดีโอ เพราะโปรเจกต์จะรีเฟรชวิดีโอใหม่ทุกครั้งที่คุณรันคำสั่ง เราทำวิดีโอตัวอย่างแล้วก็ทำอีกวิดีโอหนึ่ง แล้วคุณจะเห็นว่าวิดีโอตัวอย่างไม่อยู่ในโฟลเดอร์ videos อีกแล้ว แต่คุณสามารถสร้างมันขึ้นมาใหม่ได้โดยการรันคำสั่งนี้อีกครั้ง
โดยพื้นฐานแล้วมันก็หน้าตาแบบนี้ครับ คุณสามารถสร้างสี่เหลี่ยมจัตุรัสแล้วแปลงมันให้เป็นวงกลมตามโค้ดตัวอย่างตรงนี้ ถ้าอยากดูตัวอย่างเพิ่ม ก็ยังมีตัวอย่างอื่นๆ ใน documentation ของ Manim และจาก tutorials จะเห็นว่ามันสอนวิธี quick start ซึ่งก็คือการสร้างโปรเจกต์ใหม่ วิธีทำแอนิเมชันวงกลม และยังมีวิดีโอที่แสดงให้เห็นว่ามันหน้าตาเป็นยังไง รวมถึงคำอธิบายเรื่องการแปลงสี่เหลี่ยมจัตุรัสเป็นวงกลม ซึ่งก็คือสิ่งที่เราเพิ่งเห็นใน Kaggle notebook นั่นเอง
ส่วนที่ดีที่สุดของโปรเจกต์นี้คือคุณสามารถลองเล่นได้เลยบนเว็บเบราว์เซอร์บนหน้าเว็บนี้ คุณจะเห็นว่ามีเมนู Try it out คุณก็แค่วางโค้ดลงไปตรงนี้ พอรันแล้วก็จะเห็นว่ามันสร้างวิดีโอขึ้นมาบนหน้าเว็บได้เลย แล้วก็กด download เพื่อดาวน์โหลดได้
ในแง่นั้นคุณไม่จำเป็นต้องมีเครื่อง local หรือ Kaggle notebook ด้วยซ้ำ ไม่ต้องมี GPU เลย คุณรันมันบนเบราว์เซอร์ของ documentation ได้โดยตรง ซึ่งเจ๋งมากๆ ครับ หวังว่าวิดีโอนี้จะเป็นประโยชน์นะครับ ถ้าชอบก็กดไลก์ กดติดตาม หรือคอมเมนต์ได้ถ้ามีคำถาม ขอบคุณมากที่สนับสนุนช่อง แล้วเจอกันในวิดีโอหน้าครับ
หมายเหตุการแปล
ความโปร่งใสเกี่ยวกับความไม่แน่นอนในต้นฉบับ
- จุดที่ถอดเสียงเพี้ยนและตีความใหม่ (ไม่จัดว่าเป็น [ฟังไม่ชัด] เพราะความหมายชัดเจนจากบริบท):
- ไม่มีส่วนใดในคำบรรยายที่ฟังไม่ชัดถึงขนาดไม่สามารถแปลได้ จึง**ไม่มีเซกเมนต์ [ฟังไม่ชัด]** ในไฟล์คำแปล
อภิธานศัพท์เทคนิค
คำศัพท์และชื่อผลิตภัณฑ์ที่คงรูปภาษาอังกฤษ
| ศัพท์ | คำแปล / คำอธิบาย |
|---|---|
| Manim | เอนจินสร้างแอนิเมชันอธิบายคณิตศาสตร์จากโค้ด (ในคำบรรยายต้นฉบับออกเสียงเป็น "manin") |
| Remotion | เฟรมเวิร์กสร้างวิดีโอด้วยโค้ด (React-based) ใช้เปรียบเทียบว่า Manim คือ Remotion ของวงการคณิตศาสตร์ |
| HyperFrames | เฟรมเวิร์กสร้างวิดีโอด้วยโค้ดอีกตัว ใช้เปรียบเทียบเช่นเดียวกับ Remotion |
| animation engine | เอนจินสำหรับสร้างแอนิเมชัน |
| stars (GitHub) | ดาวบน GitHub ที่แสดงความนิยมของโปรเจกต์ (วิดีโอกล่าวถึง 90,000 ดาว) |
| documentation | เอกสารคู่มือการใช้งานของโปรเจกต์ |
| repo (GitHub repository) | คลังเก็บโค้ดของโปรเจกต์บน GitHub |
| VPS | เซิร์ฟเวอร์เสมือนส่วนตัว (Virtual Private Server) ใช้รัน Manim แบบไม่มีหน้าจอ |
| local machine | เครื่องคอมพิวเตอร์ในเครื่องตัวเอง |
| display | หน้าจอแสดงผล ซึ่ง VPS มักไม่มี จึงต้องใช้ flag -w |
| flag -w | อาร์กิวเมนต์ในคำสั่งรัน Manim เพื่อเขียนผลลัพธ์เป็นไฟล์วิดีโอ (mp4) |
| mp4 | รูปแบบไฟล์วิดีโอที่ใช้ส่งออกผลลัพธ์ |
| dependencies | ไลบรารี/แพ็กเกจที่โปรเจกต์ต้องพึ่งพา ต้องติดตั้งก่อนรัน |
| packages | แพ็กเกจหรือชุดโค้ดที่ต้องติดตั้งตามขั้นตอน |
| videos folder | โฟลเดอร์เริ่มต้นที่ Manim ใช้เก็บไฟล์วิดีโอที่สร้างขึ้น (รีเฟรชทุกครั้งที่รันคำสั่ง) |
| square | สี่เหลี่ยมจัตุรัส (รูปทรงที่ใช้ในโค้ดตัวอย่าง) |
| circle | วงกลม (รูปทรงที่ใช้ในโค้ดตัวอย่าง) |
| transform | การแปลงรูปทรงจากสี่เหลี่ยมเป็นวงกลมในแอนิเมชัน |
| quick start | คู่มือเริ่มต้นใช้งานอย่างรวดเร็ว เช่น การสร้างโปรเจกต์ใหม่ |
| tutorial(s) | บทเรียน/บทช่วยสอนใน documentation |
| Kaggle | แพลตฟอร์มทำ data science แบบ notebook บนคลาวด์ (ในคำบรรยายต้นฉบับฟังเป็น "KGO"/"keg notebook") |
| notebook (Kaggle notebook) | สมุดโค้ดออนไลน์บน Kaggle ที่รันโค้ดได้ |
| Try it out | เมนูบนหน้าเว็บ documentation ให้ลองวางโค้ดแล้วรันสร้างวิดีโอได้ทันที |
| download | ปุ่มดาวน์โหลดวิดีโอที่สร้างจากหน้าเว็บ |
| GPU | การ์ดประมวลผลกราฟิก ซึ่งวิดีโอย้ำว่าไม่จำเป็นต้องใช้ |
ซับไตเติ้ลภาษาไทย
ดาวน์โหลดหรือดูซับทั้งหมด
1 00:00:00,000 --> 00:00:01,095 สวัสดีทุกคน 2 00:00:01,095 --> 00:00:04,561 ยินดีต้อนรับกลับสู่อีกหนึ่งวิดีโอครับ 3 00:00:04,561 --> 00:00:06,154 ในบทช่วยสอนวันนี้ 4 00:00:06,154 --> 00:00:09,245 เราจะมาแนะนำโปรเจกต์ที่น่าสนใจมาก
เปิดดูซับไตเติ้ลทั้งหมด (69 segments)
1 00:00:00,000 --> 00:00:01,095 สวัสดีทุกคน 2 00:00:01,095 --> 00:00:04,561 ยินดีต้อนรับกลับสู่อีกหนึ่งวิดีโอครับ 3 00:00:04,561 --> 00:00:06,154 ในบทช่วยสอนวันนี้ 4 00:00:06,154 --> 00:00:09,245 เราจะมาแนะนำโปรเจกต์ที่น่าสนใจมาก 5 00:00:09,245 --> 00:00:11,869 ซึ่งเรียกได้ว่าเป็น Remotion 6 00:00:11,869 --> 00:00:15,897 ของวงการคณิตศาสตร์เลยก็ว่าได้ ชื่อว่า Manim 7 00:00:15,897 --> 00:00:16,992 ครับ 8 00:00:16,992 --> 00:00:23,362 นี่คือเอนจินสำหรับสร้างแอนิเมชันเพื่ออธิบายเนื้อหาคณิตศาสตร์ในวิดีโอ 9 00:00:23,362 --> 00:00:28,140 มันจะแปลงโค้ดให้กลายเป็นวิดีโอเพื่ออธิบายคณิตศาสตร์ 10 00:00:28,140 --> 00:00:32,356 และคุณจะเห็นว่าตอนนี้โปรเจกต์นี้มีดาว (stars) 11 00:00:32,356 --> 00:00:34,979 บน GitHub ถึง 90,000 ดาวแล้ว 12 00:00:34,979 --> 00:00:39,476 ผู้คนชอบโปรเจกต์นี้มากเพราะมันมีประโยชน์มากจริงๆ 13 00:00:39,476 --> 00:00:45,472 ในบทช่วยสอนวันนี้ ผมจะแสดงวิธีใช้งาน วิธีติดตั้ง และวิธีรันจริงๆ 14 00:00:45,472 --> 00:00:49,407 โดยที่ไม่ต้องใช้เครื่องมือเขียนโค้ดอะไรเลย 15 00:00:49,407 --> 00:00:53,248 แค่รันบนเว็บเบราว์เซอร์ก็ได้ สะดวกมากครับ 16 00:00:53,248 --> 00:00:56,621 ถ้าอยากรู้ว่ามันหน้าตาเป็นยังไง ก็มี 17 00:00:56,621 --> 00:00:58,682 documentation ที่ดีมาก 18 00:00:58,682 --> 00:01:01,493 ผมจะพาไปดูกันทีหลังในวิดีโอนี้ 19 00:01:01,493 --> 00:01:05,615 แต่ก่อนอื่นมาดูกันก่อนว่ามันหน้าตาเป็นแบบไหน 20 00:01:05,615 --> 00:01:08,894 นี่คือวิดีโอตัวอย่างจาก GitHub repo 21 00:01:08,894 --> 00:01:12,267 ของโปรเจกต์ เค้ามีตัวอย่างอยู่ตรงนี้ 22 00:01:12,267 --> 00:01:14,796 แล้วนี่คือหน้าตาของตัวอย่าง 23 00:01:14,796 --> 00:01:18,638 ลองกดเล่นดูว่ามันดีแค่ไหน มันดีจริงๆ ครับ 24 00:01:18,638 --> 00:01:22,198 นี่คือเหมือน Remotion หรือ HyperFrames 25 00:01:22,198 --> 00:01:25,664 สำหรับคณิตศาสตร์เลย และถ้าอยากติดตั้ง 26 00:01:25,664 --> 00:01:29,318 ก็ใช้แค่ไม่กี่ขั้นตอน ตรงไปตรงมามากครับ 27 00:01:29,318 --> 00:01:33,253 เราจะตั้งค่าบน Kaggle กัน จะทำบน VPS ก็ได้ 28 00:01:33,253 --> 00:01:37,375 ถ้าทำบนเครื่อง local ของตัวเองก็ยิ่งง่ายกว่า 29 00:01:37,375 --> 00:01:39,717 เพราะไม่ต้องรันในโหมด VPS 30 00:01:39,717 --> 00:01:41,778 ถ้าอยากลองติดตั้งจริงๆ 31 00:01:41,778 --> 00:01:45,713 ก็ทำตามขั้นตอนการติดตั้งแพ็กเกจ (packages) 32 00:01:45,713 --> 00:01:49,461 เหล่านี้ แล้วก็ดาวน์โหลด repo และติดตั้ง 33 00:01:49,461 --> 00:01:53,489 dependencies ตามหลังได้เลย เพราะว่าถ้ารันบน 34 00:01:53,489 --> 00:01:57,799 VPS มันไม่มีหน้าจอแสดงผล (display) คุณก็แค่ใช้ 35 00:01:57,799 --> 00:02:01,734 flag -w ได้ นี่คือคำสั่งตัวอย่างจาก GitHub 36 00:02:01,734 --> 00:02:06,043 repo และคุณใช้ -w เพื่อให้ผลลัพธ์ออกมาเป็นไฟล์ 37 00:02:06,043 --> 00:02:09,791 mp4 ซึ่งคุณสามารถดาวน์โหลดได้จากโฟลเดอร์ 38 00:02:09,791 --> 00:02:14,007 videos ในไดเรกทอรีทำงานของคุณ โฟลเดอร์ videos 39 00:02:14,007 --> 00:02:16,911 คือโฟลเดอร์เริ่มต้นสำหรับวิดีโอ 40 00:02:16,911 --> 00:02:21,970 เพราะโปรเจกต์จะรีเฟรชวิดีโอใหม่ทุกครั้งที่คุณรันคำสั่ง 41 00:02:21,970 --> 00:02:25,811 เราทำวิดีโอตัวอย่างแล้วก็ทำอีกวิดีโอหนึ่ง 42 00:02:25,811 --> 00:02:30,214 แล้วคุณจะเห็นว่าวิดีโอตัวอย่างไม่อยู่ในโฟลเดอร์ 43 00:02:30,214 --> 00:02:31,526 videos อีกแล้ว 44 00:02:31,526 --> 00:02:37,053 แต่คุณสามารถสร้างมันขึ้นมาใหม่ได้โดยการรันคำสั่งนี้อีกครั้ง 45 00:02:37,053 --> 00:02:40,333 โดยพื้นฐานแล้วมันก็หน้าตาแบบนี้ครับ 46 00:02:40,333 --> 00:02:47,359 คุณสามารถสร้างสี่เหลี่ยมจัตุรัสแล้วแปลงมันให้เป็นวงกลมตามโค้ดตัวอย่างตรงนี้ 47 00:02:47,359 --> 00:02:51,669 ถ้าอยากดูตัวอย่างเพิ่ม ก็ยังมีตัวอย่างอื่นๆ ใน 48 00:02:51,669 --> 00:02:55,416 documentation ของ Manim และจาก tutorials 49 00:02:55,416 --> 00:02:58,320 จะเห็นว่ามันสอนวิธี quick start 50 00:02:58,320 --> 00:03:01,037 ซึ่งก็คือการสร้างโปรเจกต์ใหม่ 51 00:03:01,037 --> 00:03:02,911 วิธีทำแอนิเมชันวงกลม 52 00:03:02,911 --> 00:03:07,502 และยังมีวิดีโอที่แสดงให้เห็นว่ามันหน้าตาเป็นยังไง 53 00:03:07,502 --> 00:03:12,467 รวมถึงคำอธิบายเรื่องการแปลงสี่เหลี่ยมจัตุรัสเป็นวงกลม 54 00:03:12,467 --> 00:03:16,777 ซึ่งก็คือสิ่งที่เราเพิ่งเห็นใน Kaggle notebook 55 00:03:16,777 --> 00:03:17,871 นั่นเอง 56 00:03:17,871 --> 00:03:25,741 ส่วนที่ดีที่สุดของโปรเจกต์นี้คือคุณสามารถลองเล่นได้เลยบนเว็บเบราว์เซอร์บนหน้าเว็บนี้ 57 00:03:25,741 --> 00:03:28,458 คุณจะเห็นว่ามีเมนู Try it out 58 00:03:28,458 --> 00:03:30,800 คุณก็แค่วางโค้ดลงไปตรงนี้ 59 00:03:30,800 --> 00:03:36,047 พอรันแล้วก็จะเห็นว่ามันสร้างวิดีโอขึ้นมาบนหน้าเว็บได้เลย 60 00:03:36,047 --> 00:03:39,326 แล้วก็กด download เพื่อดาวน์โหลดได้ 61 00:03:39,326 --> 00:03:43,541 ในแง่นั้นคุณไม่จำเป็นต้องมีเครื่อง local หรือ 62 00:03:43,541 --> 00:03:47,383 Kaggle notebook ด้วยซ้ำ ไม่ต้องมี GPU เลย 63 00:03:47,383 --> 00:03:51,036 คุณรันมันบนเบราว์เซอร์ของ documentation 64 00:03:51,036 --> 00:03:53,566 ได้โดยตรง ซึ่งเจ๋งมากๆ ครับ 65 00:03:53,566 --> 00:03:56,939 หวังว่าวิดีโอนี้จะเป็นประโยชน์นะครับ 66 00:03:56,939 --> 00:03:59,093 ถ้าชอบก็กดไลก์ กดติดตาม 67 00:03:59,093 --> 00:04:01,436 หรือคอมเมนต์ได้ถ้ามีคำถาม 68 00:04:01,436 --> 00:04:03,684 ขอบคุณมากที่สนับสนุนช่อง 69 00:04:03,684 --> 00:04:06,120 แล้วเจอกันในวิดีโอหน้าครับ