Бесконечная картинка: в ней можно залипнуть надолго (и заработать!)
Никита Шевцев Редакция «Текстерры»
По Twitter и другим соцсетям вовсю гуляет «залипательное» видео, на котором мужчина, увеличивая на своем планшете изображение, открывает в нем все новые и новые картины, скрытые в мельчайших деталях. Разбираемся, как устроено это изображение и как его автор заработал на своем творчестве.
Читайте также
13 фев 2024
Показываем на примерах, как надо и как не надо: понятно даже котику!
25 мар 2024
CTA, call-to-action, он же призыв к действию – элемент публикации, который мотивирует читателя на определенный шаг.
29 июн 2023
Из них 6 – полностью бесплатные. Эти сервисы подойдут для работы, обучения и повседневного использования.
Это вирусное изображение сделал художник Лукас Васканж. Произведение искусства начинается за пределами рабочего стола художника, но художник начинает увеличивать изображение, и в итоге мы обнаруживаем на нем семь слоев. Зрелище завораживающее: неудивительно, что видео с картиной за два дня посмотрели пять миллионов раз.
Вектор против пикселей
Наверняка вам знакома эта боль: при увеличении масштаба любого фото мы в конечном итоге увидим пиксели. С этим ничего не поделаешь, если мы имеем дело с фотографией — у любого фотоаппарата есть предел разрешающей способности, как и у компьютера, обрабатывающего снимок.
Но если создавать цифровые картины, тут простора для творчества намного больше. Помимо классической растровой графики можно использовать инструменты векторной графики. Они отличаются тем, что вне зависимости от степени приближения могут сохранять четкость. Чтобы понять, как это работает, немного погрузимся в математику.
Начнем с того, что все элементы, которые мы используем для рисования, можно представить математическими фигурами — прямая, окружность, кривые различных форм и размеров и так далее. А любую математическую фигуру можно описать уравнением с набором параметров. В двумерной векторной графике у нас всего две координаты, при помощи которых можно задавать огромное множество различных фигур, подставляя значения координат в нужные уравнения. Это была простая часть.
Читайте также
О форматах изображений – простыми словами для неспециалистов
Компьютеру для построения таких фигур нужно знать лишь пару дополнительных параметров, таких как радиус для окружности (координаты в случае этой фигуры задают ее центр) и опорные точки для кривых Безье (именно они используются для создания волнистых линий в векторе). При рисовании компьютер подбирает самое подходящее уравнение, описывающее тот элемент, который вы нарисовали, и строит соответствующую ему фигуру. В результате мы получаем не просто рисунок из пикселей, а совокупность фигур, каждая из которых описывается своим уравнением. При приближении такой рисунок не теряет четкости, ведь компьютер просто пересчитывает масштаб каждой фигуры, исходя из уравнений и степени приближения.
Новое приложение: как создать «бесконечные» фотографии
Теперь не нужно искать в интернете картинки. Вы можете их создать с помощью новой программы от Microsoft.
Компания Microsoft представила новое приложение под названием Microsoft Designer. Оно позволяет создавать картинки с помощью двух нейросетей.
В Microsoft Designer интегрировано сразу две нейросети: DALL-E 2 и Stable Diffusion. Прямо в программе можно написать текст, на основе которого программа представит картинку по вашему запросу.
Эти изображения можно использовать в презентациях PowerPoint, для логотипов или открыток. Так вы получаете бесконечное множество новых фотографий, которых ни у кого нет.
Работу Microsoft Designer показали на видео с тортиками:
Доступность
Пока Microsoft Designer находится на стадии бета-тестирования. Чтобы опробовать ее, нужно подать специальную заявку. После испытаний программа выйдет в пакет Microsoft 365 и будет доступна для покупки всем желающим. Ранее Microsoft на той же презентации показала гибридный планшет Surface Pro 9 и другие новинки.
Ранее нейросеть DALL-E 2 дорисовала Моне Лизе ноги. Посмотрите, как из-за действий нейросети преобразилась знаменитая картина и другие шедевры живописи:
Бесконечный рисунок В Instagram
Есть много видео как создавать бесконечную ленту, но в процессе оформления бесконечной космической картины «Кассиопея» мне не подошел ни один из них и я создала свой способ (возможно у кого-то и был такой, т.к. идеи витают в воздухе, но мне не встретился).
Видео, которые я мельком посмотрела, хороши для создания ЛЕНТЫ (несложной разбивки простык картинок на квадратики ленты), но не для создания именно БОЛЬШОЙ ЦЕЛОСТНОЙ КАРТИНЫ. В этом случае они не позволяют ни идеально состыковать, ни увидеть всю картину в процессе рисования.
Расскажу про свой метод подробнее, возможно кого-то вдохновит наш “эпический проект” и он захочет попробовать создать свою бесконечную картину.
Перемещаю квадратик в нижний правый угол.
Это будет наш первый пост в инстаграм и начало бесконечной картины.
ШАГ 2.
Создаю 3 дубля слоя и размещаю в горизонтальный ряд (4 квадрата).
В последних версиях Ps подогнать области ровно к друг другу, чтобы не было зазора (это очень важно, т.к. лишний миллиметр даст вам искажение картины), — очень просто! При приближении квадрадов у вас будут появляться быстрые направляющие, подсказывающие вам что вы идеально состыковали 2 области.
Важно! Слои не сводим! Вы можете их назвать «1ряд1», «1ряд2», «1ряд3» и «1ряд4». Чтобы вам потом проще было найти быстро нужный квадратик.
ШАГ 3.
Скопируйте весь ряд и разместите его выше (также идеально стыкуя между собой квадраты, чтобы не было зазоров).
Переименуйте слои соотвественно в «2ряд1» и т.д.
И таким же образом создайте ряд 3 и ряд 4.
ШАГ 4.
Итак, мы имеем 4 ряда по 4 квадрата. А ЛЕНТА Instagram 3 квадрата в ряду! Но именно такое размещение позволит вам контролировать изображение в процессе рисования!
Внимание на нумерацию! Вы видите, что квадраты крайние левые имеют тот же номер, что квадраты крайние правые рядом выше? Потому что это одна и та же картинка.
Помещая ее справа и слева, вы лучшим образом контролируете целостность своей картины. Т.к. ЛЕНТА в Instagram “ездит” в зависимости от количества загруженных картинок. Если вы загрузите 12 фрагментов, последний ряд будет из картинок 12, 11 и 10. Если вы загрузите 13 фрагментов — в последнем ряду будет 13, 12 и 11. А 10 переместится в ряд ниже. Т.к. как только вы что-то загрузите в ленту, ряды будут “ездить”. Но при этом целостность картины никак не должна пострадать, вне зависимости от того где будет фрагмент 10: крайний слева, в центре или крайний справа.
ШАГ 5
И теперь все просто. Вы создаете свою картину, начиная с фрагмента 1 и дальше влево и вверх.
Я не зря оставила квадратики на отдельных слоях. Потому что они помогают мне выделять без какой-либо потери пикселей сегмент изображения ровно размером 2000х2000 пикселей и не пикселем больше-меньше. Только так моя нога или рука идеально состыкуются друг с другом в соседних фрагментах, когда я начну копировать фрагмент 4 в первом ряду и переносить его во 2-ой ряд.
Чтобы выделить квадрат, я нахожу слой с нужным мне квадратом и использую волшебную палочку, чтобы выделить его полностью! Создав квадратное выделение, перехожу на слой с моей картинкой и копирую изображение в этом квадрате, вставляю и перемещаю в другой ряд, продолжая бесконечную картину справа и слева.
А теперь как именно я работала с этой картинкой.
- Сначала я расставила персонажей и примерно накидала идею, как они будут взаимодействовать. 1-ая Кассиопея стоит ногой на планете и держит в руках планету, которая омывается волной, переходящей в ткань в руках Кассиопеи с Сатурном на голове. А 2-ая Кассиопея протыкает пальцем волну снизу.
- После этого я разрезала картинку (кратно квадратикам) и раздала ее 8-ми художникам курса (каждому свою модель). И каждый, не сдвигая положение модели и ключевых планет, начал создавать свою картину. Кто-то добавил Сатурн в виде шлема на голову, кто-то волосы, овивающие планеты, выбрали свой фон и цвет для своей Кассиопеи. И вернул мне почти готовые картинки в том же размере и кратно квадратикам.
- Я их легко вставила обратно в общую бесконечную картинку, ровно на свои места (в новых версиях фотошопа, я уже говорила, сделать это очень легко, они буквально примагничиваются друг к другу и подсказывают вам быстрыми направляющими, что вы идеально подогнали квадраты с соседними снизу и сбоку).
- И начала создавать связки между разными по цвету Кассиопеями. Я двигалась справа налево с нижнего ряда (от 1 фрагмента) и когда крайний 4-ый квадрат в 1-м ряду был проработан (четко связан с квадратом 3 справа, прорисованы все связи и переходы), я выделила квадрат 4, скопировала его, вставила и переместила в начало 2-ого ряда.
- Далее я прорисовала переход от 4-го к 5 квадрату и от 4-го к 1-му.
- В процессе квадрат 4 во 2-ом ряду изменялся слева и сверху. Тогда я снова выделила его, скопировала и переместила опять в 1-ый ряд. Таким образом мои крайние квадраты всегда были СТРОГО ИДЕНТИЧНЫ!
И теперь мне не принципиально, как сдвинется моя картинка в ленте, она все равно будет целостная.
Как выглядит проект полностью можно увидеить в моем Instagram . Он состоит из 29 фрагментов, выполненных 9-ю художниками. Для его создания были использованы фото моделей Евгения Лозы (Израиль) и много референсов: снимки спутника хаббл, морская пена, акриловые абстракции фрагменты, использованы различные концептуальные кисти. Мы не ограничивали художников по цвету, поэтому проект получился таким разноцветным, многоголосым. Потребовались героические усилия не загнать всё и всех в рамки, а связать не связываемое.
В любом случае это очень интересный опыт и эксперимент, советую всем хоть немного попробовать себя в подобном большом проекте. Это учит мыслить стратегически, выходить за рамки шаблонов, держать себя в руках и планировать (пока картина не закончена в инсту ничего спонтанно не поместишь, типа что поел или какая нынче погода и носочки на тебе). И это здорово! Чувствуешь, что ты ткешь большой-большой ковер и контролируешь всё в его узоре! Ведь так можно вывести себя на новый уровень? Попробуйте!
Создаём Zoomquilt
Захотелось продолжить серию постов о всяких интересных автореферентных штуковинах и решил я написать о жанре Zoomquilt. Сделал поиск, увидел, что один пост на Хабре уже есть. Подумал, подумал и решил, что пост я всё равно напишу, но он будет технический, о технологии создания Zoomquilt.
Для начала собственно о жанре. Тут проще показать чем рассказывать.
Приближаемся к картинке и вместо того, чтобы в какой-то момент увидеть пиксели величиной с кулак, видим следующую картинку, повторяем процедуру многократно (на самом деле, выглядит это как один вполне себе плавный процесс и если художники хорошо поработали, то «стыков» мы вообще не увидим) и в итоге приходим к первоначальной картинке. В общем мультиквайны, только для художников.
А как такая штука делается? Конечно можно нарисовать это всё покадрово, более того, некоторые талантливые аниматоры вполне бы с этим справились. Но практически во всех существующих произведениях этого жанра указано, что это плоды коллективного творчества. Обычно есть коллектив художников, координатор проекта и программист, который собственно собирает это всё вместе и пишет интерфейс.
Дальше о технологии создания. Под катом много картинок.
Стал я искать информацию по технологии создания и мне повезло. Наткнулся на исходные изображения из которых состоял самый первый Zoomquilt. Вот одно из них:
Каждый «исходник» представляет собой изображение 1024*768 в середине которого находится чёрный прямоугольник размером 512*384.
Для начала разберёмся со сборкой zoomquilt из этих «исходников». Превратим картинки в полноценные кадры будущей анимации.
Понятно, что чёрный прямоугольник в центре изображения должен быть заменен следующим в списке изображением (для последнего изображения следующим является первое), уменьшенным до соответствующих размеров, причём перед тем, как заменять, нужно со следующим изображением проделать ту же процедуру и т.д. Пахнет это всё бесконечной рекурсией без условия останова, но к счастью, изображения дискретны и нарисовать что-либо размером меньше пикселя невозможно. Чёрный прямоугольник в центре картины будет уменьшаться, пока совсем не исчезнет и в этот момент замены можно прекратить.
Из полученных кадров конечно можно собрать анимацию
Но она будет прерывистой, т.к. в ней участвуют только ключевые кадры
Для каждого ключевого кадра можно создать при помощи приближения несколько промежуточных.
Окончательный вариант получился слишком тяжёлым для того, чтобы вставить его в статью, впрочем он мало отличается от оригинального ролика.
Это всё замечательно, собирать из готового мы уже умеем, но «исходники» кто-то должен нарисовать, причём так, чтобы все переходы были настолько плавными, чтобы не было понятно, где заканчивается одна картинка и начинается другая.
А происходит всё, насколько я понимаю, так:
Сначала координатор проекта даёт одному или нескольким художникам следующее изображение:
Художники должны заполнить всю зелёную зону и не должны трогать чёрную (точнее трогать они её могут, но всё, что они там нарисуют не будет учитываться при сборке). Затем, когда художники закончат работу, каждую из картин можно передать двум художникам. Один получает картину в таком виде:
Обратите внимание, что размеры зелёных прямоугольников одинаковые на обеих картинах, ведь именно содержимое этого самого прямоугольника художник сдаёт координатору (ну или скорее координатор вырезает нужную часть из присланой картины).
Когда наберётся достаточное количество картин (минимум — 2, максимум не ограничен), координатор выдаст нескольким (вероятно самым сильным в проекте) художникам (их число равно числу художников, получивших в начале работы пустые картины) картины типа этой:
На этом круг замыкается, уроборос тихо переваривает хвост, а мы восторженно смотрим на очередное произведение.
Вот код, который я написал для этой статьи, писалось всё минут сорок на коленке, так что если кто-нибудь напишет по-человечески, с удовольствием и благодарностью вставлю сюда.
import PIL from PIL import Image from images2gif import writeGif X,Y = 1024,768 IMAGES_NUM = 46 def render_images(raw_images): cur_index=0 count = 0 while True: count+=1 if count == 100: break prev_index = cur_index - 1 if prev_index == -1: prev_index = len(raw_images)-1 cur_image = raw_images[cur_index] prev_image = raw_images[prev_index] prev_image.paste(cur_image.resize((X/2,Y/2)),(X/4,Y/4)) cur_index = prev_index def before_image(im): im1=Image.new("RGB",(X,Y),(0,255,0)) im1.paste(im.resize((X/2,Y/2)),(X/4,Y/4)) return im1 def after_image(im): im1 = im.copy() im1=im1.resize((X*2,Y*2)) im1.paste(new_image(),(X/2,Y/2)) return im1 def between_image(im1,im2): im = im1.copy() im=im.resize((X*2,Y*2)) im.paste(before_image(im2),(X/2,Y/2)) return im def new_image(): im1=Image.new("RGB",(X,Y),(0,255,0)) im1.paste(Image.new("RGB",(X/2,Y/2),(0,0,0)),(X/4,Y/4)) return im1 def between_frames(key_frame, number_of_frames): step_x = X/4/number_of_frames step_y = Y/4/number_of_frames l=[] for i in xrange(1,number_of_frames+1): x=step_x*i y=step_y*i l.append(key_frame.crop((x,y,x+(X-2*x),y+(Y-2*y))).resize((X,Y))) return l def crop_image(im): im1=im.copy() x,y=im.size black=Image.new("RGB",(X/2,Y/2),(0,0,0)),(X/4,Y/4) if x==X: im1.paste(black) elif x==X*2: im1=im1.crop((X/2,Y/2,X/2+X,Y/2+Y)) im1.paste(black) return im1 Здесь есть все необходимые функции для создания своего Zoomquilt. Если что-то непонятно, спрашивайте.
Если есть желающие художники, пишите в личку, могу побыть координатором, сделаем хабразумквилт :).
Если кто-нибудь знает ещё произведения в этом жанре, присылайте ссылки.