Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

    Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.



    Есть возможность испытать код прямо на Codepen
    Если потянуть мышкой очень сильно, полотно может и порваться. Впечатляет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit уже создал несколько подобных игрушек.

    Перевод с чешского источника
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 43
    • НЛО прилетело и опубликовало эту надпись здесь
      • +9
        Wow! Особенно когда ткань порвалась.
        • +8
          Магия! Рвешь ее и прям кайф!
        • +4
          >Если потянуть мышкой очень сильно, полотно может и порваться.
          Необязательно тянуть сильно, можно и правой кнопкой мыши рвать в произвольных местах.
          • 0
            Круто. Вчера зайчики habrahabr.ru/post/174603/, сегодня это.
            • 0
              Судя по отскокам, ткань резиновая. Но всё равно очень круто
              • 0
                И путаться не умеет. Зато умеет показывать попки (ну или глаза)
              • +32
                Работает шустро, да и выглядит впечатляюще. В общем мне понравилось.
                • +9
                  Дикое! :(
                  Но симпатичное :)
                  • –1
                    шустро? странно. у меня тормозит даже с physics_accuracy = 1…
                    просто дичайше… слайдшоу прямо.
                    • +3
                      Вероятно, у вас другой компьютер
                      • –1
                        да, вот пример с зайцами из соседнего топика -норм.
                        amd phenom || X4 920 8 gb ram, nvidia GTS 250
                        вроде проблем-тормозов больше ни в чем по жизни не ощущаю)

                        fps по ощущение 1-3, не больше.
                        • +2
                          Я пробовал на работе с одноядерного пентиума с частотой чуть больше 2х гигагерц, к сожалению сейчас точнее не скажу и всё шло очень плавно.
                          • +3
                            Попробовал дома, AMD Sempron M100 2Гц, видео Radeon HD4200 всё очень быстро
                            • 0
                              Core 2 Duo (старый, и не самый быстрый) и последний Chrome — все просто летает. Даже удивился — это очень хороший алгоритм. На своем маломощном старике стопудово ожидал тормозов. По крайней мере физический движок box2d тормозит дичайше. Так как здесь тоже физика — ожидал чего-то подобного, но как ни странно ни намека на тормоза.
                      • 0
                        Это круто! Есть только небольшой косяк но я думаю его можно решить добавив ещё пару строк… Когда обрываешь сетку и она падает на пол она стремится разложиться в одну линию… И раcкладывается :)
                        • +3
                          Самое интересное, что даже мелкие узлы сохраняют правдоподобность движения — и скрипт при этом не тормозит.
                          Здорово.

                          • +2
                            да, и упавшие части можно подкидывать вверх, а в процессе полета еще и резать)
                          • 0
                            Не верится, что такая красота ложится в ~300 строк кода.
                            А порекомендуйте, пожалуйста, книгу, в которой рассматриваются теоретические основы такой симуляции.
                          • +1
                            Обычное интегрирование Верле. Я хоть и верстальщик, а такое когда-то писал, тока у меня связи между точками не рвутся.

                            Немного комментариев и много говнокода.
                              • +4
                                Программист симулирует движение ткани — заголовок шикарен
                                • +2
                                  Ткань симулирует движения программиста
                                  • +1
                                    Сразу вспомнился комикс про «ученый изнасиловал журналиста».
                                  • +7
                                    • +1
                                      На сколько я помню, первая попытка емуляции была еще 3 года назад (January 13, 2010). И чтоб не быть голословным, вот линк.
                                      • 0
                                        Очень, очень удивлен тем, что не тормозит. До этого все подобные демки ассоциировались у меня с жуткими лагами — приятно что JS так идет вперед!
                                        • 0
                                          Напомнило игру Bridge Builder image
                                        • +4
                                          Вот Цукерберг-то (дальновидный ты наш) наверное в шоке от всех этих OdinMonkey, Asm.js, Pixi.js! А ведь как смело высказался о неперспективности HTML для мобильных приложений! А они… смотри-ка чего вытворяют!

                                          Впечатляет!
                                          • –1
                                            Да, и мне кажется в скором будущем можно будет так полноценные игры делать
                                            Однако, позволю себе защитить Цукерберга, с HTML фейсбуком под iOS они поторопились
                                            • +1
                                              Он поторопился не с HTML под iOS, а с выводами о неперспективности веб-приложений HTML и JS на мобилах
                                          • +1
                                            А вот кстати на nprocessing'е примерчик. www.openprocessing.org/sketch/20140
                                            • +2
                                              Мне так рвать нравится, не могу оторваться)
                                            • +3
                                              если задать большой размер полотна или высокую гравитацию, то оно — полотно — рвётся под собственным весом, что вполне соответствует правде

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.