JavaScript 그래픽: 시각 프로그래밍으로의 초보자 여정

안녕하세요, 열정적인 프로그래머 되시는 분! JavaScript 그래픽의 fascinле 있는 여정에 함께 가이드를 맡게 되어 기쁩니다. 컴퓨터 과학을 10년 넘게 가르쳐온 경험을 바탕으로 말씀드리면, 그래픽 프로그래밍은 코딩의 가장 보람 있고 즐거운 부분 중 하나입니다. 그럼 손을 맞추고 시작해보겠습니다!

JavaScript - Graphics

JavaScript 그래픽 소개

구체적인 라이브러리와 도구를 탐구하기 전에, JavaScript에서 그래픽이 왜 중요한지 이해해보겠습니다. 모든 웹사이트가 단순 텍스트로만 구성된 세상을 상상해보세요 - 지루하지 않나요? 그래픽은 우리의 디지털 경험에 생기를 불어넣어 더욱 흥미롭고, 정보적이고, 때로는 마법적이게 만듭니다!

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>

와, 많은 내용이죠! 이를 단계별로 나눠보겠습니다:

캔버스 요소를 생성하고 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: ['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>

이 코드는 세 개의 막대를 사용하여 다른 과일에 대한 투표 수를 보여줍니다. 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: ['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>

이 코드는 개인의 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([
['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>

이 코드는 4년간의 매출 데이터를 그래프로 보여줍니다. Google Charts는 다양한 차트 유형과 맞춤화 옵션을 제공합니다.

결론

축하합니다! JavaScript 그래픽의 흥미로운 세상으로 첫 걸음을 뗀 것입니다. 우리는 WebGL에서 P5.js까지 다양한 라이브러리를 다루었습니다. 이 라이브러리를 마스터하려면 연습이 중요합니다. 그러니 두려워 말고 실험하고 자신만의 시각화를 만들어보세요!

아래 표는 우리가 다룰 라이브러리의 요약입니다:

라이브러리	주요 사용 사례	난이도 수준
WebGL	3D 그래픽, 게임 개발	고급
P5.js	창의 코딩, 예술 프로젝트	초보
Plotly.js	과학적 및 통계적 차트	중급
Chart.js	간단하고 반응성 있는 차트	초보
Google Charts	다양한 차트, Google 통합	중급

계속 코딩하고, 계속 창의적으로 만들어가세요! 그래픽의 세상은 당신의 것이며, JavaScript는 당신의 보석입니다. 행복하게 코딩하세요!

Credits: Image by storyset