Worknote: MacDown und p5.js

Nach meinen ersten Erfolgen mit dem Einbetten von p5.js-iframes in MacDown, die mit dem p5.js Web Editor erstellt waren, wurde ich neugierig und fragte mich, ob man nicht auch p5.js-Sketche direkt in MacDown, dem freien Markdown-Editor mit Live Preview einbetten kann. Und ja, man kann!

Wie der Screenshot zeigt, habe ich zuerst die Datei p5.min.js mithilfe des <script>-Tags so eingebunden, daß MacDown sie auch finden kann. Das eigentliche p5.js-Skript habe ich – ebenfalls mithilfe eines <script>-Tags – direkt in die Seite eingebunden (mein Versuch, auch dieses Skript von einer externen JavaScript-Datei zu laden, schlug leider fehl).

Dann das <div> mit der entsprechenden id und alles lief schick. Hier der Quelltext für die, die das nachbauen wollen:

function setup() {
	var myCanvas = createCanvas(560, 315);
	myCanvas.parent("animation1130")
	fill("#ff0000");
	noStroke();
}

function draw() {
	background(204);
	ellipse(mouseX + 20, mouseY - 20, 30, 30);
}

Das sieht in MacDown sogar richtig schick aus und damit steht einer gewissen Art von literate programming mit Markdown und JavaScript eigentlich nichts mehr im Wege.

Der Export nach HTML verläuft wie erwartet und wenn man dafür sorgt, daß auch die HTML-Datei p5.min.js findet, ist auch der Sketch sicht- und ausführbar. Der Export nach PDF ist natürlich statisch, aber immerhin wird ein Bild für den Sketch angezeigt. Ich glaube, das könnte meine Entwicklungsumgebung für p5.js werden. Still digging!

(Kommentieren)