Programmierte Bilder - Creative Coding/ Generative Gestaltung

Zur Gestaltung einer Fläche stehen dir Kreisformen unterschiedlicher Grösse zur Verfügung.

Die Anordnung der Kreise soll den von Dir definierten Regeln folgen- gleichzeitig soll aber jede Ausgabe einzigartig sein.
Passe die eingesetzten Gestaltungsmittel Deinen Präferenzen an: Hintergrundfarbe, Farbe der Kreisflächen, Grössenverhältnisse, Minimal- und Maximalabstand...
Anstelle der Kreise kannst Du auch andere grafische Elemente verwenden

Beispiele online editieren

Link anklicken
Code beearbeiten
Run-Button klicken

Einstieg- zufaellige Anordnung von schwarzen Kreisflächen auf weissem Untergrund
Kreisflaeche
Reihe schwarzer Kreisflächen
Zufaellige Anordnung von schwarzen Kreisflächen verschiedener Grössen auf weissem Untergrund
Zufaellige Anordnung von weissen Kreisflächen verschiedener Grössen auf schwarzem Untergrund

Beispiele herunterladen

Die Beispiele können kopiert, gespeichert werden und in einem einfachen Texteditor bearbeitet und anschliessend im Browser geöffnet (ausgeführt) werden.

Code kopieren und in ein ein Textdokument (siehe Editoren)
Code verändern.
Speichern
Datei in einem Browser (Firefox, Chrome, Safari...) öffnen

Die Beispiele stammen aus dem Beitrag für die LBG-Publikation, wo sie ausführlich erklärt und kommentiert sind, siehe Heft 11 "programmiert"


<!DOCTYPE html>
<html>
<body>
    <canvas id="bildflaeche" width="800" height="600" style="border:1px solid #d3d3d3;">
        Dein Browser unterstützt den HTML5 Canvas-Tag nicht (erscheint als Alternative auf dem Bildschirm</canvas>
    <script  language="javascript" type="text/javascript">
        var bildflaeche = document.getElementById("bildflaeche");
        var form = bildflaeche.getContext("2d");
        var formfarbe = "black";
        var anzahl = 20;
        var radius = 40;

        for (i = 1; i <= anzahl; i = i + 1) {
            var position_x = Math.floor((Math.random() * 800) + 1);
            var position_y = Math.floor((Math.random() * 600) + 1);
            //hier wird das Bildelement gezeichnet und mit der Farbe gefüllt
            form.beginPath();
            form.arc(position_x, position_y, radius, 0, 2 * Math.PI);
            form.fillStyle = formfarbe;
            form.fill();
        }
        
      </script>
</body>
</html>

Punkte

Beispiele online editieren

Beispiele herunterladen