JavaScript Graphics: A Beginner's Journey into Visual Programming

Xin chào các bạn đang theo đuổi lập trình! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này vào thế giới đồ họa JavaScript. Như một người đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng lập trình đồ họa là một trong những khía cạnh thú vị và có phần thưởng nhất của việc viết mã. Hãy cùng nhau挽起袖子 và nhảy vào!

Introduction to JavaScript Graphics

Trước khi chúng ta khám phá các thư viện và công cụ cụ thể, hãy hiểu tại sao đồ họa trong JavaScript lại quan trọng. Hãy tưởng tượng một thế giới mà tất cả các trang web chỉ có văn bản thuần túy - nhàm chán phải không? Đồ họa mang lại sự sống cho trải nghiệm kỹ thuật số của chúng ta, làm cho chúng trở nên thú vị hơn, cung cấp thông tin hơn và đôi khi thậm chí còn kỳ diệu!

WebGL: The Power of 3D in Your Browser

What is WebGL?

WebGL (Web Graphics Library) là một API JavaScript cho phép chúng ta render đồ họa 2D và 3D có hiệu suất cao trong các trình duyệt web. Nó giống như có một studio điện ảnh mini ngay trên trang web của bạn!

Your First WebGL Program

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một tam giác đỏ trên một canvas:

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

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

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

    // Create shaders
    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);

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

    // Use program
    gl.useProgram(program);

    // Create 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);

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

Wow, đó là rất nhiều thông tin để hấp thụ! Hãy cùng nhau phân tích:

1. Chúng ta bắt đầu bằng cách tạo một phần tử canvas và lấy ngữ cảnh WebGL của nó.
2. Chúng ta định nghĩa hai shader: một shader đỉnh (vị trí của tam giác) và một shader mảnh (màu sắc của nó).
3. Chúng ta tạo một chương trình sử dụng các shader này.
4. Chúng ta tạo một bộ nhớ đệm để lưu trữ vị trí đỉnh của tam giác.
5. Cuối cùng, chúng ta vẽ tam giác.

Đừng lo lắng nếu điều này có vẻ phức tạp - WebGL mạnh mẽ nhưng có độ dốc học tập陡峭. Khi chúng ta tiếp tục, bạn sẽ dần quen thuộc với các khái niệm này.

P5.js: Creative Coding Made Easy

What is P5.js?

P5.js là một thư viện JavaScript giúp tạo nội dung thị giác một cách dễ dàng. Nó hoàn hảo cho cả người mới bắt đầu và nghệ sĩ!

Drawing Shapes with P5.js

Hãy vẽ một khuôn mặt đơn giản sử dụng 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);

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

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

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

Mã này tạo một canvas, vẽ một hình tròn cho khuôn mặt, hai hình tròn nhỏ hơn cho mắt và một cung tròn cho nụ cười. P5.js sử dụng một hàm setup() để�始化 canvas và một hàm draw() chạy liên tục để cập nhật hình ảnh.

Plotly.js: Data Visualization Made Beautiful

What is Plotly.js?

Plotly.js là một thư viện biểu đồ cao cấp cho phép bạn tạo các biểu đồ và graphs đẹp mắt, tương tác.

Creating a Bar Chart

Hãy tạo một biểu đồ cột đơn giản hiển thị sở thích quả cây:

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

var layout = {
  title: 'Fruit Preferences',
  xaxis: {title: 'Fruit'},
  yaxis: {title: 'Number of Votes'}
};

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

Mã này tạo một biểu đồ cột với ba cột đại diện cho số phiếu bầu cho các loại quả khác nhau. Plotly.js xử lý tất cả các渲染 phức tạp cho chúng ta!

Chart.js: Simple Yet Powerful Charts

What is Chart.js?

Chart.js là một thư viện biểu đồ phổ biến được biết đến với sự đơn giản và các biểu đồ phản hồi.

Creating a Pie Chart

Hãy tạo một biểu đồ bánh hình tròn hiển thị phân phối hoạt động hàng ngày của một người:

<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: ['Sleep', 'Work', 'Leisure', 'Eating', 'Other'],
        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: 'Daily Activities'
        }
    }
});
</script>

Mã này tạo một biểu đồ bánh hình tròn màu sắc đẹp mắt hiển thị cách một người phân phối 24 giờ trong ngày của họ. Chart.js lo liệu tất cả các phép toán và渲染 cho chúng ta.

Google Charts: Backed by Google's Powerful Infrastructure

What are Google Charts?

Google Charts là một thư viện biểu đồ mạnh mẽ sử dụng cơ sở hạ tầng của Google để tạo các biểu đồ nhanh, tương tác.

Creating a Line Chart

Hãy tạo một biểu đồ đường hiển thị doanh số bán hàng của một công ty theo thời gian:

<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([
    ['Year', 'Sales'],
    ['2018',  1000],
    ['2019',  1170],
    ['2020',  660],
    ['2021',  1030]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

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

Mã này tạo một biểu đồ đường mượt mà hiển thị số liệu doanh số bán hàng trong bốn năm. Google Charts cung cấp một loạt các loại biểu đồ và tùy chọn tùy chỉnh.

Conclusion

Chúc mừng! Bạn đã刚刚迈出了进入JavaScript图形世界的第一步。我们已经覆盖了很多内容， từ sức mạnh cấp thấp của WebGL đến sự đơn giản của Chart.js. Nhớ rằng, chìa khóa để thành thạo các thư viện này là thực hành. Vậy, đừng ngần ngại thử nghiệm và tạo ra các visualization của riêng bạn!

Dưới đây là bảng tóm tắt các thư viện chúng ta đã thảo luận:

Library	Main Use Case	Difficulty Level
WebGL	3D graphics, game development	Advanced
P5.js	Creative coding, art projects	Beginner
Plotly.js	Scientific and statistical charts	Intermediate
Chart.js	Simple, responsive charts	Beginner
Google Charts	Wide variety of charts, Google integration	Intermediate

Tiếp tục mã hóa, tiếp tục sáng tạo và quan trọng nhất, hãy vui vẻ! Thế giới đồ họa là của bạn, và JavaScript là ngọc trai của bạn. Chúc bạn may mắn trong việc mã hóa!

Credits: Image by storyset