JavaScript Grafik: Ein AnfängerInnen Weg in die visuelle Programmierung

Hallo da draußen, angehende Programmiererin/Programmierer! Ich freue mich sehr, Ihr/eure Guide auf dieser aufregenden Reise in die Welt der JavaScript-Grafik zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen sagen, dass Grafikprogrammierung eine der am meisten belohnenden und spaßigen Aspekte des Codens ist. Also, lasst uns die Ärmel hochwerfen und eintauchen!

Einführung in JavaScript-Grafik

Bevor wir spezifische Bibliotheken und Tools erkunden, lassen Sie uns verstehen, warum Grafik in JavaScript so wichtig ist. Stellen Sie sich vor, alle Websites wären nur einfacher Text - langweilig, oder? Grafik verleiht unseren digitalen Erfahrungen Leben, macht sie ansprechender, informativer und manchmal sogar magisch!

WebGL: Die Macht des 3D in Ihrem Browser

Was ist WebGL?

WebGL (Web Graphics Library) ist eine JavaScript-API, die es uns ermöglicht, leistungsfähige 2D- und 3D-Grafiken in Webbrowsern zu rendern. Es ist, als hätten Sie ein Mini-Filmstudio direkt auf Ihrer Webseite!

Ihr erstes WebGL-Programm

Lassen Sie mit einem einfachen Beispiel beginnen. Wir erstellen ein rotes Dreieck auf einem 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, das ist viel auf einmal! Lassen Sie uns das zusammenbrechen:

1. Wir beginnen mit der Erstellung eines Canvas-Elements und dem Abrufen seines WebGL-Kontexts.
2. Wir definieren zwei Shaders: einen Vertex-Shader (der unser Dreieck positioniert) und einen Fragment-Shader (der es rot färbt).
3. Wir erstellen ein Programm mit diesen Shaders.
4. Wir erstellen einen Puffer, um die Vertex-Positionen unseres Dreiecks zu speichern.
5. Schließlich zeichnen wir das Dreieck.

Machen Sie sich keine Sorgen, wenn das komplex erscheint - WebGL ist leistungsstark, aber hat eine steile Lernkurve. Während wir voranschreiten, werden Sie sich mit diesen Konzepten wohler fühlen.

P5.js: Kreatives Coding Made Easy

Was ist P5.js?

P5.js ist eine JavaScript-Bibliothek, die das Erstellen von visuellem Inhalt zum Kinderspiel macht. Sie ist perfekt für Anfänger und Künstler gleichermaßen!

Zeichnen von Formen mit P5.js

Lassen Sie uns ein einfaches Gesicht mit P5.js zeichnen:

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

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

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

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

Dieser Code erstellt ein Canvas, zeichnet einen Kreis für das Gesicht, zwei kleinere Kreise für die Augen und einen Bogen für das Lächeln. P5.js verwendet eine setup()-Funktion, um das Canvas zu initialisieren, und eine draw()-Funktion, die kontinuierlich ausgeführt wird, um das Zeichnen zu aktualisieren.

Plotly.js: Data Visualization Made Beautiful

Was ist Plotly.js?

Plotly.js ist eine hochwertige Chart-Bibliothek, die es Ihnen ermöglicht, schöne, interaktive Diagramme und Grafiken zu erstellen.

Erstellen eines Balkendiagramms

Lassen Sie uns ein einfaches Balkendiagramm erstellen, das die Fruchtpräferenzen zeigt:

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

var layout = {
title: 'Fruchtpräferenzen',
xaxis: {title: 'Frucht'},
yaxis: {title: 'Anzahl der Stimmen'}
};

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

Dieser Code erstellt ein Balkendiagramm mit drei Balken, die die Stimmen für verschiedene Früchte darstellen. Plotly.js übernimmt alle komplexen Renderungen für uns!

Chart.js: Einfach aber Mächtig

Was ist Chart.js?

Chart.js ist eine weitere beliebte Chart-Bibliothek, die für ihre Einfachheit und responsiven Charts bekannt ist.

Erstellen eines Tortendiagramms

Lassen Sie uns ein Tortendiagramm erstellen, das die Verteilung der täglichen Aktivitäten einer Person zeigt:

<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: ['Schlafen', 'Arbeit', 'Freizeit', 'Essen', 'Andere'],
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: 'Tägliche Aktivitäten'
}
}
});
</script>

Dieser Code erstellt ein farbenfrohes Tortendiagramm, das zeigt, wie eine Person ihre 24 Stunden am Tag verbringt. Chart.js übernimmt die Berechnungen und Renderungen für uns.

Google Charts: Supported by Google's Powerful Infrastructure

Was sind Google Charts?

Google Charts ist eine leistungsstarke Chart-Bibliothek, die die Infrastruktur von Google nutzt, um schnelle, interaktive Charts zu erstellen.

Erstellen eines Liniendiagramms

Lassen Sie uns ein Liniendiagramm erstellen, das die Umsätze eines Unternehmens im Laufe der Zeit zeigt:

<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([
['Jahr', 'Umsätze'],
['2018',  1000],
['2019',  1170],
['2020',  660],
['2021',  1030]
]);

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

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

Dieser Code erstellt ein glattes Liniendiagramm, das die Umsatzzahlen über vier Jahre zeigt. Google Charts bietet eine Vielzahl von Diagrammtypen und Anpassungsoptionen.

Schlussfolgerung

Glückwunsch! Sie haben gerade die ersten Schritte in die aufregende Welt der JavaScript-Grafik gemacht. Wir haben viel Boden cobered, von der tiefen Macht von WebGL bis hin zur Einfachheit von Chart.js. Erinnern Sie sich daran, dass der Schlüssel zum Beherrschen dieser Bibliotheken die Übung ist. Also, fürchten Sie sich nicht, zu experimentieren und Ihre eigenen Visualisierungen zu erstellen!

Hier ist eine Tabelle, die die Bibliotheken zusammenfasst, die wir besprochen haben:

Bibliothek	Hauptanwendungsfall	Schwierigkeitsgrad
WebGL	3D-Grafik, Spielentwicklung	Fortgeschritten
P5.js	Kreatives Coding, Kunstprojekte	Anfänger
Plotly.js	Wissenschaftliche und statistische Diagramme	Fortgeschritten
Chart.js	Einfache, responsive Diagramme	Anfänger
Google Charts	Vielzahl von Diagrammen, Google-Integration	Fortgeschritten

Weiter codieren, weiter erstellen und vor allem: Spaß haben! Die Welt der Grafik ist Ihr Perl, und JavaScript ist Ihr Juwel. Frohes Coden!

Credits: Image by storyset