Melukis Wajah Smiley dengan ps

Melukis Wajah Senyuman dengan p5.js

Dalam artikel ini, kami akan meneroka cara menggunakan perpustakaan p5.js untuk mencipta lukisan yang ringkas tetapi menawan: wajah yang tersenyum. p5.js ialah perpustakaan JavaScript yang memudahkan untuk mencipta grafik dan animasi interaktif. Ia sesuai untuk artis, pereka bentuk dan pembangun yang ingin mencipta projek visual berasaskan kod.

Apakah p5.js?

p5.js ialah perpustakaan yang bertujuan menjadikan dunia pengaturcaraan visual boleh diakses. Ia menawarkan satu set fungsi yang membolehkan anda melukis bentuk, mencipta animasi dan berinteraksi dengan pengguna dengan cara yang mudah. Walaupun ia ditulis dalam JavaScript, pengguna tidak perlu menjadi pakar dalam bahasa ini untuk mula mencipta visual yang menarik perhatian.

Struktur asas lakaran dalam p5.js

Lakaran dalam p5.js mempunyai dua fungsi utama:

1. setup(): Dilaksanakan sekali pada permulaan. Di sinilah kami memulakan kanvas, menetapkan warna dan menyediakan sebarang elemen yang diperlukan.
2. draw(): Berjalan dalam gelung, bingkai demi bingkai. Di sini kami meletakkan arahan yang ingin kami ulangi secara berterusan (seperti animasi). Dalam kes kami, kami tidak memerlukan animasi, jadi kami akan membiarkannya kosong.

Projek: wajah tersenyum

Matlamatnya ialah untuk melukis wajah tersenyum menggunakan bentuk mudah: bulatan besar untuk muka, dua bulatan kecil untuk mata dan lengkok untuk mulut.

Langkah 1: Buat kanvas

Perkara pertama yang kami lakukan ialah menentukan saiz kanvas. Dalam kes ini, kami akan menggunakan saiz 400x400 piksel dan menetapkan latar belakang hitam.

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

Langkah 2: Lukiskan muka

Muka hanyalah bulatan besar. Untuk melukis bulatan dalam p5.js, kami menggunakan fungsi elips(), yang memerlukan koordinat pusatnya, serta lebar dan tingginya. Dalam kes kami, kami akan melukis bulatan di tengah kanvas, dengan diameter 200 piksel.

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

Langkah 3: Lukiskan mata

Mata adalah dua bulatan putih kecil. Kita boleh menggunakan fungsi elips() yang sama, tetapi kali ini kita memberinya isian putih dan meletakkannya sedikit ke atas dan ke sisi tengah muka.

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

Langkah 4: Lukiskan senyuman

Akhir sekali, untuk senyuman kami menggunakan fungsi arc(). Fungsi ini membolehkan anda melukis arka elips yang, dalam kes ini, kelihatan seperti senyuman. Kami melaraskan koordinat supaya lengkung itu berpusat dan kelihatan seperti mulut.

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

Kod lengkap:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

Kesimpulan

Contoh mudah ini menunjukkan bagaimana, dengan beberapa baris kod, kita boleh mencipta grafik yang menarik menggunakan p5.js. Walaupun projek ini adalah asas, prinsip yang digunakan di sini boleh diskalakan untuk mencipta visual yang lebih kompleks dan terperinci. Jika anda ingin mencuba lebih banyak lagi, anda boleh cuba mengubah saiz elemen, menambah warna atau membuat animasi dalam draw().

Teruskan dan buat versi anda sendiri bagi wajah tersenyum ini dan terokai apa yang p5.js tawarkan!

Atas ialah kandungan terperinci Melukis Wajah Smiley dengan ps. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!