Jelajahi kode kreatif dengan p5.js

Sep 16, 2025

Bagaimana caranya

Menghabiskan sedikit hari Brendan Dawes. di Hasilkan London. dan temukan bagaimana Data adalah dawesome . Dalam lokakarya sepanjang hari ini dia akan menjelaskan bagaimana mengambil data yang mengelilingi kita setiap hari dan mengubahnya menjadi sesuatu yang indah menggunakan pemrosesan dan p5.js. Pesan sekarang !

p5.js. adalah perpustakaan yang dirancang untuk membawa kekuatan Pengolahan ke web. Ini bertujuan untuk memperkenalkan seniman, desainer, dan pendidik untuk dunia pemrograman sementara juga menawarkan alat serbaguna untuk membawa devs dan insinyur ke dalam seni visual.

Mari selami dan buat 'sketsa' pertama kami. Tujuan kami adalah membangun alat gambar yang mengubah gambar sederhana menjadi bidang bintang animasi. Pertama, kita akan mendefinisikan beberapa variabel global dan menulis mempersiapkan() fungsi. p5. mempersiapkan() Dijalankan sekali, ketika sketsa dimuat, jadi itu adalah tempat yang ideal untuk menangani inisialisasi.

Unduh file yang Anda butuhkan sini .

 VAR HINTIMAGE, CKAIMAGE, STARS = [];
pengaturan fungsi () {...}

Di dalam kita mempersiapkan Fungsi, kami akan membuat kanvas dan menyembunyikan kursor mouse sehingga kami dapat menggambar sendiri. Secara default, P5 menambahkan garis besar di sekitar bentuk - kami ingin menonaktifkan stroke dalam hal ini.

 Createcanvas (800.500);
nocursor ();
nostroke ();

The background image – this night sky scene provides the setting for our animation — Gambar latar belakang - Scene sky malam ini menyediakan pengaturan untuk animasi kami

Selanjutnya, kami akan memuat sepasang gambar. Seseorang akan berfungsi sebagai latar belakang - dalam hal ini, pemandangan langit malam. Yang lain akan menjadi gambar 'petunjuk' - desain hitam dan putih desain akhir kami akan didasarkan pada. Idenya adalah untuk menempatkan sebagian besar bintang di atas piksel hitam dalam gambar petunjuk kami, untuk membuat ulang desain di adegan latar belakang kami. Akan mudah untuk membuat gambar-gambar ini dengan teks dan alat menggambar P5, tetapi demi singkatnya kita akan menggunakan aset statis.

 HINTIMAGE = loadImage ("// bit.ly/hintimage");
SkyImage = loadImage ("// bit.ly/skyImage" ;

The hint image, which dictates the positioning of our stars — Gambar petunjuk, yang menentukan posisi bintang kami

Fungsi undian

Itu untuk mempersiapkan() ! Fungsi utama lainnya adalah seri() . Ini disebut dalam loop kontinu, yang bermanfaat untuk animasi dan menambahkan elemen dari waktu ke waktu.

 Fungsi Draw () {...}

Dalam fungsi undian, tugas pertama kami adalah mengisi kanvas dengan gambar latar belakang kami. p5 tidak secara otomatis membersihkan kanvas di antara seri() Panggilan, jadi kita perlu melakukan ini setiap frame atau kita akan berakhir dengan beberapa efek akumulasi aneh. Untuk menempatkan gambar yang dimuat di atas kanvas, gunakan gambar() berfungsi dan berikan koordinat X dan Y untuk diposisikan.

 Gambar (SkyImage, 0, 0);

Selanjutnya, kami akan meraih lokasi mouse saat ini dan menyimpannya sebagai p5.vector menggunakan CreateVector () . Objek ini dilengkapi dengan fungsi praktis untuk menangani poin di ruang angkasa, tetapi kami sebagian besar hanya menggunakannya sebagai wadah.

 VAR POSISI = CREATHEVECOR (MOUSEX, MOUNTY);

Menggunakan posisi mouse yang baru disimpan, kita dapat menggambar kursor kita. Kami akan mengatur warna gambar dengan mengisi() Dengan melewati nilai dan penggunaan RGB elips() Untuk menggambar lingkaran di lokasi mouse.

 Isi (255, 192, 0);
Ellipse (Position.x, Position.y, 8, 8);

Kami hanya ingin menggambar bintang baru saat mouse ditekan, jadi kami akan memeriksa P5 mouse terkeprompi. sebelum melanjutkan. Jika mouse turun, kita perlu menghitung tempat yang baik untuk bintang berikutnya untuk berakhir. Kami akan melakukannya dengan fungsi khusus yang disebut findpixel () , yang akan kita definisikan nanti.

Discover the creative side of code with Brendan Dawes at Generate London — Temukan sisi kreatif kode dengan Brendan Dawes pada menghasilkan London

Setelah kami memiliki target, kami akan membuat instance baru dari objek bintang khusus (lebih di bawah) dan dorong ke ujung array bintang kami. Jika kita berakhir dengan lebih dari 2.000 bintang, kita akan mulai membuang yang tertua.

 Jika (mockerpressed) {
var target = findpixel ();
Var Star = bintang baru (posisi, target);
bintang-bintang (bintang);
If (Stars.Length & Gt; 2000) Stars.shift ();
}

Akhirnya, kami akan melewati array bintang dan panggilan kami memperbarui() dan seri() pada masing-masing. Kami akan menyelam ke metode ini nanti.

 untuk (var i = 0; bintang I & lt; panjang; i ++) {
bintang [i] .update ();
bintang [i] .draw ();
}

Fungsi pembantu

Sekarang mempersiapkan() dan seri() sedang di tempat kami akan bekerja pada fungsi dan objek pembantu. Pertama, kami akan mendefinisikan fungsi yang menemukan posisi istirahat untuk setiap bintang baru. Yang perlu kita lakukan adalah memeriksa beberapa piksel acak dalam gambar petunjuk kita, menggunakan Dapatkan() untuk melihat apakah mereka hitam atau putih.

Kami sebenarnya hanya perlu melihat nilai merah mereka, karena dalam kedua kasus Nilai RGB cocok. Jika kita menemukan piksel non-putih, kita akan mengembalikannya karena kita telah mencapai desain kita. Jika tidak, kami hanya akan mengembalikan pixel terakhir diperiksa dan itu akan berfungsi sebagai bintang acak.

 Fungsi findpixel () {
var x, y;
untuk (var i = 0; i & lt; 15; i ++) {
x = lantai (acak (hintimage.width));
y = lantai (acak (hintimage.height));

Jika (merah (hintimage.get (x, y)) & lt; 255) istirahat;
}
Kembalikan CreateVector (X, Y);
}

Terakhir adalah objek bintang khusus kami. Sederhananya, kami ingin wadah yang dapat digunakan kembali yang menyimpan informasi tentang masing-masing bintang, dan juga menyediakan sarana untuk memperbarui dan menggambarnya. JavaScript tidak memberikan cara untuk membuat kelas dalam arti tradisional, tetapi kita bisa mendapatkan hasil yang sama dengan mendefinisikan fungsi dan memperluasnya untuk kebutuhan kita sendiri.

Setiap bintang memiliki beberapa properti (posisi awal, lokasi akhir dan diameter yang dihasilkan secara acak), yang akan didefinisikan dalam 'fungsi konstruktor' yang disebut untuk setiap bintang baru yang dibuat dalam loop draw kami.

 Fungsi Bintang (Posisi, Target) {
ini.posisi = posisi;
ini.target = target;
ini.diameter = acak (1, 5);
}

Selanjutnya kita akan menambahkan memperbarui() Metode untuk membintangi, yang akan menggunakan p5.vector lerp () untuk menghitung lokasi baru antara posisi bintang saat ini dan target. Dalam hal ini, kami memindahkan empat persen dari jarak yang tersisa untuk setiap undian, yang secara efektif memberi kami efek kemudahan.

Jika kami ingin menjadi mewah, kami juga bisa mensimulasikan beberapa fisika di sini, tetapi untuk saat ini kami akan tetap sederhana.

 Star.prototype.update = Fungsi () {
ini.Posisi = p5.vector.lerp (
posisi ini,
ini.target,
0,04.
);
};

Menggambar bintang

Akhirnya, bintang seri() Metode sebenarnya menarik bintang ke kanvas. Sekali lagi, kami menggunakan mengisi() dan elips() , meskipun saat ini kita menelepon mengisi() dengan nilai skala abu-abu dan nilai alfa untuk transparansi.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Setiap bingkai, interpolasi linear memberi kita titik baru di sepanjang jalan antara posisi bintang saat ini dan tujuannya

Untuk memberi bintang binar, nilai alfa ditentukan menggunakan p5 kebisingan() fungsi. Ini mengembalikan nilai kebisingan Perlin untuk koordinat yang ditentukan, yang berarti Anda mendapatkan urutan cairan yang halus. Untuk parameter ketiga, kami melewati nilai berbasis waktu daripada nilai spasial, sehingga kebisingan akan menghidupkan seiring waktu.

 Star.prototype.draw = Fungsi () {
var alpha = noise (
ini.target.x,
ini.target.y,
milis () / 1000.0
);

Isi (255, Alpha * 255);

elips(
ini.posisi.x, ini.position.y,
Ini.diameter, ini.diameter.
);
};

Itu saja untuk sketsa pertama kami! Klik dan seret untuk melihat bintang-bintang baru muncul dan sesuai dengan gambar petunjuk.

Apa berikutnya?

Dari sini, Anda dapat menambahkan beberapa elemen HTML untuk mengontrol variabel menggunakan add-on P5.dom atau bahkan menambahkan suara ke visual menggunakan p5.sound. .

Kami hanya menggaruk permukaan apa yang mungkin dengan p5.js, dan dengan fitur-fitur baru di jalan, bahkan ada lebih banyak yang menantikannya. Selamat bersenang-senang!

Pelajari lebih lanjut tentang sisi kreatif pengkodean di Hasilkan London. ! Brendan Dawes. akan mengajarkan Anda cara menggunakan pemrosesan dan p5.js untuk mengubah data menjadi hal-hal keindahan di bengkelnya ;dia juga akan berbicara tentang kegembiraan bekerja dengan kertas, plastik dan piksel . Pesan tiket Anda sekarang !

Jelajahi kode kreatif dengan p5.js

Fungsi undian

Fungsi pembantu

Menggambar bintang

Apa berikutnya?

Bagaimana caranya - Artikel Terpopuler

panduan penting untuk pertamakan dalam seni

Gaya Situs menggunakan SASS

Desainer Affinitas: Cara Menggunakan Persona Ekspor

Buat efek tipografi 3D interaktif

Cara melukis miniatur yang menyenangkan

Pengantar pengujian frontend

Cara Menggunakan Bentuk Blend untuk Menghidup Karakter

Cara membuat langit fotorealistik

Kategori