JavaScript
HTML
Canvas
Comments 48
+3
Ну какое это гиперпространство, это виденье Лукаса как будут выглядеть звезды на высоких скоростях, а на самом деле это совсем не правда ведь :-) Эффект Доплера никто еще не отменял.
+1
Да, я прекрасно понимаю что в реальности все должно выглядеть по другому, но согласитесь эффект узнаваем и, за счет фильмов про звездные перелеты, ожидаем.
+31
Что за вопрос, любой школьник знает как на самом деле выглядит гиперпространство :)
0
Во-первых, вы капельку ошиблись со временем. Во-вторых, ю-тюб позволяет давать ссылки на конкретное время в ролике. По ссылке ниже — кусок вашего видео про путешествие от Земли к Луне со скоростью, близкой к скорости света. www.youtube.com/watch?feature=player_detailpage&v=lD08CuUi_Ek#t=469s
0
Чем ближе к скорости света, тем меньше вы сможете увидеть по краям, а будет видно при взгляде по направлению движения, при увеличении скорости в направлении источника света, волна будет становиться короче и соответственно будет смещаться в фиолетовую сторону, по сути будет фиолетовое пятно по направлению движения, если наоборот двигаться от источника света, то смещаться будет в сторону красного цвета, длинна волны будет увеличиваться. В итоге летите, впереди фиолетовое пятно, сзади красное, по бокам чернота.
0
Время замедлится на скоростях близких к скорости света, поэтому человек вероятнее всего ничего не увидет, а записывающее устройство не успеет сработать :)
+11
У меня почему-то дикие тормоза при просмотре примера на libCanvas. А так всё очень даже хорошо!
0
У меня с libcanvas заметно тормозит, еще и все серое. (Chromium 25.0.1364.160 Ubuntu 12.04)
С pure JS все красиво и плавно работает.
0
В libCanvas это я поставил цвет звезд серый, когда писал — думала только на время, но в итоге забыл поставить обратно белый, сейчас исправлю.
0
У меня нативный вариант все равно работает раз в 5 быстрее.
Опера 12.15
В Chrome видно разницу на глаз, но не так разительно как в Опера.
0
А разве в стандарте http расписан подход к блокировке JS-файлов?)
0
Да, этот работает как минимум так же плавно как пример с картинкой. За счет эффекта угасания выглядит приятнее :)
Но в IE9/10 не работает -((
+1
Странно, что точки резко останавливаются на определенном месте и ждут, когда хвост растворится. По идее, «голова» тоже должна плавно растворяться, не прекращая движения.
+1
Да, тоже про нее сразу вспомнил, когда мне только рассказали идею.
+2
Гиперпространство это когда мы перемещаемся не с большой скоростью, а когда мы перемещаемся в другом пространстве. А у Лукаса и у вас получилась просто скорость света типа. Вот в Вавилоне 5 было гиперпространство.
+3
Почему у вас африканские займы идут куда-то в Гренландию? Я сначала прифигел, как страна денег гребет :)
+1
По каким то причинам у некоторых стран в БД world bank корректных координат или допустим данные по всему региону… поэтому я не могу привязать правильно координаты столицы странны и вывожу подобные страны вверху, там где ничего нет.
0
Было бы круто добавить интерактива — новые вычисления запускать относительно последнего положения курсора ( или по вектору).
+1
круто) я аж машинально приподнял мышку над столом в попытках приблизить к себе центр отсчета по оси Z ))
0
Эх, как будто космонавтов больше нет, одни астронавты… У нас в городе даже как-то раз повесили рекламу на английском, вместо шоссе Космонавтов написали Astronauts avenue.
0
Ну, на том сайте и космические достижения упомянуты в основном лишь американские.

А если по теме, то мне понравилась реализация перехода в гиперпространство.
+6
Позвольте внести правки в ваш код на 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/

Жаль, что функциональность не совсем та, что в оригинальных примерах, а в целом — прикольно)
+1
Вот именно этого комментария я и ждал. =)
Так и знал что я что-то упустил при написании кода.
Спасибо, буду дальше углубляться в LibCanvas и Atom.
+1
Ну тогда я бы сделал это так:

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

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


Добавите в топик обновлённый код?
Не против, если я добавлю этот пример в репозиторий примеров на ГитХабе?
+1
Да, сейчас добавлю Ваш вариант в статью.
И нет, я не против того, что бы пример был в репозитории. Буду даже польщен =)
0
Я на самом деле забыл добавить зависимости от времени:
Например, теперь при открытии другой вкладки и возвращении не будет пустое поле. Прикол в том, что браузеры замедляют обновление до «раз в секунду» в неактивных вкладках, потому это стоит отдельно просчитывать.
+2
Час ждал, но обломки Алдерана так и не появились. FireFox 20.0.1, прошу пофиксить
+3
когда вижу словосочетание canvas + анимация, вместе с примером наслаждаюсь графиком CPU
Only those users with full accounts are able to leave comments. , please.