Pull to refresh

Как сделать простую трехмерную игрушку на Unity за два дня

Skyeng corporate blog Game development *C# *Hackathon


Самым графически впечатляющим проектом нашего хакатона был Skyeng Action. Когда автор накануне мероприятия презентовал свою идею, мало кто верил, что она будет доведена до рабочего состояния за двое суток. Тем не менее, команда из трех не знакомых до того ни друг с другом, ни с Unity разработчиков с задачей успешно справилась. Рассказываем, как это было.
Читать дальше →
Total votes 21: ↑11 and ↓10 +1
Views 15K
Comments 6

Частичные вау-эффекты: о магии простыми словами

Website development *JavaScript *
Существует такая категория сайтов, которые мы обычно называем «вау-сайтами». Они не предназначены для непосредственного потребления контента, а скорее производят впечатление на посетителя. Эти сайты обычно уникальны в своем дизайне, содержат экспериментальные решения для взаимодействия с пользователем, ломают стереотипы и изобилуют разными анимациями. Особый интерес представляют различные трюки с SVG и анимации, основанные на большом количестве частиц, о которых и пойдет речь в этой статье.



В целом идея воссоздания различных объектов в виде набора частиц существует уже давно. Но из-за того, что практическое применение этой идеи сильно ограничено, а каждая конкретная реализация завязана на конкретный контент, нет единой структурированной базы знаний, в которой можно было бы быстро ознакомиться со всеми приемами. В результате многие разработчики не понимают, что в основе всего лежат очень простые идеи. Их под силу реализовать каждому, кто более-менее знаком с JS.
Total votes 15: ↑15 and ↓0 +15
Views 17K
Comments 3

SVG маски и вау-эффекты: о магии простыми словами

Website development *JavaScript *


О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.
Total votes 61: ↑61 and ↓0 +61
Views 48K
Comments 12

Изменчивые формы и вау-эффекты: о магии простыми словами

Website development *JavaScript *


Продолжаем рассматривать идеи создания различных эффектов для сайтов. Закончили мы на SVG масках, а сегодня на повестке дня элемент path и формы, которые с его помощью создаются. Точнее их изменения. И снова мы постараемся избежать использования сложных технологий, рассмотрим преобразование одних иконок в другие, создание эластичных элементов и использование силуэтов для придания сайту атмосферности.
Total votes 20: ↑17 and ↓3 +14
Views 11K
Comments 9

Пунктирные вау-эффекты: о магии простыми словами

Website development *JavaScript *


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

Перед тем, как перейти к статье, сделаю небольшое отступление. Эта серия статей предназначена для разработчиков (в первую очередь начинающих), которые хотят делать красивые вещи, но совершенно запутались в сложных инструментах. Каждый раз мы затрагиваем какой-то один прием использования того или иного инструмента и смотрим, к созданию какиих эффектов его можно применить. Комментарии о том, что “во времена флеша было лучше” или что “нужно анимации рисовать в AfterEffects” безусловно имеют право на существование, но будут вырваны из контекста и совершенно не помогут начинающим в решении их задачи.
Total votes 60: ↑60 and ↓0 +60
Views 34K
Comments 15

Левитирующие гаджеты: что предлагает рынок гику?

Madrobots corporate blog Gadgets Lifehacks for geeks


На современном рынке электронных устройств есть разные типы гаджетов (в смысле, их просто огромное количество). Среди всего этого многообразия есть те устройства, без которых обычный человек уже не представляет своего существования. Это, например, смартфон или наушники. Это для многих и развлечение, и инструмент для работы и много чего еще. А есть гаджеты чисто для гиков, среди которых встречаются устройства, без которых вполне можно обойтись, но которые привлекают к себе внимание человека, которому близки и понятны современные технологии.

Среди таких систем — «левитирующие» устройства. Речь идет о целой категории устройств, которые благодаря магнитной индукции могут парить в воздухе без всякой видимой поддержки. И таких гаджетов довольно много. Возможно, у вас уже есть что-то подобное? В любом случае, давайте посмотрим, что сейчас предлагает рынок в этом направлении.
Total votes 19: ↑17 and ↓2 +15
Views 30K
Comments 38

Введение в программирование шейдеров для верстальщиков

Website development *JavaScript *WebGL *
Tutorial


WebGL существует уже давно, про шейдеры написано немало статей, есть серии уроков. Но в основной массе они слишком сложные для верстальщика. Даже лучше сказать, что они охватывают большие объемы информации, которые скорее нужны разработчику игрового движка, чем верстальщику. Там сразу начинают с построения сложной сцены, камера, свет… На обычном сайте для создания пары эффектов с фотографиями все эти знания избыточны. В результате люди делают очень сложные архитектурные конструкции и пишут длинные-длинные шейдеры ради очень простых по сути действий.


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

Total votes 42: ↑41 and ↓1 +40
Views 29K
Comments 8

Применяем мозаику Вороного, пикселизацию и геометрические маски в шейдерах для украшения сайта

Website development *JavaScript *WebGL *
Tutorial
image

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


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

Total votes 31: ↑31 and ↓0 +31
Views 12K
Comments 12

Вау-эффект от Рэя Уилсона: изучаем схемотехнический шедевр

RUVDS.com corporate blog DIY Sound Electronics for beginners

Привет, Хабр! Сегодня изучим и соберём интересный гитарный эффект под названием автоматическое вау, или квакушка. Другое его название — фильтр, управляемый огибающей, в варианте от Реймонда Уилсона (Music From Outer Space). Такие педали чаще всего применяются в стиле фанк, но не только.
Соберём, посмотрим, послушаем
Total votes 54: ↑52 and ↓2 +50
Views 10K
Comments 18