‚ąě Tannenbaum!

Source.

Am ersten Advent haben meine Geschwister (13 & 15) und ich Tannenb√§ume gebaut ‚Äď aber nicht aus Holz! Wir haben betrieben, was ‚ÄěGenerative Art‚Äú hei√üt. Das Ergebnis l√§sst sich unter ūüéĄ.rixx.de bewundern (oder ootannenbaum.rixx.de f√ľr die weniger Emoji-Affinen). Per Knopfdruck kann man da zuf√§llige Weihnachtsb√§ume generieren.

Das an sich ist schon ziemlich cool, finde ich (m√∂glicherweise bin ich da allerdings voreingenommen). Der Weg dahin ist aber noch cooler: Zugegebenerma√üen habe ich die Tipparbeit getan, aber die beiden Gro√üen haben von Ideen bis Rechenarbeit alles mitgemacht. Damit das f√ľr andere leicht nachzumachen ist, erz√§hle ich hier ein bisschen, wie das lief, und wie ihr so etwas angehen k√∂nnt.

Ressourcen

Vorab: Ihr k√∂nnt euch genau angucken, wie wir das mit den Weihnachtsb√§umen gemacht haben ‚Äď die Datei liegt hier, und ist ausgiebig und auf deutsch mit Kommentaren versehen, die erkl√§ren, was passiert. (Die Kommentare sind fast schon ihr eigener Blogpost). Wenn ihr noch √ľberhaupt nie mit so etwas zu tun hattet, kann ich euch vorher sehr diesen Vortrag von der gro√üartigen bleeptrack empfehlen, die einen super Einstieg liefert. Wenn ihr hier nach ganz unten scrollt, findet ihr auch noch weitere n√ľtzliche Links.

Vorkenntnisse

Wenn ihr euch jetzt fragt, was ihr f√ľr Vorkenntnisse haben m√ľsst, um so etwas zu schreiben: gar nicht so viele! Es reicht Ausdauer oder Vorwissen (ein bisschen einer beliebigen Programmiersprache und etwas Englisch) oder eine andere Person mit Vorwissen, die euch hilft. Wenn ihr niemanden kennt, der helfen kann: Guckt mal, ob ihr einen lokalen Hackerspace besuchen k√∂nnt, oder an einem Website- oder Programmierworkshop in eurer N√§he teilnehmen k√∂nnt.

Zum Vergleich: mein Bruder ist in der 10. Klasse, und hat schon etwas mit Java programmiert und in der Schule mal ein bisschen HTML gelernt, und kam total gut mit. Meine Schwester ist in der 8. Klasse, hat noch nicht programmiert, keine Websiten gebaut, und kam auch gut mit, besonders dabei, das Aussehen zu entwerfen und an den einzelnen Parametern zu drehen, bis ein schönes Ergebnis herauskam.

Ablauf

Um so einen Generator zu schreiben, √ľberlegt man sich am besten zuerst die einfachste m√∂gliche Form, die Teil der Zielgestalt ist. Die versucht man dann, im super-praktischen Editor unter sketch.paperjs.org erscheinen zu lassen. F√ľr ein Rechteck k√∂nnt ihr zum Beispiel diesen Code hier kopieren, und dann oben auf den ‚ÄěRun‚Äú-Knopf dr√ľcken:

rechteck = new Path.Rectangle(new Point(100, 100), new Size(200, 300));
rechteck.fillColor = "red";
rechteck.strokeColor = "black";
rechteck.strokeWidth = 5;
rechteck.rotate(45)

Das erstellt ein Rechteck an der Koordinate (100, 100). Dabei ist (0, 0) oben links! Die erste Zahl ist der x-Wert, der sagt, wie weit etwas nach rechts geschoben wird, und die zweite Zahl der y-Wert, die sagt, wie weit die Position nach unten verschoben wird.

Das Rechteck machen wir 200x300 Pixel gro√ü, f√ľllen es rot, und geben ihm einen 5 Pixel dicken schwarzen Rand. Dann drehen wir es noch um 45¬į. Mit diesem Anfang l√§sst sich erst mal super rumspielen! Was sich sonst damit so machen l√§sst, findet sich in der Dokumentation. Nicht wundern, wenn die erst mal verwirrend aussieht, das ist bei technischer Doku v√∂llig normal. Es hilft, sich erst mal die Teile der Doku anzugucken, die man schon versteht. Sucht z.B. nach "rotate", um zu lesen, wie beschrieben ist, dass das, naja, eben ein gezeichnetes Objekt dreht.

F√ľr die Weihnachtsb√§ume haben wir zuerst ein paar Dreiecke √ľbereinander stapeln wollen. Daf√ľr haben wir uns zusammen √ľberlegt, was f√ľr Koordinaten das Dreieck haben soll: dass n√§mlich der obere Punkt auf der x-Achse genau mittig zwischen den anderen beiden liegen soll. Dann haben wir so lange mit dem Editor und ein paar ausgedachten Zahlen gespielt, bis auch das herausgekommen ist, was wir wollten.

Tipps

Der wichtigste Ratschlag √ľberhaupt ist: in ganz kleinen Schritten vorgehen! Guckt nach jeder √Ąnderung, was sich getan hat, und ob es wirklich das ist, was ihr euch vorgestellt habt. Das sch√∂ne daran, mit Zeichnungen zu arbeiten, ist, dass Fehler oft schnell sehr witzig aussehen. Wir hatten nicht nur einmal einen Baum, der zu winzig, zu riesig, oder sogar kopf√ľber war!

Kleine Schritte können sein: Ein Element zeichnen. Ein weiteres zeichnen. Es farbig anmalen. Ein drittes dazu zeichnen, mit einer anderen Farbe. Die Breite eines Elements zufällig zu machen. Die Anzahl eines Elements zufällig zu machen.

Der zweitwichtigste Ratschlag ist: lernt von anderen. Die allerallerallermeisten Probleme haben schon andere gehabt und gel√∂st. Es tut gut, es erst mal ein bisschen selber zu versuchen (so lernt man oft was), aber wenns dann nicht geht, kann man super √ľber Google oder bei √§hnlichen Projekten nachsehen, wie da √§hnliche Probleme gel√∂st wurden. Wir haben z.B. einfach direkt von Bleeptrack abgeschrieben, wie am Ende aus den Weihnachtsb√§umen Bilddateien werden. Und umgekehrt k√∂nnt ihr jetzt bei uns im ausgiebig kommentierten Code nachlesen, wie was geht.

Zufall!

Wenn ihr dann nach einer Weile eine fertige Figur gezeichnet habt, k√∂nnt ihr euch an den witzigsten Teil machen: Zufall einbauen! Das ist nicht ganz einfach, aber daf√ľr macht es eine Menge Spa√ü, und belohnt euch mit unerwarteten Ergebnissen!

JavaScript kennt eine Funktion namens Math.random(), die euch eine Zahl mit vielen Kommastellen zwischen 0 und 1 zur√ľckgibt. Wir haben uns dazu als allererstes eine kleine Helferfunktion geschrieben, die eine Zufallszahl zwischen zwei Werten produziert:

function zufallszahl(min, max) {
  // Diese Funktion gibt eine zuf√§llige Zahl zwischen min und max zur√ľck.
  // Minimum ist inklusive, maximum ist exklusive.
  return Math.floor(Math.random() * (max - min)) + min;
}

Darauf l√§sst es sich dann viel einfacher aufbauen. Zum Beispiel k√∂nnt ihr sagen, dass eure Figur zwischen 100 und 300 Pixel breit sein soll, oder sich um 45 bis 90 Grad drehen soll. Das Ganze l√§sst sich auch wie ein W√ľrfel oder ein M√ľnzwurf benutzen, zB um zu entscheiden, ob etwas zus√§tzliches gezeichnet werden soll. Wir zeichnen zb nur etwa zwei von drei Weihnachtsb√§umen einen Stern auf die Spitze.

Farbe

Die Breite und H√∂he einer Figur sind der beste Einstieg an der Zufallsgenerierung. Sie zwingen einen allerdings, sich ein paar Sachen gr√ľndlicher zu √ľberlegen: Wenn ein Teil des Bilds zuf√§llig breit ist, muss sich die Position der angrenzenden Teile daran anschlie√üen, dh es muss etwas mehr Mathe in den Code. Zus√§tzlich k√∂nnt ihr aber auch die Farbe variieren.

Die Farben in paper.js und auch in vielen anderen Programmen setzen sich aus drei Teilen zusammen: rot, gr√ľn und blau (das RGB-System). Oft werden diese Werte zwischen 0 und 255 angegeben. paper.js nimmt stattdessen Werte zwischen 0 und 1 ‚Äď ich finde es aber schwieriger, mir da vorzustellen, was ein guter Farbwert ist, deshalb haben wir weiter die gro√üen Zahlen genommen, und sie einfach am Ende durch 256 geteilt. Das sieht bei uns zum Beispiel so aus, um ein sch√∂nes Gr√ľn zu finden:

var rot = zufallszahl(0, 100) / 256
var gruen = zufallszahl(115, 255) / 256
var blau = zufallszahl(40, 130) / 256
dreieck.fillColor = new Color(rot, gruen, blau)

Wo bekommt man die Grenzwerte her, dass wir z.B. einen rot-Wert zwischen 0 und 100 wollen? Wenn ihr in der Suchmaschine eurer Wahl nach Colorpicker sucht, solltet ihr einen Auswahldialog f√ľr Farben finden. Da k√∂nnt ihr mal suchen, welche Farben f√ľr euch in Frage kommen, und w√§hrend ihr den Farbpunkt durch die Gegend zieht, die RGB-Werte im Blick behalten. Das gibt euch eine gute erste Sch√§tzung (und macht sich √ľbrigens viel leichter zu zweit, wenn eine zieht und eine guckt). Danach k√∂nnt ihr die Werte noch nachbessern, wenn euch auff√§llt, dass z.B. zu bl√§uliche Farben dabei generiert werden.

Und das ist, wie ihr anfangen k√∂nnt, selber Zeichnungen zu generieren! Ich hoffe, das hilft f√ľr den Anfang, und ihr habt viel Spa√ü damit.

Hier findet ihr Quellen und weiterf√ľhrende Informationen:

Allerlei Links: 2019-01

So, jetzt auch auf Deutsch: Lesenswerte Links, wie sie aus meinem Internet fallen. Auf Englisch gibt es noch mal zehn St√ľck, aber andere nat√ľrlich!

  1. Keine Ahnung rollt Eschede noch mal auf.
  2. chipTAN-Flickercodes
  3. atmosfair ist eine von vielen M√∂glichkeiten, Fl√ľge zu kompensieren.
  4. Programmieren lernen mit der Maus, Quelltext hier
  5. #DerAndereOsten kann mich mal!
  6. Beate Klarsfeld, und Ohrfeigen f√ľr Nazis
  7. Faktenfinder der Tagesschau ist vermutlich bekannt, aber vielleicht ja doch nicht allen.
  8. Da l√§uft etwas ganz schief wurde mir von mehreren, sonst gar nicht r√ľckw√§rts blickenden Menschen best√§tigt, die seit vielen Jahren an Unis arbeiten. Das l√§sst schaudern.
  9. The trouble with talking: warum reden wir √ľberhaupt noch miteinander, wenn wir einander doch auch schreiben k√∂nnen?
  10. Holocaust: Der SPIEGEL 1979 √ľber die damals ausgestrahlte Fernsehserie. Naturgem√§√ü keine leichte Kost, aber ein Fenster in die Vergangenheit.

Ich ver√∂ffentliche diese Linksammlungen h√§ufiger ‚Äď wenn Du Links hast, die Du hier sehen willst, schreib mir eine Mail, oder ping mich im Fediverse oder auf Twitter.

Neu und nie dagewesen: c3queue.de

Oder: Viel Spaß dabei, Bändchen an sechzehntausend Leute auszugeben

Der Chaos Communication Congress ist riesig geworden ‚Äď dieses Jahr werden mehr als **sechzehntausend Leute** beim 35C3 erwartet, und die Teilnahmezahlen sind bislang konstant gewachsen. Es ist eine √ľberw√§ltigende Veranstaltung, die noch dazu komplett von Freiwilligen organisiert wird, die sich um alles k√ľmmern: Getr√§nke, Raumaufteilung, Dekoration, medizinische Versorgung, Logistik, Finanzen, Internet und Telefon, Vortragsauswahl, Live√ľbertragung und Aufzeichnungen, und so viele andere Dinge, dass ich zehn Artikel lang nur dar√ľber schreiben k√∂nnte.

Die Kassenboxen in Hamburg

Weiterlesen…