Игры на Java Script возвращение

Всем привет, знакомство со студентом ВШЭ Марком Корнейчиком опять вернуло в эксперименты со стеком технологий JavaScript + Canvas. Попробуем заняться геймдевом в свободное от основных проектов время, а его не много, если не сказать совсем нет. Но, ладно, статьи будут выходить редко, но гарантированно будут интересными и понятными, так как результатом будет графическая программа на JavaScript + Canvas. Также постараюсь сделать примеры такими чтобы их можно было потрогать и поиграть с параметрами. Мы с братом 5 лет назад уже пытались с разной степенью успешности разработать игровые движки на базе этого универсального набора технологий, это было крайне увлекательно и занятно. Все статьи о разработке (не только игры) и два наших проекта:

Growing Crystals


кратко: многопользовательская ролевая игра в киберпанковском сеттинге
графика: изометрия
технологии: JS+Canvas и WebSocket и PHP
стадия готовности: доведена до стадии беты с регистрацией пользователей и полноценным игровым процессом
годы работы: 2014

Project_one


кратко: однопользовательская обучалка английскому
графика: полноценное 3D в стиле minecraft
технологии: JS+Canvas(WebGL)
стадия готовности: работающий прототип
годы работы: 2015

Для начала решил поставить эксперименты с программированием динамической графики. При наличии большого количества времени это довольно просто.

В качестве примера взял ставшее уже лейтмотивом моих статей о Canvas ранее сделанное фрактальное дерево и решил научиться делать его в динамике, не ожидал что задача окажется такой ёмкой. Она заняла около 4-х часов.


HTML5 CANVAS

Но, как обычно бывает когда начинаешь эксперимент с математическими моделями, очень трудно остановиться. И я подумал, а что будет если мы введем вероятность мутации в модель? Согласитесь деревья уже больше похожи на настоящие – вот оно подобие в фрактальном многообразии.


HTML5 CANVAS

Посмотрим что будет если высадить маленький лес с разными “генетическими параметрами” и возможными дефектами. Правда, для того, чтобы лес рисовался в 60 FPS пришлось создать промежуточный буфер. Без него даже такая быстрая штука как Canvas при отрисовке 10 000 веток снижает FPS до 12-15.


HTML5 CANVAS

А вот, кстати, что будет если этот буфер отключить.


HTML5 CANVAS

Признаться, я хотел еще добавить один скрипт, позволяющий пользователю самостоятельно попробовать разные параметры при создании дерева. Но, кажется, это будет уже лишним. Если кому-то интересно, напишите в комментариях, по вашему запросу разовью тему фрактальных объектов.