Как сделать бесконечный рисунок
Перейти к содержимому

Как сделать бесконечный рисунок

  • автор:

Создаём 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. Если что-то непонятно, спрашивайте.
Если есть желающие художники, пишите в личку, могу побыть координатором, сделаем хабразумквилт :).

Если кто-нибудь знает ещё произведения в этом жанре, присылайте ссылки.

Сайт дня: Zoomquilt — о картинках с бесконечным разрешением

«. и катится колобок дальше» (с) народная сказка.

Двадцатилетие DOOM и уругвайский лигалайз в один день! Понятно, что сегодняшний сайт дня должен быть пропитан безумием чуть более, чем полностью. Пусть это будет арт-проект Zoomquilt. Этот сайт просто прекрасен. Он сюрреалистичнее, чем пейзажи от idSoftware и глубже, чем скважины Borjomi. Кроме контента на сайте Zoomquilt нет практически ничего, а сам контент сделан очень крутыми художниками, причём без всякого флеша. Эх, скриншотом весь кайф не передать.

Главная страница сайта Zoomquilt

Суть в том, что на сайте Zoomquilt отображается симпатичная картина, у которой довольно быстро выкручивается зум. И вот, когда пользователь уже ждёт появления грубых квадратов-пикселей, на увеличенном участке картины появляются новые детали и так «до бесконечности». Естественно, в психоделичности сюжетов художники себя ограничивать не стали.

Практика показала, что люди любят изображения в высоком разрешении. Для них даже существуют специализированные хостинги, такие как Closr.it или Zoom.it. Однако та же практика показывает, что люди выкручивают зум далеко не на каждом участке изображения, а только на самых интересных. Огромные мегапиксели пропадают зря. Разработчики Zoomquilt эту фишки просекли и сделали всё правильно: одни части изображения с увеличением масштаба скрываются за границами экрана, а другие — раскрываются в бесконечных подробностях. Может быть это и не новое направление в искусстве, но уж точно новый формат. Вполне возможно, что слово Zoomquilt станет названием нового жанра. По крайней мере, в сети уже можно найти проект Zoomquilt2, на котором всё то же самое, только флеш и картинки другие:

Бесконечная картинка: в ней можно залипнуть надолго (и заработать!)

Бесконечная картинка: в ней можно залипнуть надолго (и заработать!)

Никита Шевцев Редакция «Текстерры»

По Twitter и другим соцсетям вовсю гуляет «залипательное» видео, на котором мужчина, увеличивая на своем планшете изображение, открывает в нем все новые и новые картины, скрытые в мельчайших деталях. Разбираемся, как устроено это изображение и как его автор заработал на своем творчестве.

Читайте также
13 фев 2024

Показываем на примерах, как надо и как не надо: понятно даже котику!

29 июн 2023

Из них 6 – полностью бесплатные. Эти сервисы подойдут для работы, обучения и повседневного использования.

6 фев 2024

В России не пошло детское питание Bledina. Китайская лапша «Доширак» раньше называлась «Досирак». Крем Dermo-Expertise рождает у русского человека нехорошие ассоциации.

Это вирусное изображение сделал художник Лукас Васканж. Произведение искусства начинается за пределами рабочего стола художника, но художник начинает увеличивать изображение, и в итоге мы обнаруживаем на нем семь слоев. Зрелище завораживающее: неудивительно, что видео с картиной за два дня посмотрели пять миллионов раз.

Вектор против пикселей

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

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

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

Читайте также
О форматах изображений – простыми словами для неспециалистов

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

Делаем блоги для бизнеса и бренд-медиа

Картина в картине

Векторная графика позволяет творить и не такие чудеса, как представленная на видео выше картинка. Весь секрет в том, чтобы начинать рисовать с последнего слоя. Когда он нарисован, изображение можно отдалить без потери качества и вписать его в гораздо более масштабную картину.

Если вас, как и нас, заворожила красота этой «бесконечной картины», то вот еще несколько примеров снимков и рисунков, при приближении которых открываются новые грани глубины.

Млечный Путь от Европейского космического агентства

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

Бесконечная картинка: в ней можно залипнуть надолго (и заработать!)

Картины в картине

Картина Лукаса Васканжа, конечно, поражает красочностью, однако произведение автора под ником @alirezashahbazi.art еще круче — в разных частях одного и того же изображения можно найти сразу несколько картин, в каждой из которых тоже есть картина.

Самый детальный снимок Нью-Йорка

Еще один пример бесконечных картин – съемки с невероятным разрешением. Да, это не вектор, но все равно поражает. Признаюсь, мой MacBook немного не выдержал этого снимка — через минуту просмотра начал сильно нагреваться. К счастью, есть хорошее видео, которые показывает все поразительные возможности этого инструмента.

Как можно использовать векторные изображения для заработка

Создание любого рисунка требует большого труда и колоссальных временных затрат. А теперь умножьте это в десять раз и получите количество усилий, которые затрачивают художники на создание векторных изображений с несколькими «подслоями». Конечно, усилия эти должны окупаться.

Автор вирусного ролика Лукас Васканж, например, с помощью вирусного изображения привлек внимание к своему творчеству.

«Оригинальное видео моих работ здесь.Оставайтесь на связи, чтобы открыть для себя еще больше бесконечных историй!», — написал он в своем посте Twitter, к которому и прикрепил ролик.

У художника есть галерея на сайте InPrint, где он продает произведения. Купить картины можно по цене от 15 до 80 долларов в зависимости от их размера. Также можно заказать чехол для телефона с выбранным изображением по цене в 35 долларов. Это дешевле фирменных чехлов Apple или Samsung, но при этом намного красивее.

Реклама в виде вирусного видео сильно увеличила популярность Лукаса Васканжа — сегодня на его аккаунте Twitter 94 тысячи подписчиков и, по данным сервиса Social Blade, почти 61 тысяча из них пришла с 20 июля.

Один из вариантов дополнительного заработка на таких изображениях — продажа NFT. Тут векторные изображения смотрятся выигрышнее обычных растровых, ведь их можно не просто скачать и наслаждаться тем, что обладаешь одной из тысяч картинок обезьян, а приближать и находить в рисунке все новые и новые скрытые грани.

Сайт с бесконечным увеличением картинки

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

Команда арт-проекта Zoomquilt во главе с Николаусом Баумгартеном создала сайт, на котором изначальное изображение переносит тебя в следующие картины посредством мелких деталей. Фантастические пейзажи, необычные персонажи и немного психоделики — вот что можно увидеть во время приключения. Также художники создали более хардкорную версию — Zoomquilt2. В ней технический принцип остается тем же, но появляются новые герои: зомби, мутанты, скелеты и мифические существа.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *