Khám phá mã sáng tạo với P5.js

Sep 12, 2025

Cách

Dành một ngày với Brendan Dawes. ở ngoài Tạo ra London. và khám phá thế nào Dữ liệu là Daw Beswes. . Trong hội thảo cả ngày này, anh ta sẽ giải thích cách lấy dữ liệu bao quanh chúng ta mỗi ngày và biến nó thành một thứ gì đó đẹp sử dụng chế biến và p5.js. Đặt bây giờ !

p5.js. là một thư viện được thiết kế để mang lại sức mạnh của Chế biến đến web. Nó nhằm mục đích giới thiệu các nghệ sĩ, nhà thiết kế và nhà giáo dục cho thế giới lập trình trong khi cũng cung cấp các công cụ đa năng để đưa các nhà phát triển và kỹ sư vào nghệ thuật thị giác.

Hãy thâm nhập và tạo 'bản phác thảo' đầu tiên của chúng tôi. Mục tiêu của chúng tôi là xây dựng một công cụ vẽ biến đổi một hình ảnh đơn giản thành một lĩnh vực của các ngôi sao hoạt hình. Đầu tiên, chúng tôi sẽ xác định một vài biến toàn cục và viết của chúng tôi thiết lập() chức năng. P5's. thiết lập() được chạy một lần, khi bản phác thảo được tải, vì vậy đó là nơi lý tưởng để xử lý việc khởi tạo.

Tải xuống các tập tin bạn sẽ cần đây .

 var Truyện tranh, SkyImage, Stars = [];
Cài đặt chức năng () {...}

Bên trong chúng tôi thiết lập Chức năng, chúng ta sẽ tạo một khung vẽ và ẩn con trỏ chuột để chúng ta có thể vẽ của riêng mình. Theo mặc định, P5 thêm một phác thảo xung quanh các hình dạng - chúng tôi muốn vô hiệu hóa các nét trong trường hợp này.

 createecanvas (800.500);
Nocourstor ();
nostroke ();

The background image – this night sky scene provides the setting for our animation — Hình nền - Cảnh bầu trời đêm này cung cấp cài đặt cho hoạt hình của chúng tôi

Tiếp theo, chúng tôi sẽ tải một cặp hình ảnh. Một người sẽ đóng vai trò là nền tảng - trong trường hợp này, một cảnh bầu trời đêm. Khác sẽ là hình ảnh 'gợi ý' - thiết kế màu đen và trắng thiết kế cuối cùng của chúng tôi sẽ dựa trên. Ý tưởng là đặt hầu hết các ngôi sao trên các pixel đen trong hình ảnh gợi ý của chúng tôi, để tạo lại thiết kế trong cảnh nền của chúng tôi. Sẽ dễ dàng để tạo những hình ảnh này với các công cụ văn bản và vẽ của P5, nhưng vì lợi ích của sự ngắn gọn, chúng tôi sẽ sử dụng tài sản tĩnh.

 HINTIMAGE = loadImage ("// bit.ly/hintImage");
SkyImage = LoadImage ("// bit.ly/skyimage") ;

The hint image, which dictates the positioning of our stars — Hình ảnh gợi ý, chỉ ra vị trí của các ngôi sao của chúng ta

Chức năng vẽ

Đó là nó cho thiết lập() ! Một chức năng quan trọng khác là vẽ tranh() . Nó được gọi trong một vòng lặp liên tục, rất hữu ích cho các hoạt hình và thêm các yếu tố theo thời gian.

 Chức năng vẽ () {...}

Trong hàm vẽ, nhiệm vụ đầu tiên của chúng tôi là điền vào khung vẽ bằng hình nền của chúng tôi. P5 không tự động xóa khung vẽ giữa vẽ tranh() Các cuộc gọi, vì vậy chúng ta cần phải làm điều này mọi khung hoặc cuối cùng chúng ta sẽ kết thúc với một số hiệu ứng tích lũy kỳ lạ. Để đặt một hình ảnh được tải trên khung vẽ, hãy sử dụng hình ảnh () chức năng và cung cấp tọa độ x và y để định vị.

 Hình ảnh (SkyImage, 0, 0);

Tiếp theo, chúng tôi sẽ lấy vị trí chuột hiện tại và lưu trữ nó dưới dạng P5.Vector bằng cách sử dụng CreateVector () . Đối tượng này đi kèm với các chức năng tiện dụng để đối phó với các điểm trong không gian, nhưng chúng tôi chủ yếu chỉ sử dụng nó như một thùng chứa.

 VAR Vị trí = CreateVector (Mousex, Mousey);

Sử dụng vị trí chuột mới được lưu trữ của chúng tôi, chúng ta có thể vẽ con trỏ của chúng tôi. Chúng tôi sẽ đặt màu vẽ với lấp đầy() Bằng cách truyền các giá trị RGB và sử dụng Ellipse () để vẽ một vòng tròn ở vị trí chuột.

 Điền (255, 192, 0);
elip (vị trí.x, vị trí.y, 8, 8);

Chúng tôi chỉ muốn vẽ các ngôi sao mới trong khi chuột được nhấn, vì vậy chúng tôi sẽ kiểm tra P5 đánh máy trước khi tiến hành. Nếu chuột bị hỏng, chúng ta cần tính toán một nơi tốt cho ngôi sao tiếp theo của mình để kết thúc. Chúng tôi sẽ làm điều đó với một hàm tùy chỉnh được gọi là findpixel () , mà chúng ta sẽ xác định sau.

Discover the creative side of code with Brendan Dawes at Generate London — Khám phá khía cạnh sáng tạo của mã với Brendan Dawes tại Gener London

Khi chúng tôi có một mục tiêu, chúng tôi sẽ tạo một phiên bản mới của một đối tượng sao tùy chỉnh (nhiều hơn bên dưới) và nhấn nó vào cuối mảng sao của chúng tôi. Nếu chúng ta kết thúc với hơn 2.000 ngôi sao, chúng ta sẽ bắt đầu loại bỏ những người già nhất.

 Nếu (ateispressed) {
var Target = findpixel ();
var star = ngôi sao mới (vị trí, mục tiêu);
Sao.ushush (ngôi sao);
nếu (sao.length & gt; 2000) sao.shift ();
}

Cuối cùng, chúng ta sẽ vòng lặp qua mảng các ngôi sao của chúng tôi và gọi Cập nhật () và vẽ tranh() trên mỗi người trong số họ. Chúng tôi sẽ đi sâu vào các phương pháp này sau này.

 cho (var i = 0; i & lt; stars.length; i ++) {
sao [i] .update ();
sao [i] .draw ();
}

Chức năng trợ giúp

Hiện nay thiết lập() và vẽ tranh() đang ở vị trí chúng ta sẽ làm việc trên các chức năng và đối tượng của người trợ giúp. Đầu tiên, chúng tôi sẽ xác định một hàm tìm vị trí nghỉ ngơi cho mỗi ngôi sao mới. Tất cả những gì chúng ta cần làm là kiểm tra một số pixel ngẫu nhiên trong hình ảnh gợi ý của chúng tôi, sử dụng được() để xem nếu chúng có màu đen hoặc trắng.

Chúng tôi thực sự chỉ phải xem giá trị màu đỏ của chúng, bởi vì trong cả hai trường hợp, giá trị RGB khớp. Nếu chúng ta tìm thấy một pixel không phải trắng, chúng ta sẽ trả về vì chúng tôi đã thiết kế của chúng tôi. Nếu không, chúng tôi sẽ hoàn trả pixel cuối cùng được kiểm tra và nó sẽ đóng vai trò là một ngôi sao ngẫu nhiên.

 chức năng findpixel () {
var x, y;
cho (var i = 0; i & lt; 15; i ++) {
X = Tầng (RANDOM (HINTIMAGE.WIDTH));
Y = Tầng (ngẫu nhiên (HINTImage.Height));

if (màu đỏ (HINTIMAGE.GET (X, Y)) & LT; 255) phá vỡ;
Không thể
return createvector (x, y);
}

Cuối cùng là đối tượng sao tùy chỉnh của chúng tôi. Nói một cách đơn giản, chúng tôi muốn một thùng chứa có thể tái sử dụng lưu trữ thông tin về từng ngôi sao, và cũng cung cấp một phương tiện để cập nhật và vẽ chúng. JavaScript không cung cấp một cách để tạo các lớp theo nghĩa truyền thống, nhưng chúng ta có thể nhận được kết quả tương tự bằng cách xác định một chức năng và mở rộng nó cho nhu cầu của chúng ta.

Mỗi ngôi sao có một vài thuộc tính (vị trí bắt đầu, vị trí cuối cùng và đường kính được tạo ngẫu nhiên), chúng tôi sẽ xác định trong một 'hàm hàm tạo' được gọi cho mỗi ngôi sao mới được tạo trong vòng vẽ của chúng tôi.

 Ngôi sao chức năng (vị trí, mục tiêu) {
Điều này. Vị trí = vị trí;
this.target = mục tiêu;
this.diameter = ngẫu nhiên (1, 5);
}

Tiếp theo chúng ta sẽ thêm một Cập nhật () Phương pháp để sao, sẽ sử dụng P5.Vector's lerp () Để tính một vị trí mới giữa các vị trí hiện tại và mục tiêu của một ngôi sao. Trong trường hợp này, chúng tôi đang di chuyển bốn phần trăm khoảng cách còn lại cho mỗi lần rút, điều này hiệu quả mang lại cho chúng ta một hiệu ứng dễ dàng.

Nếu chúng tôi muốn có được ưa thích, chúng tôi cũng có thể mô phỏng một số vật lý ở đây, nhưng bây giờ chúng tôi sẽ giữ cho nó đơn giản.

 star.prototype.update = hàm () {
cái này = p5.v.Vector.lerp (
vị trí này,
this.target,
0,04.
);
};

Vẽ ngôi sao.

Cuối cùng, ngôi sao vẽ tranh() Phương pháp thực sự vẽ ngôi sao vào khung vẽ. Một lần nữa, chúng ta đang sử dụng lấp đầy() và Ellipse () , mặc dù lần này chúng ta đang gọi lấp đầy() với một giá trị thang độ xám và giá trị alpha cho độ trong suốt.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Mỗi khung, nội suy tuyến tính cho chúng ta một điểm mới dọc theo đường dẫn giữa vị trí ngôi sao hiện tại và đích đến của nó

Để cung cấp cho các ngôi sao lấp lánh, giá trị alpha được xác định bằng P5 tiếng ồn() chức năng. Điều này trả về giá trị tiếng ồn Perlin cho các tọa độ được chỉ định, nghĩa là bạn nhận được một chuỗi các số ngẫu nhiên mượt mà, chất lỏng. Đối với tham số thứ ba, chúng ta sẽ chuyển một giá trị dựa trên thời gian thay vì giá trị không gian, để tiếng ồn sẽ hoạt động theo thời gian.

 star.prototype.draw = hàm () {
var alpha = tiếng ồn (
this.target.x,
this.Target.y,
millis () / 1000.0
);

Điền (255, Alpha * 255);

hình elip (
test.poseition.x, this.poseition.y,
Điều này.Diameter, này.Diameter.
);
};

Đó là nó cho bản phác thảo đầu tiên của chúng tôi! Nhấp và kéo để xem các ngôi sao mới xuất hiện và phù hợp với hình ảnh gợi ý.

Cái gì tiếp theo?

Từ đây, bạn có thể thêm một số yếu tố HTML để kiểm soát các biến bằng cách sử dụng bổ trợ P5.dom hoặc thậm chí thêm âm thanh vào hình ảnh bằng cách sử dụng p5.sound. .

Chúng tôi chỉ làm trầy xước bề mặt của những gì có thể với p5.js và với các tính năng mới trên đường đi, thậm chí còn có nhiều hơn để mong đợi. Chúc vui vẻ!

Tìm hiểu thêm về mặt sáng tạo của mã hóa tại Tạo ra London. ! Brendan Dawes. sẽ dạy bạn cách sử dụng xử lý và p5.js để biến dữ liệu thành những thứ làm đẹp trong hội thảo của mình Được;anh ấy cũng sẽ nói về niềm vui làm việc với Giấy, nhựa và pixel . Đặt vé của bạn ngay bây giờ !

Khám phá mã sáng tạo với P5.js

Chức năng vẽ

Chức năng trợ giúp

Vẽ ngôi sao.

Cái gì tiếp theo?

Cách - Các bài báo phổ biến nhất

Cách Photoshop trên iPhone (Có, đó là một điều)

Nghệ thuật Chiarocuro: Hướng dẫn từng bước

Làm thế nào để kết xuất các bề mặt trong suốt thực tế

Bắt đầu với Monotype In

Mẹo thiết kế khái niệm cho các nghệ sĩ

Tạo hình ảnh 3D tương tác với ba.js

Cách xây dựng các trang web nhanh hơn

Cách sử dụng Blend Shapes để Animate Ký tự

Thể loại