Meneroka Seni Generatif dengan JavaScript

Seni generatif ialah teknik di mana artis mencipta sistem, biasanya dalam bentuk algoritma, yang menjana karya seni secara autonomi. Sistem ini boleh menghasilkan hasil yang tidak terhingga daripada set peraturan awal, menjadikan proses itu menarik dan penuh dengan kemungkinan. Dalam artikel ini, kita akan mendalami dunia seni generatif menggunakan JavaScript dan, lebih khusus lagi, perpustakaan popular p5.js.

Apakah Seni Generatif?

Seni generatif bergantung pada penciptaan sistem yang boleh menjana bilangan variasi karya seni yang tidak terhingga. Sistem ini boleh dikawal oleh peraturan tertentu, algoritma matematik, atau rawak. Dengan setiap pelaksanaan sistem, karya seni baharu, unik dan menarik secara visual boleh dihasilkan.

Bentuk seni ini berkait rapat dengan pengaturcaraan, kerana peraturan dan kod menentukan cara hasil visual dicipta. Artis generatif menggunakan algoritma untuk menentukan corak, warna, bentuk dan pergerakan, menjadikan setiap karya sebagai proses penemuan.

Mengapa JavaScript?

JavaScript ialah bahasa yang serba boleh dan boleh diakses yang berjalan terus dalam penyemak imbas web, membolehkan visualisasi segera hasil seni generatif. Selain itu, terima kasih kepada perpustakaan seperti p5.js, anda boleh membuat grafik yang kompleks dengan hanya beberapa baris kod.

p5.js ialah perpustakaan JavaScript yang direka khusus untuk mencipta grafik interaktif dan visual. Kesederhanaannya menjadikannya alat yang ideal untuk mula meneroka seni generatif.

Bermula dengan p5.js

Menyediakan Persekitaran

Untuk mula mencipta seni generatif dengan JavaScript, anda hanya perlukan penyemak imbas dan penyunting kod. Anda boleh menggunakan editor web p5.js atau memuat turun pustaka dan menambahkannya pada projek anda.

Rangka Asas Lakaran p5.js

Setiap lakaran p5.js distrukturkan kepada dua fungsi utama:

• setup(): Fungsi ini berjalan sekali pada permulaan. Di situlah kami menyediakan kanvas, warna dan sebarang parameter awal.
• draw(): Fungsi ini berjalan berulang kali dalam gelung. Di sini, kami meletakkan arahan untuk melukis dan mencipta elemen visual.

Berikut ialah contoh asas:

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    fill(random(255), random(255), random(255), 150); // Random colors with transparency
    noStroke();
    ellipse(x, y, random(50, 100)); // Draw random circles
  }
}

Dalam lakaran asas ini, kami mencipta kanvas kosong dan melukis 100 bulatan dengan warna rawak, setiap satu diletakkan secara rawak. Keindahan seni generatif terletak pada kepelbagaian hasil. Dengan setiap larian kod, kalangan akan muncul di lokasi yang berbeza dan dengan warna yang berbeza.

Mencipta Corak dengan Matematik

Seni generatif selalunya menggabungkan rawak dengan struktur matematik yang tepat. Mari lihat contoh di mana kita menjana corak geometri berdasarkan bentuk biasa dan pergerakan kitaran:

function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i < 100; i++) {
    let angle = map(i, 0, 100, 0, TWO_PI);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    ellipse(x, y, 50, 50); // Draw circles in a circular pattern
  }
  noLoop(); // Static drawing
}

Dalam contoh ini, kami menggunakan fungsi trigonometri seperti cos() dan sin() untuk mengagihkan 100 bulatan di sekeliling pusat kanvas dalam corak bulat. Keindahan matematik dalam seni generatif ialah anda boleh menggunakan persamaan mudah untuk mencipta corak yang kompleks dan mengejutkan.

Menambah Interaktiviti

Salah satu kelebihan hebat menggunakan JavaScript dan p5.js ialah betapa mudahnya anda boleh menambah interaktiviti pada ciptaan anda. Di bawah ialah contoh di mana warna corak berubah mengikut kedudukan tetikus:

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i < numLines; i++) {
    let x = i * spacing;
    let colorValue = map(mouseX, 0, width, 0, 255); // Changes with mouse position
    stroke(colorValue, 100, 150);
    line(x, 0, width / 2, height);
  }
}

Dalam lakaran ini, warna garisan berubah berdasarkan kedudukan tetikus. Interaktiviti ialah komponen penting dalam seni generatif, kerana ia membolehkan penonton mempengaruhi karya seni secara langsung.

Kesimpulan

Seni generatif dengan JavaScript membuka dunia kemungkinan kreatif. Menggunakan p5.js, kami boleh mengubah persamaan matematik, fungsi rawak dan interaksi pengguna kepada visual yang dinamik dan mengejutkan. Bahagian yang terbaik ialah, terima kasih kepada fleksibiliti persekitaran ini, hasilnya adalah unik dan sentiasa berbeza dengan setiap pelaksanaan.

Meneroka seni generatif ialah cara terbaik untuk menggabungkan pengaturcaraan dan kreativiti. Eksperimen dengan pelbagai bentuk, warna dan corak untuk melihat sejauh mana anda boleh menolak karya seni generatif anda sendiri!

Atas ialah kandungan terperinci Meneroka Seni Generatif dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!