Windows Stars Screensaver

export class StarModel extends Model<ModelCollection> implements PhysicsAdaptable {
    public position: Vector2 = new Vector2(0, 0);
    public z: number = 0;
    public color: RgbColor = new RgbColor(255, 255, 255);
    public size: number = 1;
}

interface ViewStarAttr {
    position: Vector2I;
    z: number;
    size: number;
    color: RgbColor;
}

export class MainView extends CanvasView<ViewCollection> {
    /// Color of the "sky"
    public bg_color = new ChainProperty<this, RgbColor>(this, tools.commons.Colors.BLACK);
    /// All stars on the screen
    public stars = new ChainProperty<this, Array<ViewStarAttr>>(this, []);

    public draw(): void {
        this.reset_canvas_state();
        this.stars.get().forEach((star) => {
            /**
             * Divide the position by `z` to create a sense of depth,
             * when the stars approach the viewer. 
             */
            const real_position = new Vector2(star.position).mul(33 / (star.z)).add({ x: 400, y: 300 });
            const size = star.size * 100 / star.z;
            this.context.strokeStyle = star.color.to_hex();
            this.context.fillStyle = star.color.to_hex();
            this.context.fillRect(real_position.x - size / 2, real_position.y - size / 2, size, size);
        });
    }

    /**
     * Reset default canvas state and paint the background
     */
    protected reset_canvas_state() {
        super.reset_canvas_state();
        this.context.fillStyle = this.bg_color.get().to_hex();
        this.context.fillRect(0, 0, 800, 600);
        this.context.imageSmoothingEnabled = false;
    }
}

export class GameController extends BaseController {

    public readonly COLOR_COUNT:number = 50;
    /**
     * Start a new game
     */
    public new_game(): ControllerRouteResponse {
        for (let i = 0; i < this.COLOR_COUNT; ++i) {
            let star = this.models.stars.insert_new();
            this.form_star(star);
        }
        const response: ControllerRouteResponseType = {
            view: this.views.main,
            controller: this.controllers.for_event.game_controller,
        };
        return response;
    }

    /**
     * Form a new StarModel
     * @param star the star model to manipulate
     */
    private form_star(star: StarModel) {
        // a random color
        star.color = this.create_star_color();
        // a random value between 0 an 100
        star.z = Math.random() * 100;
        // a random position inside the screen boundries
        star.position.set({
            x: Math.random() * 400 * 2 - 400,
            y: Math.random() * 300 * 2 - 300,
        });
    }


    /**
     * Create a random Color, but it should have a minimum brightness.
     */
    private create_star_color(): RgbColor {
        // define a random intensity, wich has at least above verage brightness
        const intensity = Math.random() * 100 + 155;
        // Add a random value to each color component, to allow slight variations.
        return new RgbColor(
            Math.max(intensity + 50 * Math.random(), 255),
            Math.max(intensity + 50 * Math.random(), 255),
            Math.max(intensity + 50 * Math.random(), 255),
        );
    }
}