`colors` (Farben)

Farbnamen

Import

Das statische Attribut colors der Klasse Controller kann über einen statischen Import eingebunden werden:

import static pi.Controller.colors;

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

Farbschema

Import

Das statische Attribut colorScheme der Klasse Controller kann über einen statischen Import eingebunden werden:

import static pi.Controller.colorScheme;

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//home/runner/work/engine-pi/engine-pi/subprojects/demos/src/main/java/demos/docs/resources/color/ColorWheelIttenDemo.java

Gnome
Java
Android
iOS
Tailwind CSS

Farben über die Java-Klasse `Color`

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: Dabei werden verschiedene Anteile der Grundfarben gemischt, 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 somit 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:

new Color(int red, int green, int blue)

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.¹

Alpha-Werte

Ein weiterer Vorteil der Klasse Color ist die Möglichkeit, Farben zu einem gewissen Anteil durchsichtig zu machen. Dieser Grad der Durchsichtigkeit wird als Alpha-Helligkeit oder Opacity bezeichnet. Auch diese lässt sich mit einem Wert zwischen 0 und 255 beschreiben. Bei einem Wert von 255 ist die Farbe vollständig sichtbar, bei einem Wert von 0 vollständig durchsichtig, also unsichtbar.¹

Nachfolgend der Konstruktor der Klasse Color, mit dem der Alphawert angegeben werden kann:

new Color(int red, int green, int blue, int alpha)

Methoden und Klassen mit Farbbezug

Klassen mit Farbbezug

Farben in der Klasse Actor

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

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//home/runner/work/engine-pi/engine-pi/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.

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

colors (Farben)