แอนิเมชันดอท 16x16 ที่สร้างด้วยกฎคณิตศาสตร์ง่าย ๆ

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

---

ภาพรวม

• แอนิเมชันนี้สร้างขึ้นโดยใช้ชุด ดอทขนาด 16x16 เป็นพื้นฐาน
• ตำแหน่งและสีหรือสถานะของแต่ละดอทเปลี่ยนแปลงตลอดเวลาตาม กฎคณิตศาสตร์ง่าย ๆ
• วิธีการทำแบบนี้มีทั้ง ประสิทธิภาพในเชิงการเขียนโปรแกรม และ เข้าใจได้อย่างเป็นธรรมชาติ
• แม้ไม่มีเทคนิคที่ซับซ้อนหรือระดับสูง ก็ยังสามารถสร้าง เอฟเฟกต์ภาพที่น่าสนใจและมีความเป็นระเบียบ ได้
• มีศักยภาพสูงในการประยุกต์ใช้กับ วิชวลอาร์ต การสร้างสรรค์เชิงอัลกอริทึม การสอนนักพัฒนามือใหม่ ฯลฯ

เนื้อหาหลัก

• แอนิเมชันแสดงในรูปแบบ กริดสองมิติขนาด 16x16
• การเปลี่ยนแปลงของแต่ละดอทอิงจาก สมการคณิตศาสตร์ หรือกฎเฉพาะบางอย่าง
• ตัวอย่างเช่น การคำนวณพื้นฐานทางคณิตศาสตร์ อย่าง sin, cos, xor หรือ mod ถูกใช้ในการกำหนดการเคลื่อนไหวและสีของดอท
• ไม่จำเป็นต้องใช้ โค้ดที่ซับซ้อนหรือไลบรารีภายนอก เพื่อสร้างเอฟเฟกต์ภาพที่ประณีต
• เพียงแค่นำสูตรง่าย ๆ มาใช้ซ้ำ ก็สามารถ สร้างแพตเทิร์นที่มีเอกลักษณ์ ได้

ความหมายและความเป็นไปได้ในการใช้งาน

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

[xcutz]

น่าทึ่งจัง

[ng0301]

ว้าว...

[GN⁺]

ความคิดเห็นจาก Hacker News

• Tixy น่าทึ่งมาก เลยลองทำอะไรคล้าย ๆ กันเอง เคยอยากทำเว็บไซต์ชื่อ https://muffinman.io/pulsar/ สำหรับสร้างแอนิเมชันบนจอ LED matrix ตอนนั้นหา tixy ไม่เจอเลยทำ pulsar ขึ้นมาเอง แล้วค่อยมาพบ tixy อีกทีทีหลัง ยังมีโปรเจ็กต์คล้ายกันอย่าง https://sliderland.blinry.org/ ที่ใช้ HTML slider ด้วย ของแบบนี้สนุกจริง ๆ
• ตอนเจอ tixy ครั้งแรกเมื่อหลายปีก่อนชอบมาก เลยขออนุญาตผู้สร้างต้นฉบับแล้วทำเว็บไซต์ชื่อ https://www.mathsuniverse.com/tixy ขึ้นมา โดยเพิ่มปริศนาลงในกริดของ tixy และใช้ในคาบวิทยาการคอมพิวเตอร์กับนักเรียน นักเรียนติดกันงอมแงมกับปริศนาพวกนี้
  • มันทำให้นึกถึงเกมปริศนา 3D ที่เพิ่งออกไม่นานชื่อ Replicube ซึ่งเอาแนวคิดแบบเดียวกันไปทำใน 3D
  • วิธีแบบนี้ยอดเยี่ยมมากสำหรับการศึกษา ตอนแรกผมก็ทึ่งกับฟังก์ชันเล็ก ๆ พวกนั้นเหมือนกัน เลยลองทำโคลนด้วย calculang เพื่อทดลอง โดยเพิ่มฟีเจอร์ประเมินผลด้วย F9 ให้เลือก sub-expression แล้วดูผลลัพธ์ได้ ซึ่งช่วยให้เข้าใจแพตเทิร์นมากขึ้นมาก และมีวิดีโอให้ดูด้วย: https://www.youtube.com/watch?v=uXUd_-xrycs
  • มันใช้งานบนมือถือได้ดีด้วย แค่คีย์บอร์ดมือถืออาจจะไม่ค่อยสะดวกนิดหน่อย แต่ก็ไม่ได้เป็นปัญหากับการใช้งาน นั่นเป็นข้อจำกัดของโทรศัพท์เอง
  • ในคอมพิวเตอร์กราฟิกส์ พิกัด (0,0) เริ่มที่มุมซ้ายบน ไม่ใช่ด้านล่าง
• เคยลองทำแอนิเมชันหลายแบบด้วย tixy สนุกมาก: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 และยังทำแพตเทิร์นเม็ดเลือดขาวโจมตีด้วย: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• ลองทำเอฟเฟกต์เปลวไฟด้วย: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• tixy เป็นเวอร์ชันที่ง่ายมากของเว็บอย่าง Shadertoy ซึ่งความง่ายแบบนี้ตรงกับรสนิยมผมพอดี
• ผู้สร้าง tixy คือ Martin Kleppe (@aemkei) ซึ่งดังจาก quine และเทคนิค JS และยังมีโปรเจ็กต์เจ๋ง ๆ อื่นให้ดูได้ที่ https://aem1k.com/world/ , https://aem1k.com/qlock/
• ได้แรงบันดาลใจจาก tixy เลยทำแอปวาดภาพที่มี programmable brush: https://fig.sonnet.io แอปนี้น่าสนุกตรงที่การเคลื่อนไหวของแปรงเปลี่ยนไปตามเวลา ไม่ใช่ตามแรงกดหรือมุม เลยต้องวาดให้เข้าจังหวะ และดูวิธีทำงานกับวิธีสร้างได้ที่นี่: https://untested.sonnet.io/notes/fig-tree-brushes/
• ขอแชร์ตัวอย่างฟังก์ชันแปลก ๆ: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• ลองทำลายดาวห้าแฉกด้วย: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • และยังทำการเคลื่อนไหวของงูสองตัวได้ด้วย: https://tixy.land/?code=exp%28-%28%28x-7%29**2%29%2F12%29sin%28%28y-7%29%2F2-t%29%09-sin%28%28h%3Dhypot%28x-%3D7%2Cy-%3D7%29-5%29%29exp%28-hh%2F9%29cos%28atan2%28y%2Cx%29%2Bt%29
• สามารถทำวงกลมที่เคลื่อนที่ต่อเนื่องและค่อย ๆ ใหญ่ขึ้นด้วย tixy ได้: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t