How to create a grid of images?

coyne's picture

Hi!

Im wondering if anyone may point me in the right directions on how to create a grid of different images.

I want 4 times 4 streching over the screen with an aspect radio of 4:3.

I know this can be done manually just positioning the different sprites but i want to be able to do that with an iterator or something similar.

like in the attached pic down below but different images instead of numbers.

Any ideas?

Kind regards

coyne

PreviewAttachmentSize
grid.png
grid.png5.92 KB

offonoll's picture
Re: How to create a grid of images?

Iteration is your answer. You will need one iter for Y trans and another for X trans. the first variable iter goes to same render sprite. to load pictures, there is a different way. mainly directory scan, you will get a structure, link it to an index structure then to sprite.

if you check on dev compositions folder you will find many samples showing what you need.

good luck

jersmi's picture
Re: How to create a grid of images?

I like the javascript in the developer example, "Image Texturing Properties Grid". Also of note, the image pre-loader in this comp comes from memo's "carousel.qtz" -- another good example for loading multiple images: http://memo.tv/quartz_composer_3d_carousel_and_loading_images_within_an_...

PreviewAttachmentSize
Grid of Images.qtz21.02 KB

jersmi's picture
Re: How to create a grid of images?

Ps. if anyone can advise, I'd like to know how to create controlled "chasing" colors within the grid, so, say, color could sweep across a grid, or travel up and down rows, or start in an area surrounded by another color and travel in precise ways throughout the grid. The dev example "Random Nested Iterarator" has a bit of this going on.

coyne's picture
Re: How to create a grid of images?

Hi jersmi!

My problem lies in that i get 2 different iterations if i do it that way and the iterator variables index number only refers to each one of them so i dont realize how to load the images consequently because they appear after each other in one structure.

Regarding your question about how to do sweeps and do other animations on a grid i thought about that as well and think i would you could use the kineme structure maker to create a structure that controls the alpha of the grid.

I Attached a rather innefficient way of creating the math for a structure but i think you get my point. You could probably do this a bit fancier with the demultiplexer connected to the structure maker and iterate through the inputs.

PreviewAttachmentSize
CubeGrid3.qtz28.73 KB

jersmi's picture
Re: How to create a grid of images?

coyne wrote:
My problem lies in that i get 2 different iterations if i do it that way and the iterator variables index number only refers to each one of them so i dont realize how to load the images consequently because they appear after each other in one structure.
What do you mean by this?

In the example I posted I used the % operator inside the iterator to fill in the grid cells when there are less images in the directory than cells. If amount of directory images is the same as number of cells then no image repeats.

jersmi's picture
Re: How to create a grid of images?

Oh and thanks for the example with the structure maker.

coyne's picture
Re: How to create a grid of images?

Hi Jersmi!

Sorry about that i totally missed that example and went directly to memos page. : )

thanks a lot.

regards Coyne

dim11's picture
Re: How to create a grid of images?

Awesome, love the idea of this! This would be great on, say, web image galleries, letting people decide what size they want to view the thumbnails in. How would one go about integrating with with the jquery Cookie plugin, so it remembers settings site-wide? That would totally make this kick-ass