JavaScript Grafik: Perjalanan Pemula ke Dalam Visual Programming

Halo sana, calon pemrogrammer! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia grafik JavaScript. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan bahwa pemrograman grafik adalah salah satu aspek yang paling menggembirakan dan menyenangkan dalam pemrograman. Jadi, mari kita roll up our sleeves dan masuk ke dalam!

Pengenalan ke Grafik JavaScript

Sebelum kita mengeksplorasi library dan alat tertentu, mari kita mengerti mengapa grafik dalam JavaScript sangat penting. bayangkan dunia di mana semua situs web hanya berupa teks biasa - bosan, kan? Grafik memberikan kehidupan pada pengalaman digital kita, membuatnya lebih menarik, informatif, dan kadang-kadang bahkan magis!

WebGL: Kuasa 3D di Dalam Browser Anda

Apa itu WebGL?

WebGL (Web Graphics Library) adalah API JavaScript yang memungkinkan kita untuk merender grafik 2D dan 3D berkualitas tinggi di dalam browser. Itu seperti memiliki studio film mini di dalam halaman web Anda!

Program WebGL Pertama Anda

Mari kita mulai dengan contoh sederhana. Kita akan membuat segitiga merah di atas canvas:

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// Dapatkan elemen canvas
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

// Definisikan shader verteks
var vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

// Definisikan shader fragmen
var fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// Buat shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Buat program
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// Gunakan program
gl.useProgram(program);

// Buat buffer
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// Set geometri
var positions = [
0.0,  0.5,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// Set atribut
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Gambar
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

Wow, itu banyak hal untuk diambil! Mari kitauraikan:

1. Kita mulai dengan membuat elemen canvas dan mendapatkan konteks WebGL.
2. Kita mendefinisikan dua shader: shader verteks (yang menempatkan segitiga kita) dan shader fragmen (yang memberikan warna merah).
3. Kita membuat program menggunakan shader ini.
4. Kita membuat buffer untuk menyimpan posisi vertex segitiga kita.
5. Akhirnya, kita menggambar segitiga.

Jangan khawatir jika ini terlihat kompleks - WebGL memiliki kemampuan yang kuat tetapi memiliki kurva belajar yang tinggi. Seiring waktu, Anda akan merasa nyaman dengan konsep ini.

P5.js: Koding Kreatif Diperbuat Mudah

Apa itu P5.js?

P5.js adalah library JavaScript yang membuat menciptakan konten visual menjadi mudah. Itu sempurna untuk pemula dan seniman juga!

Menggambar Bentuk dengan P5.js

Mari kita gambar wajah sederhana menggunakan P5.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script>
function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);

// Wajah
fill(255, 220, 180);
ellipse(200, 200, 300, 300);

// Mata
fill(0);
ellipse(150, 150, 50, 50);
ellipse(250, 150, 50, 50);

// Mulut
noFill();
stroke(0);
arc(200, 250, 100, 50, 0, PI);
}
</script>

Kode ini membuat canvas, menggambar lingkaran untuk wajah, dua lingkaran kecil untuk mata, dan busur untuk senyum. P5.js menggunakan fungsi setup() untuk menginisialisasi canvas dan fungsi draw() yang berjalan secara berkelanjutan untuk memperbarui gambar.

Plotly.js: Visualisasi Data Dibuat cantik

Apa itu Plotly.js?

Plotly.js adalah library chart tingkat tinggi yang memungkinkan Anda menciptakan chart dan grafik yang cantik dan interaktif.

Membuat Chart Batang

Mari kita buat chart batang sederhana yang menunjukkan preferensi buah-buahan:

<div id="myPlot"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var data = [{
x: ['Apel', 'Pisang', 'Jeruk'],
y: [20, 14, 23],
type: 'bar'
}];

var layout = {
title: 'Preferensi Buah',
xaxis: {title: 'Buah'},
yaxis: {title: 'Jumlah Suara'}
};

Plotly.newPlot('myPlot', data, layout);
</script>

Kode ini membuat chart batang dengan tiga batang yang mewakili suara untuk buah-buahan berbeda. Plotly.js menangani semua rendering kompleks bagi kita!

Chart.js: Chart Sederhana Tetapi Kuat

Apa itu Chart.js?

Chart.js adalah library chart yang populer yang dikenal akan kepraktisannya dan chart yang responsif.

Membuat Chart Pie

Mari kita buat chart pie yang menunjukkan distribusi kegiatan sehari-hari seseorang:

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Tidur', 'Kerja', 'Waktu Luang', 'Makan', 'Lainnya'],
datasets: [{
data: [8, 8, 4, 2, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 206, 86, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(153, 102, 255, 0.8)'
]
}]
},
options: {
title: {
display: true,
text: 'Kegiatan Harian'
}
}
});
</script>

Kode ini membuat chart pie berwarna-warni yang menunjukkan bagaimana seseorang menghabiskan 24 jam dalam sehari. Chart.js menghitung dan merender semua bagi kita.

Google Charts: Didukung oleh Infrastruktur kuat Google

Apa itu Google Charts?

Google Charts adalah library chart yang kuat yang memanfaatkan infrastruktur Google untuk menciptakan chart dan grafik yang cepat dan interaktif.

Membuat Chart Garis

Mari kita buat chart garis yang menunjukkan penjualan perusahaan selama waktu:

<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Tahun', 'Penjualan'],
['2018',  1000],
['2019',  1170],
['2020',  660],
['2021',  1030]
]);

var options = {
title: 'Kinerja Perusahaan',
curveType: 'function',
legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

Kode ini membuat chart garis yang mulus menunjukkan angka penjualan selama empat tahun. Google Charts menyediakan berbagai jenis chart dan opsi kustomisasi.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia menarik grafik JavaScript. Kita telah meliputi banyak hal, dari kekuatan tingkat rendah WebGL hingga kemudahan P5.js. Ingat, kunci untuk menguasai library ini adalah latihan. Jadi, jangan khawatir untuk mencoba dan menciptakan visualisasi Anda sendiri!

Berikut adalah tabel yang menggabungkan library yang kita diskusikan:

Library	Gunatan Utama	Tingkat Kesulitan
WebGL	Grafik 3D, pengembangan game	Tinggi
P5.js	Koding kreatif, proyek seni	Pemula
Plotly.js	Chart ilmiah dan statistik	Menengah
Chart.js	Chart sederhana, responsif	Pemula
Google Charts	Berbagai jenis chart, integrasi Google	Menengah

Tetap mengoding, tetap menciptakan, dan terutama, bersenang-senang! Dunia grafik adalah milik Anda, dan JavaScript adalah permata Anda. Selamat coding!

Credits: Image by storyset