Учёный из Шотландии обратила внимание на иллюзию, которую мозг создаёт при просмотре очередной гифки из сети. Многим смотрящим на неё людям кажется, что они слышат звуки прыжков, которые изображение не может воспроизводить ввиду своей сути. Это не первая гифка с подобным эффектом, но в сравнении со многими другими звуки на ней слышно гораздо «отчётливее».
Gif-файлы создаются из изображений или последовательности кадров, и априори не могут производить какие-либо звуки. Но исследователь Лиза Дебрюн из Глазго предполагает, что при должном умении звук можно услышать и на картинке. Она поделилась с пользователями сети старой гифкой в стиле , которая заставляет многих почувствовать звуки. На ней изначально происходят невероятные вещи - три вышки ЛЭП играют с проводами как со скакалкой. Но когда одна из них приземляется, Лиза слышит грохот.
«Послушайте» сами.
Does anyone in visual perception know why you can hear this gif? pic.twitter.com/mcT22Lzfkp
«Кто-нибудь знает, почему вы можете слышать эту гифку?» - спросила Лиза.
Мнения комментаторов разделились, но большинство предположило, что звук кажется слышен из-за готовности мозга. Человек привык к тому, что подобная конструкция падает на землю громко, и сам додумывает звуки этого падения.
Lisa DeBruine
- Уоу, это поражает. Думаю, ты можешь «слышать» это, потому что визуальный ряд показывает звуковую волну, которую твоя слуховая система ожидает, и готовится к ней так, чтобы звук не оглушил тебя. Ухо как бы сжимается как глаз.- Моё восприятие тоже так работает. Я могу самостоятельно «зажмурить» уши, и это похожее чувство.
Другие начали присылать свои примеры. Звук действительно можно «услышать», когда к нему человека готовит зрение, и эта идея не нова. Нужно просто заставить изображение дрожать тогда, когда всё вокруг дрожало бы в реальности.
А здесь некоторые слышат звук пружины.
I started out with thudding, but now alternate with a comical “sproing”. pic.twitter.com/Hjr23NZdO6
John, but festive 🎄 (@john_axon)
Зачем вообще может понадобиться сделать гифку из видео?
Почему просто не использовать видео?
Видео — тяжелое. Видеоролик будет весить несколько Мб, а аналогичная гифка в 10-100 раз меньше.
Да, интернет-каналы толстеют, но ведь есть еще и мобильный интернет, есть медленные компьютеры и прочее.
У GIF-анимации есть 2 функции…
Для чего используют GIF?
Я вижу 2 функции. Первая — показать какой-то процесс наглядно.
Вот, например, моя гифка, показывающая как работает программа Punto Switcher:
Можно было долго описывать, как работает программа, но гораздо проще засунуть такую вот гифку. И всем все понятно. Ее вес — всего 29 Кб.
Кстати, второй вариант — сделать крутой скриншот со стрелками. О том, как это делать я писал .
Вторая функция — просто ФАН (развлечение, шутка и т. д.).
Когда в статье нужно показать какую-то эмоцию лучше средства, чем GIF-анимация не найти.
Например, эта гифка отлично показывает злость (499 кб):
а это — скуку (392 кб):
а вот задумчивость (385 кб):
Вставив такую картинку в статью вы сразу сполна передадите вашу эмоцию. Разве не здорово?
Но как найти подходящую гифку онлайн?
Например, я с его помощью смастерил за 5 минут такую гифку из видео на YouTube. Размер -всего 390 Кб:
Ее можно использовать, когда нужно показать, например, излишний формализм и гламур в абсолютно неподходящих для этого обстоятельствах.
О том, как я сделал эту анимацию, а также о том, как вообще уменьшать размеры GIF — моя пошаговая инструкция .
Вариант 2. Гифка со съемки экрана
Если вы хотите записать гифку с каким-то процессом (например, чтобы послать коллеге наглядное пособие), то вы можете просто снять скринкаст любой программой.
Я же для этого пользуюсь удобным программой-комбайном ShareX (ссылка).
Она, конечно, позволяет снять и видео с экрана, но может и сразу создать гифку из всего процесса.
Не гифом единым. Coub!
Картинка — хорошо. Но иногда со звуком все еще лучше. Гифка со звуком — это Coub.
В Интернете полно смешных кубов.
Моя любимая — «Ну и пожалуйста! Не очень то и хотелось!»
А вот про наших народных умельцев, которые дадут жару любому Масачусетскому технологическому:
А этот куб про дороги России. Мы такие сцены видим каждую весну, к сожалению:
Лесной стриптиз. Ни разу не был на стриптизе, теперь знаю, как это бывает:
Ну, а в этом состоянии, я уверен, каждый бывает в пятницу вечером.
«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe
Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.
Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).
Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.
С 1987 формат GIF пережил всего два существенных изменения:
- В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
- В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.
Разработка расширения формата
Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:Попробуем уместить сюда заголовка WAVE файла:
Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.
Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).
Разработка конвертера
Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:
Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)
Делаем гифку со звуком
Делаем анимированный гиф:# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif
Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:
mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif
Конвертируем в GIF со звуком
python wave2gif.py example/source.gif example/source.wav result.gif
Делаем плеер
За основу плеера возьмем jsgif - плеер для анимированных GIF на JavaScript. jsgif разбирает gif и проигрывает рисуя каждый кадр на Canvas. Добавим в него функцию, которая при обнаружении «RIFFWAVE» блока:- преобразовываем данные из блока обратно в формат WAVE файла;
- конвертируем полученный файл в data: URL и передаем в элемент Audio.
jsgif работает не быстро, а с добавлением звука стал еще медленнее. Так же, чтобы получить данные файла, плеер вызывает XMLHttpRequest, поэтому плеер работает только с картинками с одного домена. Но разве это помехи для искусства.
Что дальше?
Радоваться гифкам со звуком. Можно реализовать плагин для браузеров, который бы позволял проигрывать такие гифки без дополнительного XMLHttpRequest, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .
Сделать гифку онлайн может каждый пользователь. Такая анимация – это набор упрощенных кадров, которые переведены в формат изображения.
Пользователи интернета используют гифки для того, чтобы обмениваться ими, как смешными шутками или отдельными стоящими моментами из фильма или мультика.
Благодаря стремительному росту спроса на интернет, появился и спрос на услуги провайдеров соответственно.
Сегодня пользователи глобальной сети используют в процессе общения бесчисленное количество разнообразных стикеров, смайликов, открыток и гифок.
Анимацию можно сделать двумя способами:
- Используя видеоролик в качестве входящих данных;
- Сопоставление одного файла из нескольких выбранных фотографий .
Сервис Минимультик
Сервис Минимультик является одним из самых крупных и распространенных во всем интернете стран СНГ. Главное направление работы сайта – создание гифок из картинок.
Также в конечный результат может быть добавлена надпись и визуальные эффекты .
Создание проводится абсолютно бесплатно.
Чтобы преобразовать набор обычных картинок в анимационную гифку, следуйте инструкции:
- Зайдите на официальный сайт разработчика сервиса. Ссылка: http://minimultik.ru/
- Вы увидите три условно разделенных столбика, информацию в которых необходимо заполнить. Для начала загрузите картинки на сервер сайта, используя клавишу «выбор фотографии и картинки…», которая имеет бежевый цвет на рисунке ниже;
- После выбора картинок можно приступать к редактированию данных анимации. Для этого в меню, которое указано на рисунке 1 укажите необходимый размер гифки, ее ориентацию, цвет фона, тип углов, максимальную длину и частоту кадров в секунду;
- В поле «Текст» можно добавить надпись на один из кадров гифки. Пропустите это поле, если вам не нужно этого делать;
- Точно так же, по желанию пользователя, можно выбрать наличие каких-либо визуальных эффектов;
- Нажмите на клавишу создания анимации из фото. Скорость создания зависит от количества кадров, применяемых эффектов и от частотности показа составляющих изображений.
Также на сервисе поддерживается возможность создания короткой гифки со звуком.
Анимация со звуком – это уже своеобразный видеоролик, который современные пользователи интернета называют вайном (от английского слова “vine”).
Создание анимации прямиком с веб-камеры – с эффектами
Многие пользователи задаются вопросом о том, где создать красивую гифку с вебки.
На самом деле, существую не так много сервисов, которые способны превратить в гифку в режиме реального времени. Одним из таких сервисов является сайт fungif.ru .
Его суть заключается в том, что абсолютно все пользователи могут создать собственную гифку, которая будет размещена в топе на первой странице ресурса.
Следует заметить, что для создания качественного изображения и четкой анимации с камеры необходимо иметь качественную вебку, которая не искажает изображение и звук (в том случае, если пользователю необходимо сделать гифку со звуком).
Примеры созданных гифок с веб камер пользователями сервиса в режиме реального времени
Совет! Чтобы создать собственную анимацию нужно всего лишь разрешить сервису доступ к камере и записать короткое видео, которое в дальнейшем преобразуется в анимационное изображение.
Готовую гиф-картинку можно скачать на компьютер, а уже с компьютера ее можно распространять в интернете.
Использование сервиса Buildgif
С помощью данного сервиса можно из видео youtube сделать гифку. Так как сервис имеет достаточно узкую направленность работы, пользовательский интерфейс сайта очень простой.
Следуйте короткой инструкции, чтобы создать собственное анимационное изображение с ютуб:
- Зайдите на официальную страницу приложения в интернете. Ссылка: http://buildgif.com/
- В текстовом поле вставьте ссылку на веб-страницу с видео, которая ведет на сайт «Ютуб»;
- Если поиск проведен успешно, ниже появится само видео, как показано на рисунке выше;
- Проставьте объем анимации в настройках и нажмите на клавишу «Создать анимацию».
Процесс создания анимации с видео на видеохостинге Ютьюб
«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe
Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.
Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).
Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.
С 1987 формат GIF пережил всего два существенных изменения:
- В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
- В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.
Разработка расширения формата
Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:Попробуем уместить сюда заголовка WAVE файла:
Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.
Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).
Разработка конвертера
Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:
Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)
Делаем гифку со звуком
Делаем анимированный гиф:# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif
Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:
mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif
Конвертируем в GIF со звуком
python wave2gif.py example/source.gif example/source.wav result.gif
Делаем плеер
За основу плеера возьмем jsgif - плеер для анимированных GIF на JavaScript. jsgif разбирает gif и проигрывает рисуя каждый кадр на Canvas. Добавим в него функцию, которая при обнаружении «RIFFWAVE» блока:- преобразовываем данные из блока обратно в формат WAVE файла;
- конвертируем полученный файл в data: URL и передаем в элемент Audio.
jsgif работает не быстро, а с добавлением звука стал еще медленнее. Так же, чтобы получить данные файла, плеер вызывает XMLHttpRequest, поэтому плеер работает только с картинками с одного домена. Но разве это помехи для искусства.
Что дальше?
Радоваться гифкам со звуком. Можно реализовать плагин для браузеров, который бы позволял проигрывать такие гифки без дополнительного XMLHttpRequest, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .
