agegorin Apr 12 2013 at 12:57

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

7 min

27K

Canvas*HTML*JavaScript*

Recovery Mode

+41

Comments 48

AxisPod Apr 12 2013 at 13:05

Ну какое это гиперпространство, это виденье Лукаса как будут выглядеть звезды на высоких скоростях, а на самом деле это совсем не правда ведь :-) Эффект Доплера никто еще не отменял.

agegorin Apr 12 2013 at 13:09

Да, я прекрасно понимаю что в реальности все должно выглядеть по другому, но согласитесь эффект узнаваем и, за счет фильмов про звездные перелеты, ожидаем.

KvanTTT Apr 12 2013 at 13:18

А как на самом деле это должно выглядеть?

GeckoPelt Apr 12 2013 at 13:32

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

GearHead Apr 12 2013 at 14:30

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

linuxoid Apr 12 2013 at 15:24

Во-первых, вы капельку ошиблись со временем. Во-вторых, ю-тюб позволяет давать ссылки на конкретное время в ролике. По ссылке ниже — кусок вашего видео про путешествие от Земли к Луне со скоростью, близкой к скорости света. www.youtube.com/watch?feature=player_detailpage&v=lD08CuUi_Ek#t=469s

GearHead Apr 12 2013 at 16:17

всегда пожалуйста.

AxisPod Apr 12 2013 at 14:45

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

hannimed Apr 12 2013 at 15:20

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

lampa Apr 12 2013 at 13:08

У меня почему-то дикие тормоза при просмотре примера на libCanvas. А так всё очень даже хорошо!

SovGVD Apr 12 2013 at 13:08

У меня с libcanvas заметно тормозит, еще и все серое. (Chromium 25.0.1364.160 Ubuntu 12.04)
С pure JS все красиво и плавно работает.

agegorin Apr 12 2013 at 13:11

В libCanvas это я поставил цвет звезд серый, когда писал — думала только на время, но в итоге забыл поставить обратно белый, сейчас исправлю.

SowingSadness Apr 12 2013 at 15:08

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

SowingSadness Apr 12 2013 at 15:11

IE10 версия libCanvas не работает вообще.

TheShock Apr 12 2013 at 15:17

Сценарий из raw.github.com/theshock/libcanvas/master/libcanvas-full-compiled.js был заблокирован из-за несоответствия типа MIME

Исправить очень легко — брать файлы с другого места:
jsfiddle.net/UM3vR/27/

Но это очередной фейл IE, имхо.

SowingSadness Apr 12 2013 at 15:28

Ну, давайте теперь ругать IE за соблюдение стандарта Http :)

TheShock Apr 12 2013 at 15:31

А разве в стандарте http расписан подход к блокировке JS-файлов?)

SowingSadness Apr 13 2013 at 01:43

В стандарте описана реакция сервера и клиента на заголовок Accept.

TheShock Apr 12 2013 at 15:12

А этот код на LibCanvas?

SowingSadness Apr 12 2013 at 15:17

Да, этот работает как минимум так же плавно как пример с картинкой. За счет эффекта угасания выглядит приятнее :)
Но в IE9/10 не работает -((

armed Apr 12 2013 at 13:12

Пророчу выходные различных гиперпространств на JS.

impwx Apr 12 2013 at 13:21

Странно, что точки резко останавливаются на определенном месте и ждут, когда хвост растворится. По идее, «голова» тоже должна плавно растворяться, не прекращая движения.

xpavlov Apr 12 2013 at 13:25

Сразу вспомнился скринсейвер звезды в windows 3.1 и 9.x

agegorin Apr 12 2013 at 13:28

Да, тоже про нее сразу вспомнил, когда мне только рассказали идею.

GreatRash Apr 12 2013 at 13:28

Гиперпространство это когда мы перемещаемся не с большой скоростью, а когда мы перемещаемся в другом пространстве. А у Лукаса и у вас получилась просто скорость света типа. Вот в Вавилоне 5 было гиперпространство.

artzub Apr 12 2013 at 13:40

Я примерно такого же эффекта добивался вот в этой визуализации (только визуализация без версии).

Тут только не звезды а денежные займы от одной стране к другой. Библиотека d3.js для расчета физики.

ssneg Apr 12 2013 at 15:06

Отличная идея и реализация.

Nordvind Apr 12 2013 at 15:44

Почему у вас африканские займы идут куда-то в Гренландию? Я сначала прифигел, как страна денег гребет :)

artzub Apr 12 2013 at 22:43

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

Shandec Apr 12 2013 at 13:56

Было бы круто добавить интерактива — новые вычисления запускать относительно последнего положения курсора ( или по вектору).

agegorin Apr 12 2013 at 14:03

Как-то так? jsfiddle.net/agegorin/gdK8Z/

UFO just landed and posted this here

Shultc Apr 13 2013 at 00:08

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

artzub Apr 15 2013 at 14:36

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

Smerig Apr 12 2013 at 14:15

Эх, как будто космонавтов больше нет, одни астронавты… У нас в городе даже как-то раз повесили рекламу на английском, вместо шоссе Космонавтов написали Astronauts avenue.

ansl Apr 12 2013 at 14:27

Ну, на том сайте и космические достижения упомянуты в основном лишь американские.

А если по теме, то мне понравилась реализация перехода в гиперпространство.

TheShock Apr 12 2013 at 14:20

Позвольте внести правки в ваш код на LibCanvas

helper = new App.Light(new Size( width, height ));
// =>
helper = new App.Light(new Size( width, height), { intersection: 'full' });

результат — значительное повышение скорости.

Прикол в том, что по-умолчанию библиотека считает «Dirty Rectangles», что в даном случае, очевидно, не очень выгодный подход в плане производительности.

Ну и несколько мелочей — вместо Path можно использовать Polygon
Вместо getRandomInt использовать встроенную Number.random
Вместо setInterval atom.frame.add

jsfiddle.net/UM3vR/15/

Жаль, что функциональность не совсем та, что в оригинальных примерах, а в целом — прикольно)

agegorin Apr 12 2013 at 14:22

Вот именно этого комментария я и ждал. =)
Так и знал что я что-то упустил при написании кода.
Спасибо, буду дальше углубляться в LibCanvas и Atom.

TheShock Apr 12 2013 at 15:07

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

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

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

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

agegorin Apr 12 2013 at 15:14

Да, сейчас добавлю Ваш вариант в статью.
И нет, я не против того, что бы пример был в репозитории. Буду даже польщен =)

TheShock Apr 12 2013 at 16:10

Я на самом деле забыл добавить зависимости от времени:
Например, теперь при открытии другой вкладки и возвращении не будет пустое поле. Прикол в том, что браузеры замедляют обновление до «раз в секунду» в неактивных вкладках, потому это стоит отдельно просчитывать.