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

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



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

    Перевод с чешского источника

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 43

    • UFO just landed and posted this here
        +9
        Wow! Особенно когда ткань порвалась.
          +8
          Магия! Рвешь ее и прям кайф!
            +7
            Ничуть, знали бы вы, как это просто описывается и реализуется)
            Вот хороший пейпер на эту тему: www.ma1.upc.edu/~susin/files/AdvancedCharacterPhysics.pdf
              +1
              Спасибо! Почитаем и попробуем на досуге =)
                +2
                то ли хабраэффект, то ли ссылка не хочет открываться…
                  0
                  Можно через кеш гугла посмотреть
                    0
                    ага я тоже не смог по ней перейти! вот должно работать
                +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
                                  Обычное интегрирование Верле. Я хоть и верстальщик, а такое когда-то писал, тока у меня связи между точками не рвутся.

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

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

                                                          Only users with full accounts can post comments. Log in, please.