Гиперпространство на JavaScript

Что за вопрос, любой школьник знает как на самом деле выглядит гиперпространство :)

www.youtube.com/watch?v=lD08CuUi_Ek
где-то около 6:45 именно на эту тему

Чем ближе к скорости света, тем меньше вы сможете увидеть по краям, а будет видно при взгляде по направлению движения, при увеличении скорости в направлении источника света, волна будет становиться короче и соответственно будет смещаться в фиолетовую сторону, по сути будет фиолетовое пятно по направлению движения, если наоборот двигаться от источника света, то смещаться будет в сторону красного цвета, длинна волны будет увеличиваться. В итоге летите, впереди фиолетовое пятно, сзади красное, по бокам чернота.

Время замедлится на скоростях близких к скорости света, поэтому человек вероятнее всего ничего не увидет, а записывающее устройство не успеет сработать :)

У меня нативный вариант все равно работает раз в 5 быстрее.
Опера 12.15
В Chrome видно разницу на глаз, но не так разительно как в Опера.

По каким то причинам у некоторых стран в БД world bank корректных координат или допустим данные по всему региону… поэтому я не могу привязать правильно координаты столицы странны и вывожу подобные страны вверху, там где ничего нет.

Это уже эффект того, что вы чешите ёжика палочкой…

Я прям захотел этого ежа погладить =)

Ну тогда я бы сделал это так:

Вынес создание и настройки звезды в отдельный класс, дал бы ей различные скорость, цвет и время жизни, со временем определённые звёзды удалял бы:

atom.declare( 'Star', App.Element, {
    
    progress: 0,
    opacity: 1,
    
    configure: function () {
        var screenRectangle = this.layer.ctx.rectangle;
        
        this.animate = new atom.Animatable(this).animate;
        this.from  = screenRectangle.getRandomPoint();
        this.shape = new Polygon(this.from.clone(), this.from.clone(), this.from.clone());
        this.angle = -this.from.angleTo(screenRectangle.center);
        this.sin   = this.angle.sin();
        this.cos   = this.angle.cos();
        
        this.progressSpeed = Math.random() + 0.5;
        this.color = new atom.Color(128, 128, Number.random(128, 192)).toString();
        
        setTimeout(this.fadeOut.bind(this), Number.random(1000, 8000));
    },
    
    fadeOut: function () {
        this.animate({
            time: 2000,
            props: { opacity: 0 },
            onComplete: this.destroy
        });
    },
    
    onUpdate: function () {
        var sin = this.sin, cos = this.cos, p = this.shape.points;
        
        this.progress += this.progressSpeed;
        
        p[1].x = p[0].x + this.progress * cos;
        p[1].y = p[0].y - this.progress * sin;
        p[2].x = p[1].x + 2 * sin;
        p[2].y = p[1].y + 2 * cos;
        
        this.redraw();
    },
    
    renderTo: function (ctx) {
        ctx.save();
        if (this.opacity < 1) ctx.set({ globalAlpha: this.opacity });
        ctx.fill( this.shape, this.color );
        ctx.restore();
    }
    
});

Изначально звёзд создать поменьше, а потом добавлять в каджом кадре

new function () {
    var helper = new App.Light(
        new Size(document.width || 800, document.height || 800),
        { intersection: 'full', invoke: true }
    );
    
    for(i = 0; i < 200; i++) new Star(helper.layer);
    
    atom.frame.add(function () {
        new Star(helper.layer);
    });
    
};

Код стал лаконичнее и читабельнее. В браузере выглядит красиво и работает быстро. Особенно приятно смотрится fullScreen


Добавите в топик обновлённый код?
Не против, если я добавлю этот пример в репозиторий примеров на ГитХабе?

Слоник не лишний.
Гауптпространство же.