Pandangan Awal ke dalam Grafik JavaScript: Perjalanan Pemula ke dalam Pemrograman Visual

Hai sana, pemrogram yang sedang mencari ilmu! Saya sangat gembira untuk menjadi panduanmu dalam perjalanan menarik ini ke dunia grafik JavaScript. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan kepada Anda bahwa pemrograman grafik adalah salah satu aspek yang paling menggembirakan dan menyenangkan dalam pemrograman. mari kita gulung lengan dan masuk ke dalamnya!

Pengenalan ke Grafik JavaScript

Sebelum kita mengeksplor library dan alat tertentu, mari kita pahami mengapa grafik di JavaScript sangat penting. Bayangkan dunia tempat semua situs web hanya berupa teks biasa - membosankan, kan? Grafik memberikan kehidupan kepada 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 web. Itu seperti memiliki studio film mini di halaman web Anda!

Program WebGL Pertama Anda

mari kita mulai dengan contoh sederhana. Kita akan membuat segitiga merah di atas kanvas:

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// Dapatkan elemen kanvas
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 geometry
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 up attribute
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 diterima! Mari kita pecahkan ini:

1. Kita mulai dengan membuat elemen kanvas dan mendapatkan kontek WebGLnya.
2. Kita definisikan dua shader: shader verteks (yang menempatkan segitiganya) dan shader fragmen (yang memberikan warna merah).
3. Kita buat program menggunakan shader ini.
4. Kita buat buffer untuk menyimpan posisi verteks segitiganya.
5. Akhirnya, kita menggambar segitiga.

Jangan khawatir jika ini terlihat kompleks - WebGL kuat tetapi memiliki kemiringan belajar yang tinggi. Sebagai kita maju, Anda akan merasa lebih nyaman dengan konsep ini.

P5.js: Pemrograman Kreatif Diperdagangkan Mudah

Apa itu P5.js?

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

Menggambar Bentuk dengan P5.js

mari kita menggambar 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 kanvas, menggambar lingkaran untuk wajah, dua lingkaran kecil untuk mata, dan busur untuk senyum. P5.js menggunakan fungsi setup() untuk menginisialisasi kanvas dan fungsi draw() yang berjalan terus-menerus untuk memperbarui gambar.

Plotly.js: Visualisasi Data Diperindahkan cantik

Apa itu Plotly.js?

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

Membuat Chart Batang

mari kita buat chart batang sederhana yang menunjukkan preferensi buah:

<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 untuk kita!

Chart.js: Chart Sederhana tapi Kuat

Apa itu Chart.js?

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

Membuat Chart Pie

mari kita buat chart pie yang menunjukkan distribusi aktivitas harian 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: 'Aktivitas Harian'
}
}
});
</script>

Kode ini membuat chart pie berwarna-warni yang menunjukkan bagaimana seseorang menghabiskan 24 jam mereka dalam sehari. Chart.js menangani perhitungan dan rendering untuk kita.

Google Charts: Dukungan oleh Infrastruktur Kuat Google

Apa itu Google Charts?

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

Membuat Chart Garis

mari kita buat chart garis yang menunjukkan penjualan perusahaan dalam 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 dalam empat tahun. Google Charts menyediakan berbagai jenis chart dan opsi kustomisasi.

Kesimpulan

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

Berikut adalah tabel yang menggabungkan library yang kita diskusikan:

Library	kasus Penggunaan Utama	Tingkat Kesulitan
WebGL	Grafik 3D, pengembangan game	Tinggi
P5.js	Pemrograman 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 kode, tetap buat, dan terutama, bersenang-senang! Dunia grafik adalah kepunyaan Anda, dan JavaScript adalah mutiara Anda. Selamat coding!

Credits: Image by storyset