日本語

JavaScript 基本チュートリアル

JavaScript オペレータ

JavaScriptの制御フロー

JavaScript関数

JavaScriptオブジェクト

オブジェクト指向型JavaScript

JavaScriptのバージョン

JavaScript クッキー

JavaScript ブラウザBOM

JavaScriptのウェブAPI

JavaScript イベント

JavaScriptエラーハンドリング

JavaScript 的重要なキーワード

JavaScript HTML DOM

JavaScript その他

JavaScript グラフィックス：ビジュアルプログラミングへの入門之旅

こんにちは、将来のプログラマーさん！このエキサイティングなJavaScriptグラフィックスの旅にお連れします。コンピュータサイエンスを10年以上教えてきた者として、グラフィックスプログラミングはコーディングの中でも最も報酬があり、楽しい領域之一的です。では、袖をまくって、飛び込んでみましょう！

JavaScript - Graphics

JavaScript グラフィックスの紹介

具体的なライブラリやツールを探求する前に、JavaScriptにおけるグラフィックスの重要性を理解しましょう。すべてのウェブサイトが単なるプレーンテキストだけの世界 imagine してみてください - 退屈ですよね？グラフィックスは私たちのデジタル体験に命を吹き込み、より魅力的で、情報的で、時には魔法のようなものにします！

WebGL：ブラウザでの3Dパワー

WebGLとは？

WebGL（Web Graphics Library）は、ブラウザ内で高パフォーマンスな2Dおよび3DグラフィックスをレンダリングするためのJavaScript APIです。まるでウェブページの中にミニ映画スタジオがあるようなものです！

最初の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>

これは相当な量の情報です！以下に分解してみましょう：

  1. キャンバス要素を作成し、そのWebGLコンテキストを取得します。
  2. ヴェクターシェーダーとフラグメントシェーダーを定義します。
  3. これらのシェーダーを使ってプログラムを作成します。
  4. 三角形の頂点位置を格納するためのバッファを作成します。
  5. 最後に三角形を描画します。

この複雑さに不安に思わないでください - 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>

このコードは、4年間の売上を示す滑らかな線形チャートを作成します。Google Chartsは多くのチャートタイプとカスタマイズオプションを提供します。

結論

おめでとうございます！JavaScriptグラフィックスのエキサイティングな世界への最初のステップを踏み出しました。私たちは多くのことをカバーしました。低レベルのパワーを持つWebGLから、Chart.jsのシンプルさまでです。これらのライブラリをマスターする鍵は練習です。ですから、実験を恐れず、自分自身のビジュアライゼーションを作成してみてください！

以下に、私たちが議論したライブラリのまとめ表を示します：

ライブラリ 主な用途 難易度レベル
WebGL 3Dグラフィックス、ゲーム開発 高レベル
P5.js クリエイティブコーディング、アートプロジェクト 初心者
Plotly.js 科学と統計のチャート 中レベル
Chart.js シンプルで応答性に優れたチャート 初心者
Google Charts 多種多様なチャート、Googleとの統合 中レベル

codingを続け、創作を続け、そして何より楽しむことを忘れずに！グラフィックスの世界はあなたのもの、JavaScriptはあなたの真珠です。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
JavaScript - カリー化
次のチュートリアル:
JavaScript - Canvas