Пользователь
0,0
рейтинг
29 марта 2013 в 04:09

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

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



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

Перевод с чешского источника
Павел @Sinister
карма
16,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (43)

  • НЛО прилетело и опубликовало эту надпись здесь
  • +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
    если задать большой размер полотна или высокую гравитацию, то оно — полотно — рвётся под собственным весом, что вполне соответствует правде

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