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

 (tixy.land)
9 คะแนน โดย GN⁺ 2025-05-11 | 3 ความคิดเห็น | แชร์ทาง WhatsApp
  • tixy เป็นหน้า creative code golfing สำหรับสร้างแพตเทิร์นดอตและแอนิเมชันแบบ 16x16 ด้วยสูตรสั้นๆ เพียงสูตรเดียว
  • ใช้วิธีต่อ expression หลัง (t,i,x,y) => เพื่อกำหนดการเคลื่อนไหวของจุดบนหน้าจอด้วยค่าของเวลาและพิกัด
  • มีข้อจำกัด ไม่เกิน 32 ตัวอักษร จึงเน้นการทดลองกฎคณิตศาสตร์แบบกระชับมากกว่ากราฟิกที่ซับซ้อน
  • เมื่อคลิกจุดบนหน้าจอจะดูข้อมูลเพิ่มเติมได้ ทำให้สำรวจตัวอย่างด้วยตัวเองและเข้าใจหลักการทำงานได้
  • เพราะกฎเล็กๆ แสดงออกมาเป็นแพตเทิร์นภาพได้ทันที จึงเป็นรูปแบบที่ได้สัมผัสทั้ง code golf และ generative art ไปพร้อมกัน

วิธีเขียนของ tixy

  • tixy ระบุตัวเองว่าเป็น “creative code golfing”
  • ผู้ใช้เขียน expression สั้นๆ ต่อท้าย (t,i,x,y) => เพื่อกำหนดการทำงาน
  • หน้าเพจระบุข้อจำกัด 32 characters or less ไว้อย่างชัดเจน

การโต้ตอบกับหน้าจอ

  • คลิก dots บนหน้าจอเพื่อดูข้อมูลเพิ่มเติมได้
  • ผลลัพธ์คือ แอนิเมชันดอต 16x16 ที่สร้างจากกฎคณิตศาสตร์อย่างง่าย

บทความที่เกี่ยวข้อง

3 ความคิดเห็น

 
xcutz 2025-05-16

น่าทึ่งจัง
 
ng0301 2025-05-13

ว้าว...
 
GN⁺ 2025-05-11
ความคิดเห็นบน Hacker News

  • Tixy เจ๋งมากจนผมทำอะไรคล้าย ๆ กันขึ้นมาเอง: https://muffinman.io/pulsar/
    ผมอยากทำแอนิเมชันสำหรับหน้าจอ LED matrix แต่หา tixy อีกครั้งไม่เจอ เลยสร้าง pulsar ขึ้นมา แล้วเพิ่งมาพบมันอีกทีหลังทำเสร็จแล้ว
    ยังมีโปรเจกต์คล้ายกันที่ใช้ HTML slider ด้วย: https://sliderland.blinry.org/

  • ตอนที่เจอ tixy ครั้งแรกเมื่อหลายปีก่อน ผมชอบมาก เลยขออนุญาตผู้เขียนต้นฉบับแล้วทำ https://www.mathsuniverse.com/tixy ซึ่งมีปริศนาที่แก้ได้บนกริด tixy
    ใช้กับนักศึกษาวิทยาการคอมพิวเตอร์อยู่ และทุกคนค่อนข้างอินกันมาก

    • นึกถึง Replicube ที่เพิ่งเปิดตัวเมื่อไม่นานนี้
      เป็นเกมที่ทำเรื่องแนวเดียวกันในแบบ 3D
    • เป็นวิธีสอนที่เจ๋งจริง ๆ
      ตอนแรกเห็นฟังก์ชันเล็ก ๆ แล้วทึ่งมาก และยังทำสำเนาคล้าย ๆ กันไว้ทดลองกับ calculang ด้วย [1]
      ผมเพิ่ม ฟีเจอร์ประเมินผล (F9) ที่เลือกนิพจน์ย่อยเพื่อดูว่ามันทำอะไรได้ ซึ่งช่วยให้จับแพตเทิร์นได้ดีขึ้น วิดีโออยู่ที่ [2]
      [1] https://calculang-editables.netlify.app/tixyish
      [2] https://www.youtube.com/watch?v=uXUd_-xrycs
    • ผมเขียนโปรแกรมมานานกว่า 40 ปีแล้ว และนี่เป็นหนึ่งในวิธีเรียนรู้เรื่องแบบนี้ที่รู้สึกสนุกที่สุด
      มัน สนุก จริง ๆ
    • เด็กอายุ 5 ขวบทำได้ค่อนข้างดีจนมาติดที่ข้อ #7
      ผมช่วยเรื่องไวยากรณ์อยู่ แต่กำลังพยายามอดใจไม่ให้ใบ้แนวคิดไปก่อน
      ชอบ ฟีดแบ็กภาพแบบทันที มาก
    • สงสัยว่าทำไม "(sin(i) * (x > 7)) - (i == 5) + (i == 20) + 0.5 * (i == 32)" ถึงไม่ใช่คำตอบของ ปริศนา 36

  • Weeee: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29s...
    เม็ดเลือดขาวโจมตี: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bco...

  • ได้แรงบันดาลใจจาก tixy เลยทำแอปวาดรูปที่มี แปรงที่โปรแกรมได้: https://fig.sonnet.io
    พลวัตของรูปทรงอิงตามเวลา ไม่ใช่แรงกดหรือความเอียง เลยต้องวาดไปตามจังหวะ ซึ่งสนุกดีทีเดียว
    วิธีการทำงานและวิธี implement อยู่ที่นี่: https://untested.sonnet.io/notes/fig-tree-brushes/

  • ชอบนะ นี่คือ ที่ปัดน้ำฝนหน้ารถ
    https://tixy.land/?code=sin%28t%29*%281%2Bx%2By%29-x

  • โดยพื้นฐานแล้วให้ความรู้สึกเหมือน https://www.shadertoy.com/ สำหรับมือใหม่
    ตรงสเปกผมเลย

  • https://tixy.land/?code=%28%28t%2F4%2Batan2%28x-8%2Cy-7%29%2...
    มันคือ เรดาร์

    • ตอนนี้แค่เพิ่ม จุดกะพริบ สักสองสามจุดก็พอแล้ว

  • ผู้เขียนคือ Martin Kleppe หรือ @aemkei บน X ซึ่งโด่งดังจาก quine สุดทึ่งและเวทมนตร์ JS หลายอย่าง
    https://aem1k.com/world/
    https://aem1k.com/qlock/

  • ระหว่างรออย่างอื่น ผมลองขีด ๆ เขียน ๆ ทำขึ้นมาสองสามอัน
    ข้อจำกัดที่กระตุ้นความคิดสร้างสรรค์ นี่ดีมาก
    X Plus Star
    https://tixy.land/?code=%28sin%28t0.8-sqrt%28%28x-7.5%29**...
    Sin Sin
    https://tixy.land/?code=sin%28sin%28i*sin%28t%2F10%29%29%29
    Traffic
    https://tixy.land/?code=sin%28iit*0.0005%29

  • ดาว 5 แฉก: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%2...