สำรวจรหัสความคิดสร้างสรรค์ด้วย P5.js

Feb 4, 2026

วิธีการ

ใช้เวลาทั้งวันด้วย brendan dawes ที่ สร้างลอนดอน และค้นพบว่า ข้อมูลคือ Dawesome . ในการประชุมเชิงปฏิบัติการตลอดทั้งวันนี้เขาจะอธิบายวิธีการใช้ข้อมูลที่ล้อมรอบเราทุกวันและเปลี่ยนเป็นสิ่งที่สวยงามโดยใช้การประมวลผลและ p5.j.js. จองตอนนี้ !

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

ลองดำน้ำในและสร้าง 'ร่าง' ครั้งแรกของเรา เป้าหมายของเราคือการสร้างเครื่องมือวาดภาพที่เปลี่ยนภาพง่าย ๆ ให้เป็นสนามของดาวอนิเมชั่น ครั้งแรกเราจะกำหนดตัวแปรทั่วโลกสองสามตัวและเขียนของเรา ติดตั้ง() ฟังก์ชั่น. P5's ติดตั้ง() ทำงานหนึ่งครั้งเมื่อโหลดร่างดังนั้นจึงเป็นสถานที่ที่เหมาะสำหรับการจัดการการเริ่มต้น

ดาวน์โหลดไฟล์ที่คุณต้องการ ที่นี่ .

 Var Hintimage, SkyiMage, Stars = [];
การตั้งค่าฟังก์ชั่น () {... }

ภายในของเรา ติดตั้ง ฟังก์ชั่นเราจะสร้างผืนผ้าใบและซ่อนเคอร์เซอร์ของเมาส์เพื่อให้เราสามารถวาดของเราเอง โดยค่าเริ่มต้น P5 เพิ่มเค้าร่างรอบรูปร่าง - เราต้องการปิดการใช้งานการสโตรกในกรณีนี้

 createCanvas (800,500);
Nocursor ();
nostroke ();

The background image – this night sky scene provides the setting for our animation — ภาพพื้นหลัง - ฉากท้องฟ้ายามค่ำคืนนี้ให้การตั้งค่าสำหรับภาพเคลื่อนไหวของเรา

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

 hintimage = loadimage ("// bit.ly/hintimage");
SkyImage = LoadImage ("// bit.ly/skyiMage"); ه95]
  
   
    
     
      
       
       
       
      
     
    
   
   
    
     ภาพคำแนะนำซึ่งกำหนดตำแหน่งของดาวของเรา
    
   
  
  
   ฟังก์ชั่นการวาด
  
  
   แค่นั้นแหละ
   
    ติดตั้ง()
   
   ! ฟังก์ชั่นกุญแจอื่นคือ
   
    วาด()
   
   . มันเรียกว่าการวนซ้ำอย่างต่อเนื่องซึ่งมีประโยชน์สำหรับภาพเคลื่อนไหวและการเพิ่มองค์ประกอบเมื่อเวลาผ่านไป
  
   ฟังก์ชั่นวาด () {... } 
  
   ภายในฟังก์ชั่นวาดภารกิจแรกของเราคือเติมภาพพื้นหลังของเราด้วยภาพพื้นหลังของเรา P5 จะไม่ล้างผืนผ้าใบระหว่างกันโดยอัตโนมัติ
   
    วาด()
   
   การโทรดังนั้นเราต้องทำเช่นนี้ทุกเฟรมหรือเราจะจบลงด้วยเอฟเฟกต์การสะสมที่แปลกประหลาด เพื่อวางภาพที่โหลดบนผืนผ้าใบให้ใช้
   
    ภาพ()
   
   ฟังก์ชั่นและให้พิกัด x และ y สำหรับการวางตำแหน่ง
  
   รูปภาพ (Skyimage, 0, 0); 
  
   ต่อไปเราจะคว้าตำแหน่งเมาส์ปัจจุบันและเก็บไว้เป็น p5.vector โดยใช้
   
    createvector ()
   
   . วัตถุนี้มาพร้อมกับฟังก์ชั่นที่มีประโยชน์ในการจัดการกับคะแนนในอวกาศ แต่ส่วนใหญ่เราเพียงแค่ใช้มันเป็นภาชนะ
  
   var position = createvector (mousex, mousey); 
  
   การใช้ตำแหน่งเมาส์ที่เก็บไว้ใหม่ของเราเราสามารถวาดเคอร์เซอร์ของเรา เราจะตั้งค่าสีวาดด้วย
   
    เติม ()
   
   โดยผ่านค่า RGB และการใช้งาน
   
    วงรี ()
   
   เพื่อวาดวงกลมที่ตำแหน่งของเมาส์
  
   เติม (255, 192, 0);
วงรี (position.x, ตำแหน่ง, 8, 8); 
  
  
  
   เราต้องการวาดดาวใหม่ในขณะที่กดเมาส์ดังนั้นเราจะตรวจสอบ P5
   
    การกดขี่
   
   ก่อนดำเนินการต่อ หากเมาส์หยุดทำงานเราต้องคำนวณสถานที่ที่ดีสำหรับดาวดวงต่อไปของเราเพื่อจบลง เราจะทำเช่นนั้นด้วยฟังก์ชั่นที่กำหนดเองที่เรียกว่า
   
    FindPixel ()
   
   ซึ่งเราจะกำหนดในภายหลัง
  
  
   
    
     
      
       
        
        
        
       
      
     
    
    
     
      ค้นพบด้านความคิดสร้างสรรค์ของรหัสกับ Brendan Dawes ที่สร้างลอนดอน
     
    
   
  
  เมื่อเรามีเป้าหมายเราจะสร้างอินสแตนซ์ใหม่ของวัตถุดาวที่กำหนดเอง (ด้านล่าง) และดันไปยังจุดสิ้นสุดของอาร์เรย์ดาวของเรา ถ้าเราจบลงด้วยดาวกว่า 2,000 ดวงเราจะเริ่มทิ้งคนที่เก่าแก่ที่สุด
  
   ถ้า (การกดขี่) {
var target = findpixel ();
Var Star = ดาวใหม่ (ตำแหน่งเป้าหมาย);
Stars.Push (Star);
ถ้า (stars.length & gt; 2000) stars.shift ();
} 
  
   ในที่สุดเราจะวนรอบดาวฤกษ์และการโทรของเรา
   
    อัปเดต ()
   
   และ
   
    วาด()
   
   ในแต่ละคน เราจะดำดิ่งสู่วิธีการเหล่านี้ในภายหลัง
  
   สำหรับ (var i = 0; i & lt; stars.length; i ++) {
ดาว [i] .Update ();
ดาว [i] .draw ();
} 
  
   ฟังก์ชั่นผู้ช่วย
  
  
   ตอนนี้
   
    ติดตั้ง()
   
   และ
   
    วาด()
   
   อยู่ในสถานที่เราจะทำงานกับฟังก์ชั่นและวัตถุผู้ช่วย ครั้งแรกเราจะกำหนดฟังก์ชั่นที่พบตำแหน่งที่วางอยู่สำหรับแต่ละดาวใหม่ สิ่งที่เราต้องทำคือตรวจสอบพิกเซลแบบสุ่มในรูปภาพคำใบ้ของเราโดยใช้
   
    รับ ()
   
   เพื่อดูว่าพวกเขาเป็นสีดำหรือสีขาว
  
  
   จริงๆแล้วเราต้องดูค่าสีแดงของพวกเขาเพราะในทั้งสองกรณีค่า RGB ตรงกัน หากเราพบพิกเซลที่ไม่ใช่สีขาวเราจะส่งคืนเพราะเราได้รับการออกแบบของเรา ถ้าไม่เราจะกลับมาตรวจสอบพิกเซลสุดท้ายและมันจะทำหน้าที่เป็นดาวสุ่ม
  
   ฟังก์ชั่น findpixel () {
var x, y;
สำหรับ (var i = 0; i & lt; 15; i ++) {
x = พื้น (สุ่ม (hintimage.width));
y = ชั้น (สุ่ม (hintimage.height));

ถ้า (สีแดง (hintimage.get (x, y)) & lt; 255) แบ่ง;
}
Return Createvector (x, y);
} 
  
   ล่าสุดเป็นวัตถุดาวที่กำหนดเองของเรา ใส่ง่ายๆเราต้องการให้คอนเทนเนอร์ที่สามารถนำกลับมาใช้ใหม่ที่เก็บข้อมูลเกี่ยวกับแต่ละดาวและยังให้วิธีการอัปเดตและวาดภาพ JavaScript ไม่ได้ให้วิธีการสร้างคลาสในความหมายดั้งเดิม แต่เราสามารถได้รับผลลัพธ์เดียวกันโดยการกำหนดฟังก์ชั่นและขยายไปถึงความต้องการของเราเอง
  
  
   ดาวแต่ละดวงมีคุณสมบัติไม่กี่ (ตำแหน่งเริ่มต้นตำแหน่งสุดท้ายและเส้นผ่านศูนย์กลางที่สร้างแบบสุ่ม) ซึ่งเราจะกำหนดใน 'ฟังก์ชั่นตัวสร้าง' ที่เรียกว่าสำหรับทุกดาวใหม่ที่สร้างขึ้นในลูปการวาดของเรา
  
   ฟังก์ชั่นดาว (ตำแหน่งเป้าหมาย) {
นี้ .position = ตำแหน่ง;
target = เป้าหมาย;
นี่.Diameter = สุ่ม (1, 5);
} 
  
   ต่อไปเราจะเพิ่ม
   
    อัปเดต ()
   
   วิธีการที่จะติดดาวซึ่งจะใช้ P5.Vector
   
    lerp ()
   
   ในการคำนวณตำแหน่งใหม่ระหว่างตำแหน่งปัจจุบันและเป้าหมายของดาว ในกรณีนี้เรากำลังเคลื่อนที่สี่เปอร์เซ็นต์ของระยะทางที่เหลือสำหรับการจับรางวัลทุกครั้งซึ่งทำให้เรามีผลอย่างมีประสิทธิภาพ
  
  
   หากเราต้องการที่จะได้รับแฟนซีเราสามารถจำลองฟิสิกส์ที่นี่ แต่ตอนนี้เราจะทำให้มันง่าย
  
   star.prototype.update = ฟังก์ชั่น () {
นี้ .position = p5.vector.lerp (
สิ่งนี้ .position
target นี้
0.04
);
}; 
  
   วาดดาว
  
  
   ในที่สุดดาวของ
   
    วาด()
   
   วิธีการดึงดาวไปที่ผืนผ้าใบจริง ๆ อีกครั้งเรากำลังใช้
   
    เติม ()
   
   และ
   
    วงรี ()
   
   แม้ว่าครั้งนี้เรากำลังเรียก
   
    เติม ()
   
   ด้วยค่าสีเทาและค่าอัลฟ่าสำหรับความโปร่งใส
  
  
   
    
     
      
       
       
       
      
     
    
   
   
    
     แต่ละเฟรมการแก้ไขเชิงเส้นทำให้เรามีจุดใหม่ตามเส้นทางระหว่างตำแหน่งดาวปัจจุบันและปลายทาง
    
   
  
  
   เพื่อให้ดาวระยิบระยับค่าอัลฟ่าถูกกำหนดโดยใช้ P5
   
    เสียงรบกวน ()
   
   ฟังก์ชั่น. สิ่งนี้จะส่งคืนค่าเสียงของ Perlin สำหรับพิกัดที่ระบุซึ่งหมายความว่าคุณจะได้รับลำดับสุ่มที่ราบรื่นและเป็นของเหลว สำหรับพารามิเตอร์ที่สามเรากำลังส่งค่าตามเวลามากกว่าค่าเชิงพื้นที่เพื่อให้เสียงดังขึ้นจะเคลื่อนไหวเมื่อเวลาผ่านไป
  
   star.prototype.draw = ฟังก์ชั่น () {
var alpha = เสียงรบกวน (
target.x,
นี้.Target.Y
Millis () / 1000.0
);

เติม (255, Alpha * 255);

วงรี (
this.position.x, นี้ .position.y
สิ่งนี้. เส้นนี้. ความสนใจ
);
}; 
  
   นั่นเป็นเรื่องสำหรับร่างแรกของเรา! คลิกและลากเพื่อดูดาวใหม่ปรากฏขึ้นและสอดคล้องกับภาพคำแนะนำ
  
  
   อะไรต่อไป?
  
  
   จากที่นี่คุณอาจเพิ่มองค์ประกอบ HTML บางอย่างเพื่อควบคุมตัวแปรโดยใช้ Add-on P5.Dom หรือแม้แต่เพิ่มเสียงลงในภาพโดยใช้
   
    p5.Sound
   
   .
  
  
   เรามีเพียงรอยขีดข่วนบนพื้นผิวของสิ่งที่เป็นไปได้ด้วย p5.js และด้วยคุณสมบัติใหม่ในทางที่มีมากยิ่งขึ้นที่จะรอคอย มีความสุข!
  
  
   
    เรียนรู้เพิ่มเติมเกี่ยวกับด้านความคิดสร้างสรรค์ของการเข้ารหัสที่
   
   
    
     สร้างลอนดอน
    
   
   
    !
   
   
    
     brendan dawes
    
   
   
    จะสอนวิธีใช้การประมวลผลและ p5.js เพื่อเปิดข้อมูลเป็นสิ่งที่สวยงาม
   
   
    
     ในการประชุมเชิงปฏิบัติการของเขา
    
   
   ;เขาจะพูดถึงความสุขของการทำงานกับ
   
   
    
     กระดาษพลาสติกและพิกเซล
    
   
   
    .
   
   
    
     จองตั๋วของคุณตอนนี้
    
   
   
    !

สำรวจรหัสความคิดสร้างสรรค์ด้วย P5.js

ฟังก์ชั่นการวาด

ฟังก์ชั่นผู้ช่วย

วาดดาว

อะไรต่อไป?

วิธีการ - บทความยอดนิยม

10 วิธีในการปรับปรุงกายวิภาค 3 มิติของคุณ

วิธีการออกแบบประสบการณ์ Chatbot

ทำผม 3 มิติที่สมจริงและขนใน 3DS Max และ V-ray

15 เคล็ดลับแนวหน้าแฟนตาซี

พื้นผิวที่สวมใส่ K-2SO Droid

ทาสีฉากนิวยอร์กมหากาพย์

วิธีการปรับปรุงประสิทธิภาพของไซต์อีคอมเมิร์ซ

วิธีการออกแบบโปรโมชั่นสำหรับแบรนด์จินตภาพ

หมวดหมู่