Javascript + Без звука

Игра в браузере: https://alexander-dudarev.itch.io/sand-art

Sand Art – это симулятор творческой физической песочницы, в которой я постарался сделать реалистичное моделирование до 200 000 частиц песка.

Я использовал технологии WebGL и пытался создать интуитивно понятное управление, чтобы создать увлекательный творческий процесс.

Ключевые функции:

- Реалистичная физика песка с 200 000 динамическими частицами, создающими впечатление подлинного песка.

- Многослойная система частиц обеспечивает естественное взаимодействие между песчинками.

- Оптимизированный рендеринг WebGL для обеспечения бесперебойной работы на всех устройствах.

- Набор инструментов для творчества. Разнообразные инструменты взаимодействия, позволяющие манипулировать вашим песочным творением. Художественная настройка 7 уникальных форм кисти для разнообразного художественного выражения. Регулируемые размеры кистей для создания мелких деталей или широких мазков. Полная цветовая гамма для создания ярких разноцветных композиций.

Игра идеально подходит для снятия стресса, творческого самовыражения, арт-терапии.

Буду рад получить фидбэк. Что улучшить, чего добавить?

Помните как мы бегали по горам и не придавали значение тому как быстро спускались или поднимались на них?

Как мы знаем в реальной жизни перемещаясь на плоскости горизонтальная скорость у нас постоянная. Как только мы начинаем преодолевать горы и другие неровности то горизонтальная скорость у нас будет меньше. Но не в мире Lineage 2 где горизонтальная скорость всегда постоянная и нее зависит от неровностей. Связанно это с тем чтобы было проще синхронизировать персонажа на сервере и клиенте. Ведь на сервере нет точной модели мира, а лишь примерное очертание называемое geodata. А из-за того, что geodata приблизительно повторяет ландшафт клиента то было бы невозможно синхронизировать персонажа по Z оси. Поэтому синхронизация идет только по X и Y оси.

Видео:

1) Горизонтальная скорость на плоскости постоянная.

2) Как было бы в жизни. Взбираясь на гору горизонтальная скорость падает.

3) Как сделано в игре. Горизонтальная скорость постоянная.

4) Демонстрация из игры. Бежит словно нет никаких гор.

Блог про разработку сервера для Lineage 2 в телеге https://t.me/lineage2js

"Всего несколько строк CSS для плавных переходов между страницами"

• перевод на хабре

• оригинал

Я много раз слышал, про View Transitions API и о том, что теперь можно настраивать анимации перехода между страницами, но никогда не пробовал.

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

@View-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

• или откройте оригинал статьи и воспроизведите видео

• или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: "Введение в View Transitions API".  Анимация реализуется с помощью startViewTransition

document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

• делается снимок текущего состояния страницы

• выполняется обновление DOM (updateTheDOMSomehow)

• делается снимок нового состояния страницы

• переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры  можно узнать отсюда:

• The View Transitions API And Delightful UI Animations (Part 1)

• The View Transitions API And Delightful UI Animations (Part 2)

• Никита Дубко. По-настоящему красивые переходы средствами браузера

Для блогов на Astro:

• Документация View Transitions в доке Astro

• Как починить темную и светлую темы после внедрения view transitions — читать тут

Проект «Meridian» канадского генеративного художника и программиста Matt Deslauriers, представленный на кураторской платформе цифрового искусства ArtBlocks. Код для создания картин написан на JavaScript. Мэтт делится своими наработками и кодом на своей странице GitHub: https://github.com/mattdesl

Очень классный 3D объект старого компьютера с необычной начинкой в виде комнаты с подсветкой 😍

Можно крутить мышкой на 360 градусов, все работает это чудо работает на ThreeJS

Скачать

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

Спасибо за внимание и всего наилучшего, обнял <3