JavaScript 圖形：初學者進入視覺編程的旅程

你好，有志者！我很興奮能成為你進入JavaScript圖形世界的引路人。作為一個教了超過十年計算機科學的人，我可以告訴你，圖形編程是編程中最有成就感和樂趣的部分之一。所以，讓我們捋起袖子，開始動手吧！

JavaScript - Graphics

JavaScript 圖形介紹

在我們探索特定的庫和工具之前，讓我們先了解為什麼JavaScript中的圖形如此重要。想像一下，如果所有的網站都只是純文字——無聊吧？圖形為我們的數字體驗帶來了生命力，讓它們變得更加引人入勝、資訊豐富，甚至有時候還帶點魔法！

WebGL：瀏覽器中的3D力量

WebGL 是什麼？

WebGL（Web 圖形庫）是一個JavaScript API，讓我們能在網絡瀏覽器中渲染高性能的2D和3D圖形。它就像在你的網頁中擁有一個迷你電影工作室！

你的第一個 WebGL 程式

讓我們從一個簡單的例子開始。我們將在畫布上創建一個紅色三角形：

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// 獲取畫布元素
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

// 定義頂點著色器
var vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

// 定義片段著色器
var fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// 創建著色器
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);

// 創建程序
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 使用程序
gl.useProgram(program);

// 創建緩存
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 設置幾何形状
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);

// 設置屬性
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

哇，這需要吸收很多資訊！讓我們分解一下：

我們從創建一個畫布元素和獲取其 WebGL 上下文開始。
我們定義了兩個著色器：一個頂點著色器（用於定位我們的三角形）和一個片段著色器（用於將其染成紅色）。
我們使用這些著色器創建了一個程序。
我們創建了一個緩存來存儲我們三角形的頂點位置。
最後，我們繪製了三角形。

別擔心，如果這看起來很複雜——WebGL 的功能強大，但學習曲線陡峭。隨著我們的進步，你會對這些概念變得更加熟悉。

P5.js：創意編程變得簡單

P5.js 是什麼？

P5.js 是一個JavaScript庫，讓創建視覺內容變得非常容易。它對初學者和藝術家都非常適合！

使用 P5.js 繪製形狀

讓我們使用 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);

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

// 眼睛
fill(0);
ellipse(150, 150, 50, 50);
ellipse(250, 150, 50, 50);

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

這段代碼創建了一個畫布，繪製了一個圓形作為臉，兩個較小的圓形作為眼睛，以及一個弧形作為微笑。P5.js 使用 setup() 函數初始化畫布，以及不斷運行的 draw() 函數來更新繪圖。

Plotly.js：數據視覺化變得美麗

Plotly.js 是什麼？

Plotly.js 是一個高級的圖表庫，讓你可以創建美麗、交互式的圖表和圖形。

創建一個柱狀圖

讓我們創建一個簡單的柱狀圖，顯示水果偏好的調查結果：

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

var layout = {
title: '水果偏好',
xaxis: {title: '水果'},
yaxis: {title: '投票數'}
};

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

這段代碼創建了一個柱狀圖，有三個柱子代表不同水果的投票數。Plotly.js 負責所有的複雜渲染工作！

Chart.js：簡單而強大的圖表

Chart.js 是什麼？

Chart.js 是另一個著名的圖表庫，以其簡單性和響應式圖表而聞名。

創建一個餅狀圖

讓我們創建一個餅狀圖，顯示一個人的日常活動分佈：

<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: ['睡眠', '工作', '休閒', '進食', '其他'],
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: '日常活動'
}
}
});
</script>

這段代碼創建了一個彩色的餅狀圖，顯示一個人在一天中如何分配他們的24小時。Chart.js 負責計算和渲染。

Google Charts：背靠 Google 的強大基礎設施

Google Charts 是什麼？

Google Charts 是一個功能強大的圖表庫，利用 Google 的基礎設施來創建快速、交互式的圖表。

創建一個線狀圖

讓我們創建一個線狀圖，顯示一家公司隨著時間的銷售情況：

<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([
['年份', '銷售額'],
['2018',  1000],
['2019',  1170],
['2020',  660],
['2021',  1030]
]);

var options = {
title: '公司業績',
curveType: 'function',
legend: { position: 'bottom' }
};

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

這段代碼創建了一個平滑的線狀圖，顯示四年來的銷售數字。Google Charts 提供了廣泛的圖表類型和定制選項。

結論

恭喜你！你剛剛踏上了進入JavaScript圖形世界的第一步。我們已經走過了很多地方，從低級的 WebGL 到簡單的 Chart.js。記住，精通這些庫的關鍵是練習。所以，不要害怕嘗試和創建你自己的視覺化！

這裡是一個我們討論過的庫的總結表：

庫	主要用例	難度級別
WebGL	3D 圖形、遊戲開發	高級
P5.js	創意編程、藝術項目	初學者
Plotly.js	科學和統計圖表	中級
Chart.js	簡單、響應式圖表	初學者
Google Charts	多種類型的圖表、Google 整合	中級

持續編程，持續創造，最重要的是，玩得開心！圖形的世界是你的牡蠣，而 JavaScript 是你的珍珠。快樂編程！

Credits: Image by storyset