Create Zoomquilt
I wanted to continue a series of posts about all sorts of interesting self-referring gizmos, and I decided to write about the Zoomquilt genre. I did a search, I saw that there is already one post on Habré. I thought, thought and decided that I would write a post anyway, but it will be technical, about the technology of creating Zoomquilt.
To begin with, actually about the genre. It’s easier to show than to tell.
zoomquilt.org
zoomquilt2.madmindworx.com/zoomquilt2.swf
www.syfy.com/tinman/oz
www.deviantart.com/art/kopfsalat-digital-edition-30069104
We approach the picture and instead of at some point see pixels the size of a fist, we see the next picture, repeat the procedure many times (in fact, it looks like one quite smooth process and if the artists did a good job, then we’ll “join” we don’t see at all) and in the end we come to the original picture. In general, multiquines, only for artists.
And how is such a thing done? Of course, you can draw it all frame by frame, moreover, some talented animators would have completely dealt with this. But almost all existing works of this genre indicate that these are the fruits of collective creativity. Usually there is a team of artists, a project coordinator and a programmer who actually puts it all together and writes an interface.
Further about the technology of creation. Under the cut a lot of pictures.
I began to look for information on the technology of creation and I was lucky. I came across the source images of which the very first Zoomquilt consisted. Here is one of them:
Each "source" is an image of 1024 * 768 in the middle of which is a black rectangle 512 * 384 in size.
First, let's figure out the zoomquilt assembly from these “sources”. Let's turn pictures into full frames of future animation.
It is clear that the black rectangle in the center of the image should be replaced by the next image in the list (for the last image the next is the first), reduced to the appropriate size, and before replacing, you need to do the same procedure with the next image, etc. It all smells like infinite recursion without a stop condition, but fortunately, the images are discrete and it is impossible to draw anything smaller than a pixel. The black rectangle in the center of the picture will decrease until it disappears completely and at this moment the replacement can be stopped.
Of course, you can collect animation from the received frames.
But it will be intermittent, because only key frames are involved in it.
For each key frame, several intermediate frames can be created using approximation.
The final version turned out to be too difficult to insert into the article, however it differs little from the original video.
This is all wonderful, we already know how to assemble from the finished one, but someone must draw the "source" so that all the transitions are so smooth that it is not clear where one picture ends and another begins.
And everything happens, as I understand it, this way:
First, the project coordinator gives one or more artists the following image:
Artists should fill the entire green zone and should not touch the black (more precisely, they can touch it, but everything they draw there will not be taken into account when assembly). Then, when the artists finish the work, each of the paintings can be transferred to two artists. One gets the picture in this form:
Another in this:
Please note that the sizes of the green rectangles are the same in both paintings, because it is the contents of this rectangle that the artist hands over to the coordinator (well, or rather, the coordinator cuts out the necessary part from the sent picture).
When enough pictures are collected (minimum 2, maximum unlimited), the coordinator will give out several (probably the strongest in the project) artists (their number is equal to the number of artists who received empty paintings at the beginning of the work) paintings like this:
On this circle closes, ouroboros quietly digests the tail, and we enthusiastically look at the next piece.
Here is the code that I wrote for this article, it was written all about forty minutes on the knee, so if someone writes in a human way, I will insert it here with pleasure and gratitude.
There are all the necessary functions to create your own Zoomquilt. If something is not clear, ask.
If there are artists who wish, write in a personal, I can be a coordinator, we will make a hubrazmvilt :).
If anyone knows more works in this genre, send links.
Thanks for attention.
To begin with, actually about the genre. It’s easier to show than to tell.
zoomquilt.org
zoomquilt2.madmindworx.com/zoomquilt2.swf
www.syfy.com/tinman/oz
www.deviantart.com/art/kopfsalat-digital-edition-30069104
We approach the picture and instead of at some point see pixels the size of a fist, we see the next picture, repeat the procedure many times (in fact, it looks like one quite smooth process and if the artists did a good job, then we’ll “join” we don’t see at all) and in the end we come to the original picture. In general, multiquines, only for artists.
And how is such a thing done? Of course, you can draw it all frame by frame, moreover, some talented animators would have completely dealt with this. But almost all existing works of this genre indicate that these are the fruits of collective creativity. Usually there is a team of artists, a project coordinator and a programmer who actually puts it all together and writes an interface.
Further about the technology of creation. Under the cut a lot of pictures.
I began to look for information on the technology of creation and I was lucky. I came across the source images of which the very first Zoomquilt consisted. Here is one of them:
Each "source" is an image of 1024 * 768 in the middle of which is a black rectangle 512 * 384 in size.
First, let's figure out the zoomquilt assembly from these “sources”. Let's turn pictures into full frames of future animation.
It is clear that the black rectangle in the center of the image should be replaced by the next image in the list (for the last image the next is the first), reduced to the appropriate size, and before replacing, you need to do the same procedure with the next image, etc. It all smells like infinite recursion without a stop condition, but fortunately, the images are discrete and it is impossible to draw anything smaller than a pixel. The black rectangle in the center of the picture will decrease until it disappears completely and at this moment the replacement can be stopped.
Of course, you can collect animation from the received frames.
But it will be intermittent, because only key frames are involved in it.
For each key frame, several intermediate frames can be created using approximation.
The final version turned out to be too difficult to insert into the article, however it differs little from the original video.
This is all wonderful, we already know how to assemble from the finished one, but someone must draw the "source" so that all the transitions are so smooth that it is not clear where one picture ends and another begins.
And everything happens, as I understand it, this way:
First, the project coordinator gives one or more artists the following image:
Artists should fill the entire green zone and should not touch the black (more precisely, they can touch it, but everything they draw there will not be taken into account when assembly). Then, when the artists finish the work, each of the paintings can be transferred to two artists. One gets the picture in this form:
Another in this:
Please note that the sizes of the green rectangles are the same in both paintings, because it is the contents of this rectangle that the artist hands over to the coordinator (well, or rather, the coordinator cuts out the necessary part from the sent picture).
When enough pictures are collected (minimum 2, maximum unlimited), the coordinator will give out several (probably the strongest in the project) artists (their number is equal to the number of artists who received empty paintings at the beginning of the work) paintings like this:
On this circle closes, ouroboros quietly digests the tail, and we enthusiastically look at the next piece.
Here is the code that I wrote for this article, it was written all about forty minutes on the knee, so if someone writes in a human way, I will insert it here with pleasure and gratitude.
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
There are all the necessary functions to create your own Zoomquilt. If something is not clear, ask.
If there are artists who wish, write in a personal, I can be a coordinator, we will make a hubrazmvilt :).
If anyone knows more works in this genre, send links.
Thanks for attention.