• Красивая и познавательная анимация: случаи кругового движения и колебаний

      Здравствуйте.

      В своей предыдущей статье я рассказывал, как я делал анимацию планет Солнечной системы для своего сына. Спасибо всем за оставленные там отзывы и «теплый» прием. Сегодня я подготовил еще несколько интересных анимаций, условно объединенных под тему «круговое движение и колебания». Другими словами, то, что описывается с помощью косинусов и синусов.



      Для отрисовки я использовал javascript и canvas. Для каждого примера дана ссылка, где вы можете всё внимательно посмотреть. Можно заглядывать в исходный код, можно копировать себе — я не буду возражать. Материал вполне может пригодиться на занятиях и факультативах по физике, математике или информатике.

      Итак, поехали.
      Читать дальше →
    • Nvidia сошла с ума и открывает PhysX под BSD-3

      • Перевод

      NVIDIA PhysX, самый популярный в мире движок физической симуляции, отправляется в опенсорс.


      Мы делаем это потому, что симуляция физики — ключ к развитию игр и развлечений с высокой степенью погружения — оказалась намного более важной областью, чем мы когда-либо предполагали.


      Симуляция физики — это область, где вместе сошлись искусственный интеллект, робототехника и компьютерное зрение, самоуправляемые автомобили и высокопроизводительные вычисления.


      Читать дальше →
    • Как я делал анимации Солнечной системы для сына-второклассника

        Когда-то давно я получил высшее образование по физике. Позже еще самостоятельно выучился на веб-программиста. С тех пор я преимущественно работаю программистом, но продолжаю уделять время и физике, и технике (что-нибудь рассчитываю или конструирую), и науке в целом. Подобное «раздвоение» приносит интересные результаты. Оказалось, что некоторые факты в физике можно хорошо объяснить с помощью программирования.

        Откуда вообще возник такой вопрос? У старшего ребенка в школе было занятие про планеты Солнечной системы. В целом, он их знает, и на вечернем небе мы видели некоторые (Юпитер, Марс, Сатурн). Но многие интересные факты остаются за пределами понимания. Не хватает наглядности, движения, может быть, интерактивности. Вот именно этот пробел в подаче материала я и захотел заполнить с помощью веб-программирования, следуя известной мудрости «лучше один раз увидеть, чем сто раз услышать».

        Как вы уже догадались, в статье речь пойдет о фактах, касающихся Солнечной системы (не только о планетах). Давайте посмотрим, что есть такого любопытного в нашем галактическом уголке.
        Читать дальше →
      • Использование инспектора анимации в инструментах разработчика Chrome

        • Перевод
        В следующий раз, когда вы создадите очередные анимации на основе CSS3, вам может быть полезно перейти в инструменты разработчика Chrome и воспользоваться преимуществами функций проверки и настройки анимации. В этой краткой статье мы расскажем вам о том, какие инструменты анимационной разработки доступны в Chrome, как получить к ним доступ и чем они могут вам помочь.

        Если вы хотите протестировать ваши CSS3 анимации с помощью этих инструментов то можете воспользоваться готовым кодом из нашего курса: 10 Проектов CSS3: интерфейс и макет.


        Вот полная версия страницы.
        Читать дальше →
      • [ Микро-навигация (микро-подталкивание) ] — микро-анимация для изменения поведения пользователя

        • Перевод
        Небольшая, но на мой взгляд очень полезная и интересная статья)

        Некоторые делают это лучше чем другие, раскрывая психологию микро-анимации.



        Микро-подталкивание — это своевременная небольшая анимация, которая побуждает пользователя выполнять «маленькую» задачу, которую они, возможно, забыли или не заметили.
        Читать дальше →
      • Интерактивный дизайн не обязательно должен быть сложным

        • Перевод


        Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея, означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.
        Читать дальше →
      • Полное руководство по правильному использованию анимации в UX

          Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
          The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



          В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
          Читать дальше →
        • Михаил Бессмельцев с коллегой разработал новые алгоритмы для векторизации графики


            Слева направо: оригинал, оснащённое поле (frame field) и окончательный результат. На базе зашумлённого растрового изображение в оттенках серого вычисляется оснащённое поле, выровненное по линиям картинки. На острые углы типа X- и T-пересечений накладываются векторы по обоим направлениям. Затем из этого поля извлекается топология чертежа — и производится окончательная генерация векторных кривых

            Векторизация изображений — основополагающий компонент рабочего процесса в графическом дизайне, технике и компьютерной анимации. Она преобразует черновые рисунки художников и дизайнеров в гладкие кривые, необходимые для редактирования.

            Первые алгоритмы векторизации изображений появились в начале 1990-х годов и
            использовались в инструментах для редактирования векторной графики, таких как Adobe Illustrator (Live Trace), CorelDRAW (PowerTRACE) и Inkscape. Несмотря на их широкое внедрение в промышленности, эти алгоритмы до сих пор страдают от серьёзных недостатков и находятся в активной разработке. В нескольких индустриях, где векторизация крайне необходима, включая традиционную анимацию и инженерное проектирование, она часто выполняется вручную. Дизайнеры кропотливо обводят отсканированное изображение с помощью инструментов рисования.
            Читать дальше →
          • Создание персонажей в Blender и Unity

            • Перевод

            Визуально персонажи 3D-игр имитируются с помощью использования моделей, текстур и анимаций.

            В прошлом для применения одинаковых анимаций персонажи должны были иметь полностью идентичные скелеты. Это ограничивало разнообразие персонажей, потому что их рост и пропорции тоже должны были быть одинаковыми. Например, в старых играх FIFA все игроки имели одинаковые размеры, потому что создание отдельного скелета и набора анимаций превратилось бы в настоящий кошмар.

            К счастью для разработчиков игр, сегодня большинство движков имеет систему, позволяющую многократно использовать анимации при условии совместимости скелетной иерархии. Такая система позволяет использовать одинаковые анимации для персонажей всех форм и размеров. В Unity эта система называется Mecanim. Она обеспечивает удобную настройку анимаций, смешивание между ними и перенос гуманоидных анимаций между моделями.

            Возможность многократного применения анимаций позволяет использовать анимации из Asset store и с таких вебсайтов, как mixamo.com, для ваших собственных персонажей. Это экономит кучу времени!

            В этом туториале вы узнаете, как подготовить гуманоидную модель в Blender и как перенести её в Unity. В частности, вы научитесь следующему:

            • Создавать арматуру (скелет) персонажа и выполнять её риггинг (привязку скелета к мешу)
            • Модифицировать персонаж добавлением аксессуаров и объектов
            • Экспортировать модель в FBX
            • Импортировать модели Blender
            • Создавать и настраивать гуманоидный аватар
            • Прикреплять к персонажу объекты
            • Анимировать гуманоида в Unity
            Читать дальше →
            • +40
            • 15,9k
            • 7
          • Оптимизация рендеринга сцены из диснеевского мультфильма «Моана». Части 4 и 5

            • Перевод
            image

            У меня есть ветка pbrt, которую я использую для проверки новых идей, реализации интересных мыслей из научных статей и в целом для исследования всего того, что в результате обычно оказывается в новой редакции книги Physically Based Rendering. В отличие от pbrt-v3, который мы стремимся сохранять как можно ближе к описанной в книге системе, в этой ветке мы можем менять что угодно. Сегодня мы увидим, как более радикальные изменения системы позволят значительно снизить использование памяти в сцене с островом из диснеевского мультфильма «Моана».

            Примечание по методологии: в предыдущих трёх постах вся статистика измерялась для WIP-версии (Work In Progress) сцены, с которой я работал до её выпуска. В этой статье мы перейдём на окончательную версию, которая немного сложнее.

            При рендеринге последней островной сцены из «Моаны» для хранения описания сцены pbrt-v3 использовал 81 ГБ ОЗУ. На текущий момент pbrt-next использует 41 ГБ — примерно в два раза меньше. Для получения такого результата достаточно было небольших изменений, вылившихся в несколько сотен строк кода.
            Читать дальше →
            • +39
            • 5,4k
            • 1

          Самое читаемое