colors (Farben)

Farbnamen

Folgende Zeichenketten repräsentieren die entsprechende Farbe in der Engine:¹

Die zwölf Farben des Farbkreises von Itten zusammen mit ihren Aliassen bzw. Synonymen:

• yellow: Gelb, Hellgelb
• yellow orange: orange yellow, gold, Gelb-Orange, Orange-Gelb, Golden, Dunkelgelb
• orange: Orange
• red orange: orange red, brick red, brick, Rot-Orange, Orange-Rot, Ziegelrot, Hellrot
• red: Rot
• red purple: purple red, magenta, pink, Rot-Violett, Violett-Rot, Rosa
• purple: Violet, Violett, Lila
• blue purple: purple blue, indigo, Violett Blau, Blau Violett
• blue: Blau
• blue green: green blue, cyan, Blau-Grün, Grün-Blau, Türkis
• green: Grün
• yellow green: green yellow, lime, lime green, Gelb-Grün, Grün-Gelb, Limetten Grün, Limette, Hellgrün

Diese Farben sind ebenfalls im Speicher für Farben enthalten (gehören aber nicht zum Farbkreis von Itten):

• brown: Braun
• white: Weiß
• gray: grey, Grau
• black: Schwarz

Farben über RGB

Zur Darstellung von Farben als Zeichenketten gibt es eine Alternative, mit der sich jede Farbe exakt maßschneidern lässt. Ein Farbton lässt sich über die Anteile der drei Farben Rot, Grün und Blau beschreiben. Diese Anteile können zwischen 0 und 100 % liegen.

Man kann das als digitales Farbenmischen betrachten: Man mischt verschiedene Anteile der Grundfarben zusammen, um den gewünschten Farbton zu erhalten. Diese Anteile werden jedoch nicht in Prozent, sondern als Zahlen zwischen 0 (≙ 0 % Anteil) und 255 (≙ 100 % Anteil) angegeben. Eine Farbe lässt sich also durch drei Zahlen beschreiben, die die Anteile von Rot, Grün und Blau angeben. Dies wird mit R/G/B abgekürzt.¹

Color ist eine vordefinierte Java-Klasse. Sie beschreibt eine Farbe und lässt sich sehr leicht instanzieren. Nachfolgend der Konstruktor der Klasse Color:

Color(int r, int g, int b)

Die drei Zahlenwerte müssen Zahlen zwischen 0 und 255 liegen und entsprechen den Anteilen der entsprechenden Grundfarbe, die zum "Mischen" verwendet werden soll.

So erhält man zum Beispiel:

• Schwarz

  ---

  new Color(0, 0, 0);
  

• Weiß

  ---

  new Color(255, 255, 255);
  

• Orange

  ---

  new Color(255, 200, 0);
  

• Cyan/Türkis

  ---

  new Color(0, 255, 255);
  

Natürlich sind auch alle anderen Zahlenkombinationen mit Werten zwischen 0 und 255 möglich.¹

Methoden zum Färben

Alle färbbaren Klassen (z.B. Text und alle Geometrie-Klassen) verfügen zum Festlegen der Farbe über nachfolgende zwei Methoden:¹

• color(String color)
• color(Color color)

Alpha-Werte

Ein weiterer Vorteil der Klasse Farbe ist die Möglichkeit, Farben zu einem gewissen Anteil durchsichtig machen zu können. Die "Nichtdurchsichtigkeit" (oder auch Opacity) einer Farbe wird als Alpha-Helligkeit bezeichnet. Auch diese lässt sich mit einem Wert zwischen 0 und 255 beschreiben. Bei einem Wert von 255 ist die Farbe gänzlich sichtbar und bei einem Wert von 0 absolut durchsichtig, d. h. unsichtbar. Alle Werte dazwischen sorgen für eine unterschiedlich stark durchsichtige, geister- oder glasartige Farbe.¹

Hierfür gibt es dann den vollen Konstruktor der Klasse Farbe:

public Farbe(int r, int g, int b, int alpha)

Ein sehr einfaches Beispiel, es wird ein halbdurchsichtiges Rechteck erstellt:

/ In der spielsteuernden Klasse (wegen der “wurzel“) /

// Erstelle in der linken oberen Bildecke ein Quadrat mit der Seitenlänge 200 Rechteck recht = new Rechteck(0, 0 200, 200);

// Erstelle der Fuellfarbe Farbe fuellFarbe = new Farbe(178, 255, 255, 200);

// Dem Quadrat die Füllfarbe zuweisen recht.farbeSetzen(fuellFarbe);

// Das Rechteck an der Wurzel anmelden, um es sichtbar zu machen wurzel.add(recht);

Die Klassen mit Farbbezug:

• ColorContainer
• ColorScheme
• PredefinedColorScheme
• NamedColor
• Resources.colors

Farbschema

public class ColorWheelIttenDemo extends Scene implements KeyStrokeListener
{
    private final int NUMBER_SEGMENTS = 12;

    private final double SEGMENT_ANGLE = 360.0 / NUMBER_SEGMENTS;

    private final double INNER_RADIUS = 5.0;

    /**
     * Die farbigen Segmente in der Form eines Trapezes mit einer der zwölf
     * Farben des Farbkreises von Itten. Zwölf Segmente ergeben einen Kreis.
     *
     * @see Polygon
     */
    private final Actor[] WHEEL_AREAS;

    /**
     * @see Polygon
     */
    private final Actor[] PRIMARY_AREAS;

    /**
     * @see Polygon
     */
    private final Actor[] SECONDARY_AREAS;

    /**
     * @see Rectangle
     */
    private final Actor[] EXTRA_AREAS;

    /**
     * Der Name des Farbschemas
     */
    private final Text NAME;

    public ColorWheelIttenDemo()
    {
        info().title("Farbschemata-Demo")
            .description(
                "Demonstiert die Farbschemata, die die Engine Pi mitliefert anhand des Farbkreises von Itten.")
            .help(
                "Ein beliebiger Tastendruck schaltet zum nächsten Farbschema weiter.");
        WHEEL_AREAS = drawWheelColors();
        // Zuerst Primär, denn die müssen übermalt werden.
        PRIMARY_AREAS = drawPrimaryColors();
        SECONDARY_AREAS = drawSecondaryColors();
        EXTRA_AREAS = drawExtraColors();
        NAME = new Text("");
        NAME.anchor(-8, 7);
        NAME.color("white");
        add(NAME);
        setNextColorScheme();
        backgroundColor("#444444");
    }

    /**
     * Berechnet einen Punkt auf der Kreislinie.
     *
     * @param radius Der Radius des Kreises.
     * @param angle Der Winkel, der die Lage des Punktes angibt (0 = rechts, 90
     *     = oben, 180 = links, 270 = unten).
     *
     * @return Ein Punkt, der auf der Kreislinie liegt.
     *
     */
    private Vector getCirclePoint(double radius, double angle)
    {
        return Vector.ofAngle(angle).multiply(radius);
    }

    /**
     * Ein farbiges Segment in der Form eines Trapezes mit einer der zwölf
     * Farben des Farbkreises von Itten. Zwölf Segmente ergeben einen Kreis.
     *
     * @param index Der Farbindex. 0 = gelb
     * @param angle Der Winkel deutet auf die Mitte des Segments.
     */
    private Actor createWheelArea(int index, double angle)
    {
        // Erster Winkel
        double HALF_SEGMENT_ANGLE = SEGMENT_ANGLE / 2.0;
        double start = angle - HALF_SEGMENT_ANGLE;
        // Zweiter Winkel
        double end = angle + HALF_SEGMENT_ANGLE;
        double OUTER_RADIUS = 7.0;
        Polygon polygon = new Polygon(getCirclePoint(OUTER_RADIUS, start),
                getCirclePoint(INNER_RADIUS, start),
                getCirclePoint(INNER_RADIUS, end),
                getCirclePoint(OUTER_RADIUS, end));
        add(polygon);
        return polygon;
    }

    /**
     * Zeichnet alle zwölf Farben des <b>Farbkreises</b>.
     *
     * @see Polygon
     */
    private Actor[] drawWheelColors()
    {
        Actor[] areas = new Actor[NUMBER_SEGMENTS];
        for (int i = 0; i < NUMBER_SEGMENTS; i++)
        {
            double angle = (i * SEGMENT_ANGLE * -1) + 90;
            Vector textPosition = getCirclePoint(7.5, angle);
            add(new Text(i + "").height(0.5)
                .anchor(textPosition.x(), textPosition.y())
                .color("weiß"));
            areas[i] = createWheelArea(i, angle);
        }
        return areas;
    }

    /**
     * Zeichnet die drei <b>Sekundärfarben</b>.
     *
     * @see Polygon
     */
    private Actor[] drawSecondaryColors()
    {
        Actor[] areas = new Actor[3];
        // 90 Grad ist oben
        int START_ANGLE = 90;
        // 0, 4, 8 -> erste Ecke des Dreiecks
        for (int i = 0; i < NUMBER_SEGMENTS; i += 4)
        {
            double radius = INNER_RADIUS - 0.2;
            int angle = START_ANGLE - (i * 30);
            // Zeichnen des Dreiecks
            Polygon area = new Polygon(getCirclePoint(radius, angle),
                    getCirclePoint(radius, angle - 60),
                    getCirclePoint(radius, angle - 120));
            add(area);
            areas[i / 4] = area;
        }
        return areas;
    }

    /**
     * Zeichnet die drei <b>Pimärfarben</b>.
     *
     * @see Polygon
     */
    private Actor[] drawPrimaryColors()
    {
        Actor[] areas = new Actor[3];
        // 90 Grad ist oben
        int START_ANGLE = 90;
        // 0, 4, 8 -> Spitze
        for (int i = 0; i < NUMBER_SEGMENTS; i += 4)
        {
            double radius = INNER_RADIUS - 0.2;
            int angle = START_ANGLE - (i * 30);
            // Zeichnen eines Vierecks
            Polygon area = new Polygon(getCirclePoint(radius, angle + 60),
                    getCirclePoint(radius, angle),
                    getCirclePoint(radius, angle - 60), new Vector(0, 0));
            add(area);
            areas[i / 4] = area;
        }
        return areas;
    }

    /**
     * Zeichnet die vier <b>zusätzlichen</b> Farben: Braun, Weiß, Grau und
     * Schwarz.
     *
     * @see Rectangle
     */
    private Actor[] drawExtraColors()
    {
        Actor[] areas = new Actor[4];
        for (int i = 0; i < 4; i++)
        {
            Rectangle rectange = new Rectangle(1, 1);
            rectange.anchor(-8 + i, -8);
            areas[i] = rectange;
            add(rectange);
        }
        return areas;
    }

    private void setColorScheme(ColorScheme scheme)
    {
        NAME.content(scheme.name());
        int i = 0;
        for (Color color : scheme.wheelColors())
        {
            WHEEL_AREAS[i].color(color);
            i++;
        }
        i = 0;
        for (Color color : scheme.primaryColors())
        {
            PRIMARY_AREAS[i].color(color);
            i++;
        }
        i = 0;
        for (Color color : scheme.secondaryColors())
        {
            SECONDARY_AREAS[i].color(color);
            i++;
        }
        i = 0;
        for (Color color : scheme.extraColors())
        {
            EXTRA_AREAS[i].color(color);
            i++;
        }
    }

    private void setNextColorScheme()
    {
        setColorScheme(colorScheme.next());
    }

    @Override
    public void onKeyDown(KeyEvent event)
    {
        setNextColorScheme();
    }

    public void cycle()
    {
        repeat(1, () -> {
            setNextColorScheme();
        });
    }

    public static void main(String[] args)
    {
        Controller.instantMode(false);
        ColorWheelIttenDemo demo = new ColorWheelIttenDemo();
        Controller.start(demo, 520, 520);
    }
}

Zum Java-Code: demos/subprojects/demos/src/main/java/demos/docs/resources/color/ColorWheelIttenDemo.java

• 

  Gnome

• 

  Java

• 

  Android

• 

  iOS

• 

  Tailwind CSS

Farben in der Klasse Actor

In der ersten Reihe sind mehrere Bilder zu sehen, in der Reihe unterhalb Rechtecke mit der Durchschnittsfarbe der Bilder, in der letzten Reihe die Komplementärfarben der entsprechenden Bilder.

public class ImageAverageColorDemo extends Scene
{
    public ImageAverageColorDemo()
    {
        info().title("Figurfarben-Demo")
            .description(
                "Demonstriert die Methoden Actor#color() und Actor#complementaryColor().")
            .help("In der ersten Reihe sind die originalen Bilder zusehen, "
                    + "in der zweiten Reihe die Durchschnittsfarbe und "
                    + "in der dritten Reihe die Komplementärfarbe der Durchschnittsfarbe.");
        camera().meter(90);
        double x = -4;
        for (String filepath : new String[] { "car/background-color-grass.png",
                "car/wheel-back.png", "car/truck-240px.png",
                "dude/background/snow.png", "dude/box/obj_box001.png",
                "dude/moon.png" })
        {
            createImageWithAverageColor(filepath, x);
            x = x + 1.2;
        }
    }

    private void createImageWithAverageColor(String filepath, double x)
    {
        var image = new Image(filepath).size(1, 1).anchor(x, 0);
        add(image);
        add(new Rectangle(1.0, 1.0).anchor(x, -1.2).color(image.color()));
        add(new Rectangle(1.0, 0.5).anchor(x, -1.9)
            .color(image.complementaryColor()));
    }

    public static void main(String[] args)
    {
        Controller.instantMode(false);
        Controller.start(new ImageAverageColorDemo());
    }
}

Zum Java-Code: demos/subprojects/demos/src/main/java/demos/docs/resources/color/ImageAverageColorDemo.java

ALT + d aktiviert den Debug-Modus: Die Bilder werden von Umrissen in den Komplementärfarben umrahmt.

Alt + a blendet die Figurenfüllungen aus. Es sind nur noch die Umrisse zu sehen.

---

1. Der Abschnitt stammt aus dem Engine-Alpha-Wiki: https://engine-alpha.org/wiki/Tutorials/Farben ↩↩↩↩↩