Wie du bereits gelernt hast, weisst du, dass man mit Hilfe von p5.js mit folgendem Befehl den Computer eine Ellipse an der x-Koordinate 80, der y-Koordinate 90, mit der Breite 80 und der Höhe 120 zeichnen kann:
ellipse(80, 90, 80, 120);Auf der Download-Seite: https://p5js.org/download/ findest du die p5.js-Bibliothek. In dieser Datei findest du folgende Funktionen, mit deren Hilfe der Kreis gezeichnet wird:
p5.prototype.ellipse = function() {
var args = new Array(arguments.length);
for (var i = 0; i < args.length; ++i) {
args[i] = arguments[i];
}
// Duplicate 3rd argument if only 3 given.
if (args.length === 3) {
args.push(args[2]);
}
// p5 supports negative width and heights for rects
if (args[2] < 0){args[2] = Math.abs(args[2]);}
if (args[3] < 0){args[3] = Math.abs(args[3]);}
if (!this._renderer._doStroke && !this._renderer._doFill) {
return this;
}
var vals = canvas.modeAdjust(
args[0],
args[1],
args[2],
args[3],
this._renderer._ellipseMode);
args[0] = vals.x;
args[1] = vals.y;
args[2] = vals.w;
args[3] = vals.h;
this._renderer.ellipse(args);
return this;
};
p5.RendererGL.prototype.ellipse = function
(args){
var x = args[0];
var y = args[1];
var width = args[2];
var height = args[3];
//detailX and Y are optional 6th & 7th
//arguments
var detailX = args[4] || 24;
var detailY = args[5] || 16;
var gId = 'ellipse|'+args[0]+'|'+args[1]+'|'+args[2]+'|'+
args[3];
if(!this.geometryInHash(gId)){
var _ellipse = function(){
var u,v,p;
var centerX = x+width*0.5;
var centerY = y+height*0.5;
for (var i = 0; i <= this.detailY; i++){
v = i / this.detailY;
for (var j = 0; j <= this.detailX; j++){
u = j / this.detailX;
var theta = 2 * Math.PI * u;
if(v === 0){
p = new p5.Vector(centerX, centerY, 0);
}
else{
var _x = centerX + width*0.5 * Math.cos(theta);
var _y = centerY + height*0.5 * Math.sin(theta);
p = new p5.Vector(_x, _y, 0);
}
this.vertices.push(p);
this.uvs.push([u,v]);
}
}
};
var ellipseGeom = new p5.Geometry(detailX,detailY,_ellipse);
ellipseGeom
.computeFaces()
.computeNormals();
this.createBuffers(gId, ellipseGeom);
}
this.drawBuffers(gId);
return this;
};Du musst das NICHT verstehen, damit du mit Hilfe von p5.js programmieren kannst. Dir soll nur klar sein, dass wir Funktionen verwenden, die andere Programmierer in mühevoller Arbeit für uns geschrieben haben.
p5.js nennt man daher eine JavaScript-Bibliothek, denn sie enthält viele fertig programmierte Funktionen, die wir in unseren Programmen verwenden können. Einige Programmierer waren der Meinung, dass nicht jeder Programmierer das Rad neu erfinden muss, sondern sich auf seine kreativen Ideen konzentrieren können sollte. Deswegen haben sie ihre Funktionen der Welt zur Nutzung überlassen. Danke dafür! Im Fall von p5.js war das Lauren McCarthy .
In den Modulen in diesem Kapitel lernst du, wie du viele der Funktionen von p5.js in deinen Programmen anwenden kannst.
Neben der Funktionsbibliothek p5.js gibt es weitere Bibliotheken mit noch mehr Funktionen, die du in deine Programme einbauen kannst.
Die beiden offiziellen Erweiterungen für p5.js sind:
Daneben gibt es noch einige weitere Funktionsbibliotheken, die du unter https://p5js.org/libraries/ findest.
Als Programmierer*in stehst du oft vor der Wahl: denke ich mir eine Lösung selbst aus oder suche ich im Internet nach Lösungen, die andere sich bereits ausgedacht haben. Der Vorteil der 2. Möglichkeit ist, dass du damit viel Zeit sparen kannst. Auf der anderen Seite gibt es heute viele "Skript-Kiddies", die zwar wissen, wie man Funktionsbibliotheken zusammensetzen kann, aber selbst kaum in der Lage sind, einen eigenen Algorithmus zu einem Problem zu entwickeln. Ein ausgeglichener Mittelweg dürfte eine sinnvolle Mischung sein: fremde Bibliotheken können helfen, eigene Algorithmen umzusetzen.
Einige Ideen für Programme in diesem Kapitel stammen von Allison Parrish, von der Seite https://creative-coding.decontextualize.com/