p5.js - ไลบรารี JavaScript โอเพนซอร์สสำหรับการเขียนโค้ดและสร้างงานศิลปะ

 (p5js.org)
3 คะแนน โดย GN⁺ 2024-08-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • p5.js เป็นไลบรารี JavaScript โอเพนซอร์สฟรีที่ช่วยให้เริ่มเรียนการเขียนโค้ดและสร้างงานศิลปะบนเว็บได้
  • มุ่งรองรับผู้ใช้หลากหลายกลุ่มอย่างศิลปิน นักออกแบบ ผู้เริ่มต้น และนักการศึกษา โดยมี ชุมชนที่เปิดกว้างและครอบคลุม เป็นหัวใจสำคัญของโปรเจกต์
  • แทนที่จะเพิ่มฟีเจอร์ใหม่แบบไม่จำกัด โครงการเลือกแนวทางที่ยกเว้นเฉพาะฟีเจอร์ที่ช่วย เพิ่มการเข้าถึง
  • มี Reference, ตัวอย่าง, เว็บเอดิเตอร์ และวิดีโอแนะนำแบบโต้ตอบให้ใช้งาน เพื่อเริ่มเรียนรู้และสร้างงานด้านแอนิเมชัน ออดิโอ และ WebGL ได้ทันที
  • มีทั้งดาวน์โหลด การบริจาค การเข้าร่วมชุมชน และลิงก์ไปยัง p5.js 2.0 beta รวมไว้ในที่เดียว จึงเป็นจุดเริ่มต้นสำหรับทั้งผู้เรียนและผู้มีส่วนร่วม

p5.js สำหรับการเขียนโค้ดและงานศิลปะ

  • p5.js เป็น ไลบรารี JavaScript โอเพนซอร์สฟรีสำหรับการเรียนรู้การเขียนโค้ดและสร้างงานศิลปะ
  • ยินดีต้อนรับผู้ใช้ที่หลากหลาย เช่น ศิลปิน นักออกแบบ ผู้เริ่มต้น และนักการศึกษา
  • โปรเจกต์นี้ดำเนินงานโดยมีชุมชนที่เปิดกว้างและใส่ใจดูแลกันเป็นศูนย์กลาง
    • มีตัวอย่างกิจกรรม เช่น Coding Club สำหรับผู้มีอายุ 50 ปีขึ้นไปในเกาหลี และเวิร์กช็อปใน Nairobi และ NYC
  • นโยบายการเพิ่มฟีเจอร์มีความชัดเจนพอสมควร
    • จะไม่เพิ่มฟีเจอร์ใหม่ ยกเว้นฟีเจอร์ที่ช่วยเพิ่ม การเข้าถึง

เส้นทางในการเริ่มเรียนรู้และสร้างผลงาน

  • Reference: เอกสารอ้างอิงของไลบรารี p5.js
  • Examples: พื้นที่สำหรับเรียนรู้ p5.js ผ่านตัวอย่าง
  • Start Coding: เอดิเตอร์ p5.js สำหรับเริ่มเขียนโค้ดบนเว็บได้ทันที
  • interactive video: วิดีโอแนะนำแบบโต้ตอบที่ครอบคลุมแอนิเมชัน ออดิโอ WebGL การเข้าถึง และวิธีการมีส่วนร่วม
  • Download Library: ดาวน์โหลดไลบรารี p5.js

ชุมชนและการมีส่วนร่วม

  • Community: หน้าสำหรับดูความเคลื่อนไหวของชุมชน p5.js
  • Donate: ช่องทางบริจาคเพื่อสนับสนุนโปรเจกต์
  • p5.js 2.0 beta: เว็บไซต์เบตาแยกสำหรับดู p5.js 2.0 เวอร์ชันใหม่

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

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

 
GN⁺ 2024-08-04
ความคิดเห็นจาก Hacker News

  • เหตุผลหลักที่ลิงก์นี้ขึ้นบน HN ตอนนี้ น่าจะเป็นเพราะ เว็บไซต์ใหม่ของ p5.js
    ในปี 2023 Sovereign Tech Fund ให้ เงินสนับสนุน 450,000 ยูโร แก่ทีม p5.js ในนามของ “การปรับปรุงโครงสร้างเอกสารและการเข้าถึงของ p5.js” และผลลัพธ์ที่เห็นตอนนี้ดูเหมือนจะมาจากการลงทุนนั้น
    โดยส่วนตัวคิดว่ามีผลงานออกมาจริง การนำทางและการค้นหาในไซต์ง่ายขึ้นมาก และข้อมูลก็มีประโยชน์กว่าเดิม เช่น ลองเทียบเอกสารเก่าและเอกสารใหม่เกี่ยวกับวิธีใช้ตัวแก้ไข p5.js และแคนวาสด้วย screen reader ได้
    [1] - STF announcement/progress - https://p5js.org/events/stf-2024/
    [2] - Using p5 with a screen reader (old version) - https://archive.p5js.org/learn/p5-screen-reader.html
    [3] - How to Use the p5.js Web Editor with a Screen Reader (new) - https://p5js.org/tutorials/p5js-with-screen-reader/
    [4] - Writing Accessible Canvas Descriptions (new) - https://p5js.org/tutorials/writing-accessible-canvas-descrip...

    • เมื่อไม่นานมานี้ลองทำโฆษณาดิจิทัลชิ้นหนึ่งทั้งหมดด้วย Processing แล้วพอร์ตไป p5.js แม้ p5.js จะตามทันขึ้นมาแล้ว แต่ Processing ก็ยังทำงานด้วยง่ายกว่ามาก
      เคยใช้ Processing เมื่อราว 10 ปีก่อน ตอนนั้นก็ง่ายมากอยู่แล้ว ส่วนใน p5.js ก็เจอบั๊กหรือส่วนที่ยังไม่ได้ implement ได้ง่าย แม้จะพอร์ตให้เกือบเหมือนกันได้ แต่ไม่ใช่แบบ 1:1 และต้องเรียนรู้ API บางส่วน
      ด้านประสิทธิภาพ p5.js ยังไม่ใกล้เคียง d3 หรือ three.js เลย พูดตรง ๆ ว่าในปี 2024 นอกจากเป็นเครื่องมือเพื่อการศึกษาแล้ว p5.js ยังมีความหมายแค่ไหนก็ชวนสงสัย แอนิเมชันบนเว็บสมัยนี้ดูเหมือนทำด้วย CSS3 รุ่นใหม่และไลบรารีเสริมจะง่ายกว่า และยังดูเป็นไปได้ที่จะมีเวิร์กโฟลว์ง่าย ๆ จากแอปเวกเตอร์ฟรีต่อไปยัง CSS
      แม้แต่งานที่ต้องคำนวณระดับพิกเซล ก็ไม่มีวิธีง่าย ๆ ในการใช้ GPU อย่างมีประสิทธิภาพ ดังนั้น เงินสนับสนุน 450,000 ยูโร จึงรู้สึกค่อนข้างแปลก โดยเฉพาะเมื่อถูกจัดสรรให้เฟรมเวิร์กที่ไม่ได้รับความนิยมมากนัก
    • ดีที่ยังเปิดให้ดูไซต์เก่าได้ที่ https://archive.p5js.org/
      แต่ไม่ชอบการจัดวางบนจอใหญ่เท่าไร บทช่วยสอนที่ลิงก์ไว้ [1] เป็นย่อหน้าชิดซ้ายแบบความกว้างคงที่ ทำให้ครึ่งขวาของหน้าจอว่างอยู่ ในทางกลับกัน องค์ประกอบอย่างหน้าภาพรวมเอกสารอ้างอิง [2] กลับขยายเต็มหน้าจอเป็น 4 คอลัมน์ ซึ่งดูใช้ได้เมื่อย่อหน้าต่างเบราว์เซอร์เหลือครึ่งจอ แต่พอขยายเต็มจอแล้วอ่านยาก
      [1]: https://p5js.org/tutorials/p5js-with-screen-reader/
      [2]: https://p5js.org/reference/
    • เมื่อวาน JavaScript Weekly ก็แนะนำเรื่องนี้ค่อนข้างเด่น
      มีผู้สมัครรับประมาณ 175,000 คน จึงมักเห็นลิงก์ที่ใส่ไว้ในนั้นขึ้นหน้าแรกของ HN ในอีกไม่กี่ชั่วโมงถัดมา แม้แทบจะพิสูจน์ความเกี่ยวข้องจริง ๆ ไม่ได้ แต่ก็ถือเป็นหนึ่งในความสนุกของการที่ลิงก์แพร่กระจายในอีโคซิสเต็ม
    • ไซต์เก่าก็ใช้ได้ดี และเป็น responsive สำหรับมือถือ อยู่แล้ว
      ไซต์ใหม่ปรับให้เหมาะกับมือถือมากขึ้น และทำให้อ่านเนื้อหาได้มากขึ้นบนหน้าจอความหนาแน่นสูง การที่ p5.js กลับมาได้รับความสนใจใหม่ก็สมเหตุสมผลดี และวิดีโอ Coding Train ที่เกี่ยวข้องก็คุ้มค่าที่จะดูเช่นกัน

  • ChatGPT รู้จัก P5.js ค่อนข้างดี ถ้าบอกว่า “ช่วยเขียนโปรแกรม P5 ที่วาดคลื่นไซน์และปรับเฟสด้วยสไลเดอร์ได้” ก็สร้างให้ได้ทันที
    ผมใช้ ChatGPT กับ P5.js ทำเครื่องมือออกแบบสำหรับถ่วงสมดุลมวล 5 ก้อนบนเส้นรอบวง เพื่อสร้างคันชักแม่เหล็กแบบหมุนที่ลด harmonic locking
    ลองลากจุดยอดของรูปห้าเหลี่ยมได้: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
    ผลงานที่พิมพ์ 3D: https://www.instagram.com/p/Cr4ZXGztY27/

    • น่าสนใจ แล้วเอาไปใช้ทำอะไร?
    • ทำให้นึกภาพว่า LLM จะคอยเขียนโปรแกรมคอนเทนต์ใหม่ ๆ ของเกมไปเรื่อย ๆ เพื่อสร้าง เกมแบบ procedural generation

  • เป็นเว็บไซต์ที่สวยจริง ๆ แปลกใจที่ในส่วน About ตัดเนื้อหาว่านี่คือ สิ่งที่สืบทอดแนวคิดจาก Processing ออกไป
    ตอนนี้ p5.js อาจดังยิ่งกว่า Processing แล้ว หรืออาจดังยิ่งกว่า Processing ในอดีตเสียอีกก็ได้

    • มี ความแตกแยก ระหว่าง Ben Fry กับ Processing Foundation จึงดูเป็นไปได้ว่าเป็นเหตุผลทางการเมือง
      หนึ่งในข้อไม่พอใจหลักของเขาคือ โปรเจกต์ p5.js เข้ามาครอบงำ Processing Foundation และทำให้การพัฒนา Processing ถูกลดบทบาทลง
    • เคยชอบ proce55ing ในฐานะภาษาเล็ก ๆ มาก
      ในยุคที่การจัดการพิกเซลบนพื้นที่อย่างแคนวาสในเว็บเพจเพื่อสร้างการทดลองด้านภาพที่น่าสนใจยังค่อนข้างยาก มันเป็นเครื่องมือที่สมเหตุสมผลจริง ๆ และอ่านง่าย เข้าถึงได้ดีสำหรับศิลปินที่มีประสบการณ์เขียนโปรแกรมไม่มาก

  • ตอนเรียนมหาวิทยาลัย เคยเล่นกับ p5.js แล้วสนุกมาก และเมื่อก่อนก็เคยทำ เซลลูลาร์ออโตมาตา เล็ก ๆ เองด้วย: https://ezhik.me/beyond184/
    บังเอิญว่างานที่ทำให้เริ่มสนใจดิจิทัลอาร์ตครั้งแรก ซึ่งเหมือนเป็นการคารวะต่อคอมพิวติ้งอย่างสนุกสนาน ก็ใช้ p5.js ด้วย: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
    หนึ่งในสิ่งที่ยากที่สุดสำหรับโปรแกรมเมอร์คือการต้องฝ่าฟันโค้ด boilerplate ก่อนจะวางพิกเซลแรกลงบนหน้าจอได้ แต่ p5.js แก้เรื่องนั้นได้ค่อนข้างดี ทำให้โฟกัสกับ ด้านการสร้างสรรค์ ของ “creative coding” ได้มากขึ้น
    คงไม่ใช้ p5.js สำหรับ “การพัฒนาซอฟต์แวร์ขนาดใหญ่จริง ๆ” แต่เวลาที่อยากสเก็ตช์งาน มันคือเครื่องมือดิจิทัลแรก ๆ ที่นึกถึง

  • ได้รู้จักไลบรารีนี้เมื่อไม่กี่ปีก่อนเพราะ Daniel Shiffman
    วิดีโอของเขาเป็นสิ่งสำคัญมากในการเติบโตในฐานะโปรแกรมเมอร์

  • เป็นไลบรารีที่ค่อนข้างดีสำหรับทำเกมอย่างรวดเร็ว
    เคยทำ ซิมูเลชันน้ำ เล็ก ๆ ด้วย p5.js และชอบมากที่ p5 เรียนรู้ได้ง่าย
    [1]: https://github.com/trungdq88/summer

  • Processing ซึ่งเดิมทีมีพื้นฐานจาก Java เป็นแรงบันดาลใจให้ไลบรารีจำนวนมาก
    ทุกวันนี้สามารถหาไลบรารีที่เข้ากันได้ในระดับหนึ่งในภาษายอดนิยมส่วนใหญ่
    เคยเขียนเวอร์ชันสำหรับ Racket เป็นโปรเจกต์ช่วงฤดูร้อน: https://docs.racket-lang.org/manual-sketching/
    แรงบันดาลใจที่ใหญ่ที่สุดคือช่อง YouTube “The Coding Train” ของ Daniel Shiffman เขามีเซนส์ในการเลือกปัญหาและอัลกอริทึมที่น่าสนใจทางภาพ และความกระตือรือร้นของเขาก็ไม่มีใครเทียบได้
    https://thecodingtrain.com/

  • เคยใช้ p5.js ในงานมืออาชีพมาค่อนข้างมาก แต่ถ้าใครกำลังจะใช้ตอนนี้ ก็ควรรู้ไว้ว่าเกิดอะไรขึ้นกับหนึ่งในผู้ร่วมก่อตั้ง foundation และผู้สร้าง ภาษา Processing ต้นฉบับซึ่งเป็นรากฐานของ p5
    https://news.ycombinator.com/item?id=37760363
    ตอนนี้เมื่อรู้สิ่งที่รู้แล้ว ก็รู้สึกเสียใจที่เคยสนับสนุนงานของ Processing Foundation

    • ดูเหมือนว่า Processing Foundation จะกลายเป็นแบบ Mozilla Foundation ไปแล้ว
    • เห็นแบบนี้แล้วก็อธิบายได้หลายอย่าง
      ในยุคที่มีกราฟิก API ประสิทธิภาพดีมากมายขนาดนี้ ก็เข้าใจแล้วว่าทำไม Processing/p5 ถึงดูนิ่งและแทบไม่มีการเปลี่ยนแปลงใหญ่ ๆ มาหลายปี เป็นจุดจบที่น่าเศร้า

  • ชอบ P5.js มาก ชุมชน OpenProcessing มีผลงานเจ๋ง ๆ หลายพันชิ้นที่สามารถดู โคลน และแก้ไขได้ง่าย
    ปกติใช้ Python เป็นหลัก แต่การค่อย ๆ ปรับแก้โปรแกรม P5.js ช่วยให้เรียน JavaScript ได้
    [1] -- https://openprocessing.org/discover/#/trending

  • ใน playground ของ p5.js สามารถเขียนและรันโค้ดในเบราว์เซอร์ได้ และยังสร้างบัญชีเพื่อบันทึก code sketch ได้ด้วย
    https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH