Анимированный ушифратор онлайн! Новая эра общения
+256
Sasha-Flyerв блоге Блог аниматоров Табуна8 ноября 2019, 12:54
Долго думал, куда запостить — в IT Pony или в аниматоры. Примерно одинаковое время потратил на то и на другое...
В моем прошлом посте мне предложили сделать анимированный ушифратор, что я собственно и сделал: ушифратор.рф
На данный момент сайт даёт две базовые функции — ушифрование сообщения с помощью 4 разных поняш, по 5 эмоций у каждой (20 мордочек), и дешифровка.
Если идея окажется удачной, то в ближайшем будущем я займусь следующими вещами:
- Интеграция с Табуном:
- Появится возможность написать моему боту в личку на Табуне, чтобы получить пароль для Ушифратора. Вы откроете возможность получать ачивки за деятальность на Табуне, и открывать за это доступ к уникальным поняшам и эффектам
- Приватная шифровка — автоматически смогут расшифровать только те Табунчане, которых вы перечислите. Остальным придется потеть вручную...
- Элитная шифровка — сообщение смогут расшифровать только те, у кого больше указанной вами кармы
- Казуальная шифровка — при наведении мышки на ушифр сразу высветится расшифрока
400 комментариев
Наверное знаешь, но английский текст выдаёт
Окей, давайте разбираться.
1) Сервер выдаёт внутреннюю ошибку при попытке зашифровать что-то кроме русской раскладки и некоторых (причём я так и не понял, почему именно этих) знаков препинания.
2) Всего ~40 символов доступно. Одно ухо, другое, оба, моргание. Четверичная система счисления. 4^3=64. Что мешало добавить все знаки препинания в оставшиеся места? При этом кодировка плавающей длины без перебивок (буква «я» это лево, лево, право, а буква «а» это вниз), так что расшифровать вручную можно, но зачем? 0201302 это 0,20,130,2 или 020,1,302 или 0,2,0,1,3,0,2? Сиди, занимайся брутфорсом или частотным анализом. Легко, но нудно.
3) Максимум можно написать 30 позиций. Последнее, очевидно, связано с тем, что автору было лень делать оптимизацию картинок переводом их в .gif с понижением кадровой частоты, и поэтому фигнюшка меньше 80*80 пикселей весит более полутора мегабайт.
4) Если автор сделает это:
То я выпущу свой дешифратор. Хотя, конечно, он может сделать хитро, и сначала шифровать нормальным шифром, и получившееся уже «ушифровывать», но знаете что? Я не знаю. Посмотрим — увидим.
А ещё у меня дежавю при прочтении своего комментария.
gif тоже хрень.
Sasha-Flyer надо срочно переходить на анимированный SVG пока табун не упал от ушкоспама.
А вот и нет, мне нужно это в дискорд!
Из SVG можно что угодно уже сделать.
Тем не менее, это абсолютно не важно для меня, как для конечного пользователя. Пусть хоть в чём хранит, лишь бы мой трафик не жрал. Эти 28 сообщений здесь весят наверное больше, чем страница поиска по изображению Дерпибуры с 50 картинками. Да что уж там, я уверен, она весит не сильно меньше, чем весят все оригиналы этих самых 50 картинок.
ПОЛТОРА МЕГАБАЙТА! Это полноценный (и немаленький!) арт в .png без сжатия!
Читай
Мне вот больше заняться нечем, чем выделять все единственные два свободные часа в будний день после работы, чтобы ковыряться в ненужных мне fla исходниках.
Каким же образом я спрайты из swf экспортил в svg через FFDec, понятия не имею.
Хмммммм
Ниасилил же статью, ну. От тебя даже в редактор ничего пихать не требуется на выходе. Разве что написать штуку, которая будет впихивать в один файл все кадры.
Спойлер
>как минимум половина статьи — один большой пример
>статья без примеров
Не буду же я тебе скидывать эксперименты с лого программы, с которой я вожусь на работе, а?
Эй, ты и так работаешь с уже готовым материалом, тебе разжевали самый непонятный и сложный участок, остальное уж как-то сам.
Значит иллюстратор говно.
Спойлер
хоть бы подлагнул чуток. Ты не видел реально тяжелые svg.
Ни один пример из статьи не был импортирован из .fla исходника.
1. получиь её из .fla
2. открыть её в любой программе, которая может создавать animated svg.
Я не вижу смысла даже пытаться объяснять тебе что-то, пока ты не понял, как она вообще устроена. Как ты поймешь, отпадут вообще все вопросы
Попытаюсь тебе объяснить еще раз — структура лица пони — очень сложный объект, в котором минимум сотни точек. И ты в любом случае не сможешь программно анимировать каждую эту точку или группу точек.
Я прекрасно понимаю что делает этот код и как он работает. Но ты попросту заебешься делать это для КАЖДОЙ точки КАЖДОЙ пони пони. с помощью такого кода
…
trixiebooru.org/search?q=animated%2C+svg — всего ПЯТЬ animated + svg картинок за всю историю брони-сообщества, причем ни в одной из них в принципе нет мимики лица.
Во-первых, animate CC может экспортировать только самый первый кадр сцены. Чтобы экспортировать другие кадры, нужно вручную удалять первый кадр и вручную заного экспортировать.
во-вторых Сейчас для каждой пони 211 уникальных кадров, для кадой эмоции. 211 Х 5 эмоций Х 4 пони = 4к+ кадров. И всё вручную. Причем в дальнейшем будет больше эмоций и больше пони. Ты реально предлагаешь мне на полном серьезе это делать?
Делаешь анимированный swf — берешь FFDec — экспортируешь все svg-кадры скопом (он умеет).
Опиши мне свой техпроцесс для apng
Пока что я не видел ни одного человека, кто делал это так же, как я. Я написал свой собственный скрипт на Питоне, который делает это.
Но андроид 4 уже довольно таки старый, на 7 пашет всё и везде.
def test(): for k in range(1000, 1001): frames = [] webp_frames = [] s = " -d 41 -m 4 -q 85 -lossy -min_size" for i in range(1, len(listdir("{0}".format(k)))+1): frames.append("{1}\q{0:04d}.png".format(i, k)) webp_frames.append(Image.open("{1}\q{0:04d}.png".format(i, k))) s = s + " {1}\q{0:04d}.png".format(i, k) name = str(k) + ".png" wname = str(k) + "PYTHON.webp" wwname = str(k) + "GOOGLE.webp" subprocess.call('{0}{1} -o {2}'.format(libwebp, s, wwname)) APNG.from_files(frames, delay=41, delay_den=1000).save("{0}".format(name)) path = "C:/Users/User/Downloads/apngopt-1.4-bin-win32/apngopt.exe -i15" name = "1000_opt.png" webp_frames[0].save( wname, format="WEBP", lossless=False, quality=85, save_all=True, append_images=webp_frames[1:], duration=41, )ВОТ ЭТО:
не равно
ВОТ ЭТОМУ
да, принцип движения и изменения точек будет одинаковым. Но это никто не будет делать.
И можно тебе еще один такой вопрос, раз ты в этом шаришь — вот допустим я все-таки анимирую svg точно даже, как сейчас выглядят анимированные png. И вот ты откроешь одновременно APNG и ASVG с одинаковой анимацей. Да, очевидно, что ASVG будет весить на несколько порядков меньше. НО: кто тебе двигает точки в svg файле? Правильно — твой процессор. А что процессор делает для отображения APNG? Ничего!
А теперь вопрос на засыпку:
Что первее помрет от истощения: Оперативная/видеопамять от 1000 АПНГ картинок, или процессор от 1000 SVG картинок?
Мне кажется, одинаково хреново будет обоим. Только при необходимости можно пропускать кадры SVG-картинок.
TL:DR: ты предлагаешь мне очень сильно запариться ради того, чтобы ваши компы начали лагать еще быстрее.
Ты реально такой дебич или притворяешься?
Если APNG вывалятся за пределы оперативки, то процесс браузера просто прибьется, ибо нехер столько жрать.
Если SVG вдруг начнут жрать слишком много, то… браузер просто пропустит пару кадров и будет делать вид, что ничего не происходит.
Это, конечно, я немного утрирую, но сценарий вполне себе вероятный.
Кэш ващет как раз и находится в памяти, и флушится на диск, если памяти недостаёт. А то, про что ты говоришь — это своп, и у большинства сейчас он отключен, потому что в целом почти нисколько не помогает при нехватке памяти, а только начинает тормозить систему ещё тогда, когда использование памяти куда ниже 50%.
Да, одно из главных правил использования сторонних API:
Если существует очевидная эффективная и не менее очевидная неэффективная реализация какой-нибудь операции, то в подавляющем большинстве случаев операция будет использовать именно неэффективную реализацию.
И кроме как отрисовывать кадры с пониженным ФПСом процессор больше ничем не сможет заниматься, а отсюда как следствие: инпут лаги в лучшем случае и полный отказ операционной системы в худшем.
32-ядерный сервер, угадайте, сколько ядер жрёт лисица?
ПРАВИЛЬНО, ОДНО!
Хотя казалось бы, ну уж рендер-то можно в отдельные потоки побросать.
1-2 FPS на 1300 МГц (память, что характерно, не занята от слова совсем, 300 мегов — мелочь).
Я голосую за максимально жестокую казнь для тех, кто в 2019 пишет однопоточные программы.
ну, таки все браузеры однопоточные, просто некоторые (хром) научились делать потоки хотя бы под каждую вкладку.
Недавно прочитал книжку про Vulkan (как раз про то, как надо писать шейдерную обработку для GPU под такой API), и очень порадовался тому, что разработчики этого API пытаются поменять психологию программистов с «программа — это линейный поток инструкций» на «программа — это неупорядоченный набор коротких примитивов обработки данных, запускающихся ровно тогда, когда данные для конкретного примитива доступны» (забавно, что если доступно много данных для одного примитива, то они не становятся в очередь, а выполняются на независимых экземплярах примитива). Умение в такую модель критически важно для программирования для GPU (когда широченная шина к памяти, да ещё и портов у памяти куча, а вычислительных ядер тысячи), и не менее интересно было бы для программирования для современных многоядерных CPU. Но пока что на фронте CPU в этом отношении глухо, и очень жаль =/ Надеюсь, когда-нибудь, в прекрасном firefox-е будущего, такое будет реализовано, а сейчас пока приходится плакать, колоться, но продолжать жрать кактус.
stasyan.ga/proof
10К svgшек на телефоне заставил отрисоваться — ну, анимация лагает. Все остальное нет.
Попробую сейчас не инлайново вставлять.
Не SVG, около 20 FPS, 600 МБ, загрузка около 75%
Зато он рендерит постепенно, кадр за кадром, а APNG распаковывает сразу. Во втором случае нагрузка куда больше, думаю.
Процессор как бы должен распаковывать apng. Ты же не без сжатия его юзаешь?
inkscape.org/ru/learn/animation/
Inkscape does not support animation natively, although it might someday, if any individual programmer, or small team becomes interested in tackling the challenge.
Ну вот ты же сейчас со мной общаешься. Открыть любой .fla файл — пару секунд. Файл -> параметры публикации -> SVG -> опубликовать — не более минуты.
591кб, найди отличия, как говорится. это все еще дофига
Если перейти на непрозрачный фон, можно экономию будет исчислять десятками раз, сейчас, видимо, используется любопытное неочевидное свойство наиболее распространенных (но далеко не всех) рендеров перетирать только те области, которые занимает каждый кадр. С непрозрачным фоном можно будет переписывать только реально отличающиеся части, а это одни уши.
В принципе, это идея — если не выйдет в этот ваш svg перевести ушифр, чтобы при этом его понимали все браузеры, то прикрутить к скрипту Ушифра возможность в настройках выбора качества картинки (gif или apng) и, соответственно, при загрузке страницы Ушифр будет парсить ссылки на ушифр-картинку и подменять ссылку на низкокачественную гифку. Но как по мне, это гемор.
Ты типа предлагаешь для каждой поняши завести список инт-чисел, показывающих какие цвета для неё использовать, и при рендере разрешать использовать только эти цвета? И как это поможет уменьшить объем, если все эти цвета в любом случае используются?
Никто не в курсе об этом
4 байта на цвет -> 1 байт на цвет
Сие есть неправда. Я время от времени пользуюсь pngquant. Оч качественно сокращает число цветов до 256 или менее… имеет траблы с градиентами, да-с. У него есть форк Posterizer для большего числа цветов… я его как-то тыкал, веса сохраняет не особо много.
.fla невозможно импортировать в анимированный svg. Есть один скрипт 2015 года, который нифига не работает.
Ну это просто пруф оф концепт, для твоих целей он не подойдет.
Вижу у тебя ниже получилось сжать apng до сотен кб, это уже вполне приемлемо.
У SVG как и у всего есть свои плюсы и минусы. Можно сделать более плавную анимацию и интерактив.
Но они действительно могут сильнее нагружать CPU. У меня ноут даже подвывать начинает когда эта Флатти на экране. Всё же рендеринг на стороне клиента не есть хорошо.
В три раза!
Отличная задумка
По мне, очень забавно. Главное, чтобы не заменили им ВСЁ общение, бегать и расшифровывать каждый смайл не буду, и не использовали для зашифрованных оскорительных посланий.
Флайер, тебе надо срочно договориться с художником, умеющим в вектор, кто может нарисовать ещё несколько позиций ушей — в частности, уши под углом в 45 градусов, а также сделать более явное покачивание и круг ушами из стороны в сторону (там тоже ещё пару кадров надо бы дорисовать). Да и уже имеющиеся позиции поправить, чтобы выглядело более аккуратно, а то у тебя когда ухо вбок, оно почему-то начинает расти из макушки, а не из положенного ему места, при этом нижняя часть вверх сдвигается. Вон, посмотри на оригинальные картинки ушифра.
В общем, как я уже сказал, выглядит очень неплохо, но тебе очень нужна помощь художника, кто доработает кривые кадры, раз уж ты говоришь, что не можешь в рисование. Я бы и сам радостью помог, но, увы, в этом плане такой же, как и ты — что-то кривенькое и простенькое могу сделать в растре, нов в векторе вообще ни в зуб ногой, и в чём и как там рисовать понятия не имею.
Нам нужен частный детектив чтоб расследовать пропажу уха.
Хочется научиться читать эти гифки без деушифратора.
Сам понимаешь, никто тебя не торопит. Просто было б клево.
Сейчас я бы посоветовал в первую очередь сосредоточиться на допиливании анимации и добавлении персонажей, ну и поиске нужного художника/ов. Несколько дней метаний между форматами особой погоды не сделают, зато уже когда будет полностью готова база, останется её либо перевести в нужный формат, либо попросить наших скриптописцев, чтобы они прикрутили через плагин/скрипт нужную для проигрывания анимации (той же asvg) библиотеку, которую будет подгружать браузер (если такой в нём не встроено изначально).
Pingo умеет в оптимизацию apng и шустрый.
>> webP
Умеет в сжатие с потерями с сохранением прозрачности.
>> http://ушифратор.рф/
Не зашифровано. Кто угодно может читать и менять трафик.
reg.ru обещал дать мне ssl, но в итоге письмо не пришло.
всё что кодирует мой сайт — проходит через apngobt.
с webp я уже сейчас работаю — удалось сжать с 1.4мб до 400кб. В следующей версии перейду на него
Качество и размер файлов может сравнить сам. У WebP два недостатка — Питон отказывается его загружать к себе на сервер (придется хостить у себя их), а так-же webP не поддерживается на iOS устройствах.
срок редактирования истёк(
Почему ты не можешь загружать картинку по урл и дешифровать ее?
Ниже предложил компромиссный вариант
Попробуй расшифровать это cdn.everypony.ru/storage/02/06/64/2019/11/08/58ef8e38c8.png или это cdn.everypony.ru/storage/02/06/64/2019/11/08/f952518d5a.png или любую другую картинку, которую скидывал не я.
Для просто png pingo это лучшее сбалансированное решение — я не так давно много копал на тему.
Чем (высококачественным) можно потыкать написал выше. Токо осторожнее с градиентами, не съешь их. ^^'
Достаточно квантовать эти самые исходные картинки, из которых всё собирается.
Также упомяну что у pngquant есть настройка скорости.
Скорость 10 (относительно по-умолчанию) на 5% хуже и в 8 раз быстрее.
Ну, и оффтопик. Если когда-либо захочешь гифку максимального качества, то gifski твой друг.
Это pngquant на стероидах интерполяции во времени. Warning! Медленный и выдаёт большой вес.
Спойлер
а вот так они выглядят в апнг: cdn.everypony.ru/storage/02/06/64/2019/11/09/1b27b2fa48.png
особо чувствительным просьба не открывать ссылку.
Может программа сборки не терпит. Попробуй собрать чем-нибудь другим?
Ещё можно преобразовать картинки в 32 битные… так и палитры не будет, и цветов мало.
Даже если глубина цвета та же. Собственно, экономия от Posterizer на этом и основана.
dropmefiles.com/OHpp6 — сжатые более чем в 3 раза файлы.
Попробуй из вторых файлов получить такой АПНГ, который весит меньше, чем в первом. (при одинаковых услорвиях сжатия, естественно)
то есть:
Из 1.5 МБ фреймов получается анимация 400 КБ
Из 400 КБ фреймов получается анимация 545 КБ
Мне ffmpeg вот что сказало. Так что apng не поддерживает более одной палитры, да-с.
GIF поддерживает, а APNG нет… прогресс.
Я действовал из благих и логичных побуждений.
И потратил много времени стараясь помочь тебе.
Почти все задержки моих ответов были временем потраченным на размышление и поиск.
То что ты обвиняешь меня как злодея и дурака… ранит. Попросишь прощения?
Но на уровне того что это предельно логично сразу по ряду причин.
Тем не менее.
Я прошу прощения что не потратил достаточно усилий на проверку практикой.
И впредь постараюсь на неё опираться получше и побольше. Мур?
Я сейчас придумал вот что: проанализировать все палитры фреймов, совместить всё и применить совмещенную палитру ко всем фреймам обратно. это немного прибавит вес, но уникальных цветов в разных фреймов не очень много
збс…
dropmefiles.com/OHpp6
im = Image.open("{1}\q{0:04d}N.png".format(i, k)) print(im.palette.tobytes()) ValueError: palette contains raw palette dataПрогнал все фреймы с дефолтными настройками через pngquant.
imgur.com/a/sd1v6rQ — сверху после прогона, снизу до прогона. 7 против 3.4 КБ. Стоит ли сжать еще сильнее?
Я могу сказать как оно мне и указать на отличия.
Но моё мнение тут немногим более ценно чем обывателя.
1. из всех 211 фреймов создать одну большую пикчу, на которой расположены все фреймы на одинаковом расстоянии
2. уменьшить цветовую палитру на этой большой картинки
3. порезать эту большую картинку на исходные фреймы, сохраняя при этом цветовую палитру
4. сделать АПНГ с кастомной цветовой палитрой, которая одинакова для всех фреймов, потому что они сжимались одновременно и все вместе.
Фреймы после индексирования палитры — 91 КБ/span>
Скрещиваем пальцы и надеемся, что всё пройдет нормально…
если лень регаться — вот тебе торрент cdn.discordapp.com/attachments/600070809658327060/631951890355191838/Adobe.Animate.2019.u3.Multilingual.torrent
Лучше сам меня найди: malomaster#4307
Главное чтобы тот скрипт, которым ты сейчас собираешь анимацию текста Ушифра, не начинал херить анимацию букв при сборке, а то, как всегда, вылезет проблема, откуда не ждали…
Спойлер
И чтобы анимация просто меняла координаты обзора каждый фрейм. То есть, чтобы анимация «бегала» по этой большой картинке, как слайды у диапроектора.
Если такой тип анимации существует, то абсолютно каждый ушифр будет весить менее 100кб вне зависимости от длины.
Нужный тебе кусок делается CSS-анимацией, и там точно есть режим, где рисуется только начальная и конечная позиция
DEL
Анимации нет, но если вы откроете её в отдельной вкладке, то она появится.
если удастся менять эти две переменные раз в 40 миллисекунд, не трогая при этом JS (который табун 100% заблочит) — значит получится сделать такую анимацию. Но я чет очень сомневаюсь, что это в принципе возможно без скриптов…
Есть прорыв! SVG-анимация на основе диапроектора:
Теперь надо научиться телепортировать анимацию прямо в нужные фреймы, и тогда всё будет заебись!
Спойлер
Или например www.joningram.co.uk/article/svg-smil-frame-animation/
Разделялка:
Спойлер
def clice(max = 212): c = 1 left, upper, width, lower = 0, 0, 80, 80 for i in range(15): for k in range(15): im = Image.open("testN.png") bbox = (left, upper, width, lower ) working_slice = im.crop(bbox) print(left, upper, width, lower) working_slice.save("288/q{0:04d}.png".format©) upper += 81 lower += 81 c +=1 if c == max: return upper = 0 lower = 80 left += 81 width += 81Совмещалка:
Спойлер
frames = [] webp_frames = [] s = " -d 41 -m 4 -q 85 -lossy -min_size" for i in range(1, len(listdir("{0}".format(j)))+1): frames.append("{1}\q{0:04d}.png".format(i, j)) webp_frames.append(Image.open("{1}\q{0:04d}.png".format(i, j))) s = s + " {1}\q{0:04d}.png".format(i, j) max = 211 size = 81 * 15 new_im = Image.new('RGBA', (size, size)) c = 0 for i in range(0, size, 81): for k in range(0, size, 81): new_im.paste(webp_frames[c], (i, k)) c+=1 if c == max: break else: continueДумаю стоит реализовать оба варианта и дать пользователю выбрать.
Для SVG еще нужно держать свой сайт который будет их отдавать, даже если он будет за Cloudflare с кэшированием, все равно это еще одно звено. Если ты забьешь на его поддержу то все ушкошифры отовсюду пропадут.
У меня нет денег на хост. пока всё будет делать мой комп. Если ушифр окажется популярным — открою пожертвования и буду на них оплачивать облачный сервак.
Верхний твой, нижний фш
К чему было столько мучений со сжатием?
просто скинь мне его. не скриншотом, а именно полученный png файл.
Спойлер
Ленивый ты, фш открыть не хочешь)
Да не, есть таки способ: PNGOut умеет сохранять полупрозрачность для индексированных изображений, и это валидная фича, отображаться везде будет правильно.
написано что захешировано
попробуй у себя открыть. должно тоже хешироваться.
не, похоже что не работает. ушифратор.рф/static/ex3.svg
Sasha-Flyer на надо править один и тот же файл! Делай версии!
А еще у тебя явно есть повторяющиеся кадры
Спойлер