Einstieg in das Thema
Was brauchst du als Basiswissen?
Du musst das RGB-System verstanden haben.
Worum geht es?
Du kannst die Farbe eines Oobjektes angeben. Wie das in den
konkreten Programmiersprachen aussieht, kommt noch.
Man kann das Verständnis aber noch vertiefen, indem man
die Farben nach bestimmten Prinzipien verändert.
Was ist das Ziel?
Am Ende kannst du ein Bild verändern, das heißt, du kannst
das Bild
- aufhellen,
- abdunkeln,
- in ein Scharz-Weiß-Bild verwandeln
- Farb- und Schzwarzweiß-Negative erstellen und
- Farben positionsabhängig verändern.
Erarbeitung
Aufgaben zur Erarbeitung
Aufgabe 1
Probiere das gezeigte Aufhellen und Abdunkeln mit eigenen Werten. Was passiert, wenn man das Aufhellen und Abdunkeln immer wieder macht?
Aufgabe 2
Gib für Rot r, für alle anderen Werte 0 ein. Was passiert?
Aufgabe 3
Gib für alle Werte r ein. Was passiert?
Aufgabe 4
Begründe, warum das so ist.
Aufgabe 5
Drücke Reset, gib nun überall b ein. Was ist gleich geblieben, was ist anders als bei (r,r,r)?
Aufgabe 6
Wie könnte man ein relativ gutes Schwarzweiß-Bild berechnen, das bei jeder Farbverteilung gut funktioniert? Gib hier die Berechnung an.
Vertiefung
Aufgabe 7
Gib bitte g bei Rot, b bei Grün und r bei Blau ein. Was passiert?
Aufgabe 8
Was passiert bei (255-r, 255-g, 255-b)? Wie könnte man das beschreiben?
Aufgabe 9
Wie kann man mit dem Wissen aus dem ersten Block ein Schwarzweiß-Negativ machen?
Noch mehr Aufgaben
Aufgabe 10
Mit den Variablen r, g und b bekommt man die RGB-Werte. Es gibt mit x und y noch zwei weitere Variablen. Drücke Reset und gib (r*x/600,g,b) ein. Was passiert?
Aufgabe 11
Was steht also in x?
Aufgabe 12
Versuche dich an einem gleichartigen Verlauf mit rot nach unten. Das Bild ist 400 Pixel hoch. Was hast du geschrieben?
Aufgabe 13
Schon in Klasse 10? Was passiert bei (r/2+r/2*Math.sin(0.1*x), g, b)?
Komplexe Aufgabe ohne KI
Bei dieser Aufgabe sollst du zeigen, dass du die Art
der Berechnung von Farbwerten verstanden hast.
Gib ein:
für r Math.round(r/100)*100
für g Math.round(g/100)*100
für b Math.round(b/100)*100
Aufgabe 15
Was macht Math.round?
Aufgabe 16
Beschreibe mit eigene Worten auf Basis der Formeln, was mit den Farbwerten passiert.
Zusammenfassung
Was muss man wissen/können?
Du musst wissen, dass man mit mathematischen Operationen auf die
Pixelwerte das Bild verändern kann. Und du kennst einige
Klassiker der Bildveränderung und kannst auf deren Basis
auch weitere umsetzen.
Was können anschließende Themen sein?
Genug Theorie. Du kannst nun die konkrete Umsetzung für
eine Umgebung deiner Wahl (CSS+JavaScript, Java) wählen.
