Panduan Pemula untuk Menggambar Grafik 2D Dengan Two.js

() translation by (you can also view the original English article)

Two.js sebuah API yang membuatnya mudah untuk membuat bentuk 2D dengan kode. Ikuti bersama dan Anda akan belajar cara membuat dan menganimasikan bentuk dari JavaScript.

Two.js adalah penyaji agnostik, sehingga Anda dapat mengandalkan API yang sama untuk menggambar dengan Canvas, SVG, atau WebGL. Perpustakaan memiliki banyak metode yang dapat digunakan untuk mengontrol bagaimana bentuk yang berbeda muncul di layar atau bagaimana mereka animasi.

Installation

Versi pustaka yang tidak dikompresi memiliki ukuran sekitar 128 KB, sedangkan versi terkompresi adalah 50 KB. Jika Anda menggunakan versi terbaru, Anda dapat mengurangi ukuran pustaka menggunakan bentukan khusus.

Anda dapat mengunduh minified version of the library dari GitHub atau Anda dapat menautkan langsung ke CDN hosted version. Setelah Anda menambahkan pustaka ke halaman web Anda, Anda dapat mulai menggambar dan menjiwai berbagai bentuk atau objek.

Membuat Bentuk Dasar

Pertama, Anda perlu memberi tahu Two.js tentang elemen yang ingin Anda gambar dan animasikan bentuk Anda. Anda dapat melewati beberapa parameter ke Two konstruktor untuk mengatur segalanya.

Setel jenis perender menggunakan type property. Anda dapat menentukan nilai seperti svg, webgl, canvas, dll. The type diatur ke svg secara default. Lebar dan tinggi ruang gambar dapat ditentukan menggunakan parameter width dan height . Anda juga dapat mengatur ruang gambar ke layar penuh yang tersedia menggunakan fullscreen parameter. Ketika fullscreen disetel ke true, nilai width dan height akan diabaikan.

Terakhir, Anda dapat memberi tahu Two.js untuk memulai animasi secara otomatis dengan bantuan parameter autostart Boolean.

Setelah melewati semua parameter yang diinginkan ke konstruktor, Anda dapat mulai menggambar garis, persegi panjang, lingkaran, dan elips.

Anda dapat menggambar garis menggunakan two.makeLine (x1, y1, x2, y2). Di sini, (x1, y1) adalah koordinat titik akhir pertama, dan (x2, y2) adalah koordinat titik akhir kedua. Fungsi ini akan mengembalikan objek Two.Line, yang dapat disimpan dalam variabel untuk manipulasi lebih lanjut di kemudian hari.

Dengan cara yang sama, Anda dapat menggambar persegi panjang normal dan bulat menggunakan two.makeRectangle (x, y, width, height) dan two.makeRoundedRectangle (x, y, width, height, radius) masing-masing. Ingat bahwa x dan y menentukan pusat dari persegi panjang, sebagai ganti dari koordinat kiri atas seperti banyak pustaka lainnya. Parameter width dan height akan menentukan ukuran persegi panjang. Parameter radius digunakan untuk menentukan nilai jari-jari untuk sudut bulat.

Anda juga dapat membuat lingkaran dan elips pada halaman web menggunakan two.makeCircle (x, y, radius) dan two.makeEllipse (x, y, width, height) masing-masing. Sama seperti persegi panjang, parameter x dan y menentukan pusat lingkaran atau elips. Mengatur width dan height ke nilai yang sama dalam kasus elips akan membuatnya seperti lingkaran.

Salah satu metode yang berguna di Two.js yang akan sering Anda gunakan adalah two.makeGroup (objects). Anda dapat melewatkan daftar objek yang berbeda atau mengirimkan larik objek, jalur, atau grup sebagai parameter ke metode ini. Ini juga akan mengembalikan objek Two.Group.

Memanipulasi Objek dalam Grup

Setelah Anda membuat grup, Anda dapat memanipulasi semua anaknya sekaligus menggunakan properti yang disediakan grup untuk Anda.

Properti stroke dan fill dapat digunakan untuk mengatur stroke dan fill color untuk semua anak dalam grup. Mereka akan menerima semua formulir yang valid di mana Anda dapat mewakili warna dalam CSS. Ini berarti Anda bebas menggunakan RGB, HSL, atau notasi hex. Anda juga dapat menggunakan nama warna, seperti orange, red, atau blue. Demikian pula, Anda dapat mengatur nilai untuk semua properti lainnya seperti linewidth, opacity, miter, dan cap. Anda dapat menghapus isi dan goresan dari semua anak dalam group menggunakan metode noFill () dan noStroke ().

Anda juga dapat menerapkan transformasi fisik lainnya seperti scale, rotation, and translation.. Transformasi ini akan diterapkan pada objek individu. Menambahkan objek baru ke grup dan menghapusnya dengan mudah dengan metode seperti add () dan remove ().

Menentukan Gradien dan Menulis Teks

Anda dapat menentukan linear dan radial gradien dalam Two.js. Mendefinisikan gradien tidak berarti bahwa itu akan ditampilkan secara otomatis di layar, tetapi itu akan tersedia untuk Anda gunakan ketika mengatur nilai fill atau stroke berbagai objek.

Anda dapat menentukan gradien linier menggunakan two.makeLinearGradient (x1, y1, x2, y2, stops). Nilai-nilai x1 dan y1 menentukan koordinat awal gradien. Demikian pula, nilai-nilai x2 dan y2 menentukan koordinat akhir gradien. Parameter stops adalah array instance Two.Stop. Ini menentukan warna setiap bagian dari array dan di mana setiap transisi warna ke yang berikutnya. Mereka dapat didefinisikan menggunakan new Two.Stop(offset, color, opacity), di mana offset menentukan titik pada gradien di mana warna tertentu harus sepenuhnya diberikan. Parameter color menentukan warna gradien pada titik tertentu. Anda dapat menggunakan representasi warna CSS yang valid sebagai nilainya. Akhirnya, parameter opacity menentukan opasitas warna. Opasitas bersifat opsional, dan dapat memiliki nilai antara 0 dan 1.

Anda dapat menentukan gradien radial dengan cara yang sama menggunakan two.makeRadialGradient (x, y, radius, stops, fx, fy). Dalam kasus ini, nilai-nilai x dan y yang menentukan pusat gradien. Parameter radius menentukan seberapa jauh gradien harus diperluas. Anda juga dapat melewati array berhenti untuk metode ini untuk menetapkan komposisi warna gradien. Parameter fx dan fy adalah opsional, dan mereka dapat digunakan untuk menentukan posisi fokus untuk gradien.

Lihat beberapa jenis gradien dan kode mereka di CodePen di bawah ini.

Ingat bahwa x dan y posisi gradien yang berkaitan dengan asal-usul mereka mencoba untuk mengisi bentuk. Misalnya, gradien radial yang seharusnya mengisi bentuk dari pusat akan selalu memiliki x dan y diatur ke nol.

Two.js juga memungkinkan Anda menulis teks pada area gambar dan memperbaruinya nanti sesuai dengan kebutuhan Anda. Ini membutuhkan penggunaan metode two.makeText (message, x, y, styles). Mungkin terlihat dari nama parameter bahwa message adalah teks yang sebenarnya yang ingin Anda tulis. Parameter x dan y adalah koordinat titik yang akan bertindak sebagai pusat untuk menulis teks. Parameter styles adalah sebuah objek yang dapat digunakan untuk mengatur nilai dari sekumpulan besar properti.

Anda dapat menggunakan gaya untuk menetapkan nilai properti seperti font family, size, danalignment.. Anda juga dapat menentukan nilai properti seperti fill, stroke, opacity, rotation, scale, dan translation

Membuat Proyek Two.js.

Setelah mempelajari semua metode dan properti ini, sekarang saatnya untuk menerapkannya ke proyek. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana kita dapat menggunakan Two.js untuk membuat sepuluh elemen pertama dari tabel periodik dengan elektron berputar di sekitar nukleus. Nukleus juga memiliki sedikit gerakan untuk meningkatkan daya tarik visual representasi kita.

Kami mulai dengan mendefinisikan beberapa variabel dan fungsi yang akan digunakan nanti.

var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;

var elem = document.getElementById("atoms");

var elementNames = [
  "",
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryllium",
  "Boron",
  "Carbon",
  "Nitrogen",
  "Oxygen",
  "Fluorine",
  "Neon"
];

var styles = {
  alignment: "center",
  size: 36,
  family: "Lato"
};

var nucleusCount = 10;
var nucleusArray = Array();

var electronCount = 10;
var electronArray = Array();

function intRange(min, max) {
  return Math.random() * (max - min) + min;
}

Kode di atas menyimpan koordinat pusat window kita di variabel centerX dan centerY. Ini akan digunakan kemudian untuk menempatkan atom kita di tengah. Array elemenNames berisi nama-nama dari sepuluh elemen pertama dari tabel periodik. Indeks setiap nama sesuai dengan jumlah elektron dan proton dari elemen itu, dan ini dimulai dengan string kosong. Objek styles berisi properti untuk menata objek teks.

Kita juga mendefinisikan fungsi intRange () untuk mendapatkan nilai integer acak dalam ekstrem yang diberikan.

var two = new Two({ fullscreen: true }).appendTo(elem);

var protonColor = two.makeRadialGradient(
  0,
  0,
  15,
  new Two.Stop(0, "red", 1),
  new Two.Stop(1, "black", 1)
);

var neutronColor = two.makeRadialGradient(
  0,
  0,
  15,
  new Two.Stop(0, "blue", 1),
  new Two.Stop(1, "black", 1)
);

for (i = 0; i < nucleusCount; i++) {
  nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8));
}

nucleusArray.forEach(function(nucleus, index) {
  if (index % 2 == 0) {
    nucleus.fill = protonColor;
  }
  if (index % 2 == 1) {
    nucleus.fill = neutronColor;
  }
  nucleus.noStroke();
});

Ini menciptakan sebuah instance dari Dua dan mendefinisikan dua gradien radial. Gradien radial merah / hitam akan mewakili proton, dan gradien biru / hitam akan mewakili neutron.

Kita telah menggunakan fungsi intRange () untuk menempatkan semua neutron dan proton ini dalam 20 piksel satu sama lain. Metode makeCircle () juga menetapkan radius proton dan neutron ini hingga 10 piksel. Setelah itu, kita iterate atas nucleusArray dan isi setiap lingkaran dengan gradien yang berbeda secara bergantian.

for (var i = 0; i < 10; i++) {
  if (i < 2) {
    var shellRadius = 50;
    var angle = i * Math.PI;
    electronArray.push(
      two.makeCircle(
        Math.cos(angle) * shellRadius,
        Math.sin(angle) * shellRadius,
        5
      )
    );
  }
  if (i >= 2 && i < 10) {
    var shellRadius = 80;
    var angle = (i - 2) * Math.PI / 4;
    electronArray.push(
      two.makeCircle(
        Math.cos(angle) * shellRadius,
        Math.sin(angle) * shellRadius,
        5
      )
    );
  }
}

Menempatkan neutron dan proton di dalam nukleus itu mudah. Namun, menempatkan elektron secara tepat pada jarak yang seragam akan membutuhkan sedikit matematika. Kita menggunakan variabel shellRadius untuk menentukan jarak cangkang elektron yang berbeda dari nukleus. Seluruh lingkaran mencakup sudut yang sama dengan 2 radian PI. Kita dapat menempatkan elektron yang berbeda secara seragam dengan mendistribusikan radian 2 PI di antara mereka secara merata.

Fungsi Math.cos () dan Math.sin () digunakan untuk memisahkan komponen vertikal dan horizontal dari vektor posisi elektron yang berbeda berdasarkan sudutnya.

var orbitA = two.makeCircle(centerX, centerY, 50);
orbitA.fill = "transparent";
orbitA.linewidth = 2;
orbitA.stroke = "rgba(0, 0, 0, 0.1)";

var orbitB = two.makeCircle(centerX, centerY, 80);
orbitB.fill = "transparent";
orbitB.linewidth = 2;
orbitB.stroke = "rgba(0, 0, 0, 0.1)";

var groupElectronA = two.makeGroup(electronArray.slice(0, 2));
groupElectronA.translation.set(centerX, centerY);
groupElectronA.fill = "orange";
groupElectronA.linewidth = 1;

var groupElectronB = two.makeGroup(electronArray.slice(2, 10));
groupElectronB.translation.set(centerX, centerY);
groupElectronB.fill = "yellow";
groupElectronB.linewidth = 1;

var groupNucleus = two.makeGroup(nucleusArray);
groupNucleus.translation.set(centerX, centerY);

Bagian kode ini menempatkan elektron dari cangkang yang berbeda serta neutron dan proton dalam kelompok mereka sendiri yang terpisah. Ini juga mengatur warna isian untuk semua elektron dalam orbit tertentu sekaligus.

two
  .bind("update", function(frameCount) {
    groupElectronA.rotation += 0.025 * Math.PI;
    groupElectronB.rotation += 0.005 * Math.PI;
    groupNucleus.rotation -= 0.05;
  })
  .play();

var text = two.makeText("", centerX, 100, styles);

nucleusArray.forEach(function(nucleus, index) {
  nucleus.opacity = 0;
});

electronArray.forEach(function(electron, index) {
  electron.opacity = 0;
});

Bagian kode ini mengatur opasitas elektron dan proton individu ke nol. Ia juga memberitahu Two.js untuk memutar elektron dan proton pada kecepatan tertentu.

visible = 0;

document.addEventListener("click", function(event) {
  if (visible < nucleusArray.length) {
    nucleusArray[visible].opacity = 1;
    electronArray[visible].opacity = 1;
    visible++;
    text.value = elementNames[visible];
  }
  else {
    nucleusArray.forEach(el => el.opacity=0);
    electronArray.forEach(el => el.opacity=0);
    visible = 0;
    text.value = elementNames[0];
  }
});         


Bagian terakhir dari kode memungkinkan kita melakukan iterasi melalui elemen dengan mengklik mouse atau mengetuk. Untuk memuat elemen selanjutnya, kita membuat satu lagi elektron dan satu lagi proton atau neutron yang terlihat dan memperbarui nama elemen. Setelah mengklik elemen terakhir, semua partikel disembunyikan lagi sehingga kita dapat memulai kembali. Variabel terlihat melacak jumlah partikel atom yang saat ini terlihat sehingga kita dapat menampilkan atau menyembunyikannya..

Coba klik atau ketuk dalam CodePen demo berikut untuk melihat sepuluh elemen pertama dari tabel periodik.

Pikiran Akhir

Kita memulai tutorial ini dengan pengantar singkat ke perpustakaan Two.js dan bagaimana ini dapat digunakan untuk menggambar bentuk seperti persegi panjang, lingkaran, dan elips. Setelah itu, kita membahas bagaimana kita dapat mengelompokkan objek yang berbeda bersama-sama untuk memanipulasi mereka sekaligus. Kami menggunakan kemampuan ini untuk kelompok elemen untuk menerjemahkan dan memutarnya di sinkronisasi. Semua alat ini bergabung dalam animasi atom-atom dari sepuluh elemen pertama dalam tabel periodik.

Seperti yang Anda lihat, membuat grafik 2D animasi sangat mudah menggunakan Two.js. Fokus dari posting ini adalah untuk membantu Anda memulai dengan cepat, jadi kita hanya membahas dasar-dasarnya. Namun, Anda harus membaca official documentation untuk mempelajari lebih lanjut tentang library!