Hearts

package herberlin;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.shape.QuadCurve;
import javafx.scene.paint.RadialGradient;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.util.Math;
import javafx.scene.shape.Rectangle;
import javafx.stage.Screen;
import javafx.scene.effect.DropShadow;

// Definiere Farbverlauf für das Herz
var fill = RadialGradient {
            centerX: 0.5
            centerY: 0.5
            focusX: 0.6
            focusY: 0.3
            radius: 1
            stops: [
                Stop {
                    color: Color.BISQUE
                    offset: 0.0
                },
                Stop {
                    color: Color.RED
                    offset: 1.0
                },
            ]
        };
// initialisiere Herzen im Array
var hearts: Heart[];

for (i in [0..12]) {
    hearts[i] = new Heart();
}
// Herzen referenzieren Vorgänger
for (i in [12..0 step -1]) {
    hearts[i].heart = hearts[i + 1];
    println("H{i}: {hearts[i]} h-1: {hearts[i+1]}");
}

// Global: Mausposition
var mouseX=0.0;
var mouseY=0.0;

Stage {
    title: "MouseFollow"
    scene: Scene {
        // Scene-Hintergrund
        fill: LinearGradient {
            startX: 0.0
            startY: 0.0
            endX: 0.0
            endY: 1.0
            stops: [
                Stop {
                    color: Color.RED
                    offset: 0.0
                },
                Stop {
                    color: Color.DARKOLIVEGREEN
                    offset: 1.0
                },
            ]
        }
        width: 640
        height: 480
        content: [

            // Hintergrundrechteck erforderlich, um die Mausposition
            // zu bekommen; läßt sich nicht direkt an der Stage festmachen!
            Rectangle {
                width: Screen.primary.visualBounds.width;
                height: Screen.primary.visualBounds.height;
                fill: Color.TRANSPARENT
                onMouseMoved: function (ev) {
                    mouseX = ev.x;
                    mouseY= ev.y;
                    // println(ev);
                }
            }

            // Herzen 
            hearts
        ]
    }
}

// Timeline mit keyframe - Action
Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 100ms
            action: function () {
                for (heart in hearts) {
                    heart.doAction();
                }

            }
        }
    ]
}.play(); // starten

// Herz erweitert CustomNode
class Heart extends CustomNode {

    // Vorgänger
    public var heart: Heart;
    // Größe für pulsieren
    var myFactor = 0.0;

    // wird von der Timeline aufgerufen;
    // definiert Verhalten 
    public function doAction(): Void {
        // gewünschte Bewegung horizontal / vertikal
        var dX = 0.0;
        var dY = 0.0;
        // orientiert sich am Vorgänger
        if (heart != null) {
            dX = (this.translateX - heart.translateX + 10) / 5;
            dY = (this.translateY - heart.translateY) / 5;
        } else {

            // orientiert sich  an der Maus
            dX = (this.translateX - mouseX + 50) / 3;
            dY = (this.translateY - mouseY + 50) / 3;
        }
        // Bewegung berechnen
        this.translateX -= dX;
        this.translateY -= dY;
        // Größenänderung
        myFactor += 0.2;
        this.scaleX = Math.atan(0.1 + (Math.abs(dX) + Math.abs(dY)) / 20) + Math.abs(Math.sin(myFactor) / 5);
        this.scaleY = scaleX;
    }

    // create überschreiben, um das Erscheinungsbild des Objekts
    // zu definieren
    // (gibt Node zurück)
    public override function create(): Node {
        return Group {
                    content: [
                        // linker Bogen
                        QuadCurve {
                            startX: 50.0 startY: 60.0
                            endX: 50.0 endY: 20.0
                            controlX: 0.0 controlY: 0.0
                            fill: fill
                        },
                        // rechter Bogen
                        QuadCurve {
                            startX: 50.0 startY: 60.0
                            endX: 50.0 endY: 20.0
                            controlX: 100.0 controlY: 0.0
                            fill: fill
                        }
                    ]
                    // umgebendes Leuchten
                    effect: DropShadow {
                        offsetX: 0
                        offsetY: 0
                        color: Color.ORANGE
                        radius: 50
                    }
                }
    }
}