Programmiersprachen 2

Im Fach Programmiersprachen 2 setzten wir uns in p5.js mit der Farblehre auseinander und gestalteten interaktive Farbtafeln, Farbmatrizen und mehr. Dabei befassten wir uns unter anderem mit Josef Albers und seinem Buch "Interaction of Color".

Josef Albers

1.1 Make opaque colours appear transparent.
‍

            Bewege deine Maus von links nach rechts.

1.2 Make two colours look
      like one.

            Bewege deine Maus von links nach rechts.

1.3 Make one colour look like two.

            Klicke auf das Bild.

1.3.alternative Version

1.4 Make one colour look like the opposite.

            Bewege deine Maus von links nach rechts.
            Halte sie fest, um die kleineren Farbbereiche zu vergleichen.  

Farbexperimente

Komplementärfarben

Bewege deine Maus von links nach rechts.
inspiriert von Generative Gestaltung: Creative Coding im Web P2.0.

CMYK vs RGB

Bewege deine Maus von links nach rechts.
Das Dreieck bewegt sich mit. Klicke mit deiner Maus, um die Farbe des interaktiven Dreieckes zu ändern. Versuche so, neue Farben zu mischen.

Bewege deine Maus von links nach rechts.
Der Farbton des HSB Farbmodells wird von 0 ausgehend (rot) je nach Größe des Quadrates und der Mausposition durch 3 geteilt. Bei gehaltener Maus ändert sich der Farbmodus.

additive und subtraktive Farbmischung

Durch Mausklick entstehen Farbkreise. Je nach Mausposition ändert sich die Größe des Kreisradius, sodass man sehen kann, was passiert, wenn man mehrere Kreise übereinander malt.

Regenbogenpolygone
‍
‍

Bewege deine Maus von links nach rechts, um durch das HSB Farbpektrum zu kommen. Bewege sie von unten nach oben, um die Sättigung zu beeinflussen.

Munker- White Illusion

Obwohl die Herzen genau die gleiche Farbe haben (RGB 255, 0, 0), scheint das linke Herz orange, und das rechte Herz lila zu sein, da sie je von gelb und blau überlagert werden. Bewege deine Maus von links nach rechts, um zu schauen, ab wann die Illusion nicht mehr in Kraft tritt.

Farbreihen und -matrizen

Farbton, Sättigung und Helligkeit im Raster

Klicke deine Maus, um die Ausgangsfarbe, die in der ersten Spalte angezeigt wird, zu verändern. In der ersten Reihe wird der Farbton im HSB Modus um 10 verschoben, in der zweiten Reihe die Sättigung und in der dritten die Helligkeit.

HSB Farbmodell "Komplementärfarben"

Bewege deine Maus von links nach rechts. Die entgegengesetzten Farben sind von der Breite des Bilds und der Mausposition abhängig. Die Sättigung ist von der Höhe der Maus abhängig.

Farbmatrix Helligkeit und Sättigung: HSB- RGB

Bewege deine Maus von links nach rechts und von oben nach unten, um Helligkeit und Sättigung zu verändern.
Vergleiche das HSB und das RBG Modell.

nach oben:
Ksenia Dasha Gorokhova
KG2
Prof. Andreas Pollok
Sketches p5.js