
Gallery interface coded in processing
2 years ago
Update: It turned out all i needed to do was to 1. Use the OpenGL option and 2. move the the variable declarations out of the draw method to make things go faster - yeah I know, I'm smaaart ;). New version uses a circle in 3d (polar coordinates). Added reflection. Check it out: http://vimeo.com/235542
----
A prototype of an interface to browse picture galleries. I coded this in processing. Unfortunately the animation is extremely slow, so i'll have to switch to Flash (ActionScript) or Java(Applets). More on this on my website mmenchu.net.
PImage[] images;
int numImages;
int[] xcoord;
int[] ycoord;
int[] zcoord;
int frameWidth = 1152;
int frameHeight = 1024;
int currentIndex = 0;
int startingCurrentIndex = 0;
int bottomEllipse = 0;
int imagewidth = 150;
int imageheight = 100;
int a = (int)(frameWidth/2.05);
int b = (int)(frameHeight/3.3);
int translationX =(int)(a);
int translationY = (int)(b/0.95) - 100;
int translationZ =-500;
void setup()
{
size(frameWidth,frameHeight,P3D);
frameRate(30);
numImages = 25; // This needs be loaded form the xml
images = new PImage[numImages];
xcoord = new int[4*a];
ycoord = new int[4*a];
// precompute all the coordinates
// x^2/a^2 + y^2/b^2 = 1
// y^2/b^2 = 1 - x^2/a^2
// y^2 = (1 - x^2/a^2)*b^2
// y = Sqrt((1 - x^2/a^2)*b^2)
for(int i=0; i < a; i++){
xcoord[i] = translationX + (a - i);
xcoord[1*a - 1 + i] = translationX - i;
xcoord[2*a - 1 + i] = translationX - a + i;
xcoord[3*a - 1 + i] = translationX + i;
int ycoordinate = (int)(sqrt((1 - (sq(i) / sq(a))) * sq(b)));
ycoord[a - i] = translationY + ycoordinate;
ycoord[1*a + i] = translationY + ycoordinate;
ycoord[(3*a - 1) - i] = translationY - ycoordinate;
ycoord[3*a + i] = translationY - ycoordinate;
}
for(int i=0; i < numImages; i++){
images[i] = loadImage("http://www.mmenchu.net/blog/files/renamed/" + (i+1) + ".jpg");
}
}
void draw()
{
background(0,0,0);
currentIndex = startingCurrentIndex;
startingCurrentIndex += 2;
double depthFactor = 3;
int zcoord = 0;
int deltaIndex = (int)(a*4.5 / numImages);
int variance = 10;
int varianceX = 20;
for(int i=0; i < numImages; i++){
//point(xcoord[currentIndex],ycoord[currentIndex],0);
noStroke();
beginShape();
texture(images[i]);
if (currentIndex >= (4*a))
currentIndex = deltaIndex;
// if (abs(translationY - ycoord[currentIndex]) < variance)
// zcoord = translationZ;
// else
zcoord = translationZ - (int)(depthFactor*(translationY - ycoord[currentIndex]));
vertex(xcoord[currentIndex], ycoord[currentIndex],zcoord, 0,0);
vertex(xcoord[currentIndex] + imagewidth, ycoord[currentIndex],zcoord,images[i].width,0);
vertex(xcoord[currentIndex] + imagewidth, ycoord[currentIndex] + imageheight,zcoord,images[i].width,images[i].height);
vertex(xcoord[currentIndex], ycoord[currentIndex] + imageheight, zcoord,0,images[i].height);
endShape();
//if (((currentIndex % a) < varianceX) && (ycoord[currentIndex] < translationY))
// currentIndex += (int)(deltaIndex*0.95);
//else
currentIndex += deltaIndex;
}
}
I was inspired by http://www.morrise.com/youtubesearch.html
----
A prototype of an interface to browse picture galleries. I coded this in processing. Unfortunately the animation is extremely slow, so i'll have to switch to Flash (ActionScript) or Java(Applets). More on this on my website mmenchu.net.
PImage[] images;
int numImages;
int[] xcoord;
int[] ycoord;
int[] zcoord;
int frameWidth = 1152;
int frameHeight = 1024;
int currentIndex = 0;
int startingCurrentIndex = 0;
int bottomEllipse = 0;
int imagewidth = 150;
int imageheight = 100;
int a = (int)(frameWidth/2.05);
int b = (int)(frameHeight/3.3);
int translationX =(int)(a);
int translationY = (int)(b/0.95) - 100;
int translationZ =-500;
void setup()
{
size(frameWidth,frameHeight,P3D);
frameRate(30);
numImages = 25; // This needs be loaded form the xml
images = new PImage[numImages];
xcoord = new int[4*a];
ycoord = new int[4*a];
// precompute all the coordinates
// x^2/a^2 + y^2/b^2 = 1
// y^2/b^2 = 1 - x^2/a^2
// y^2 = (1 - x^2/a^2)*b^2
// y = Sqrt((1 - x^2/a^2)*b^2)
for(int i=0; i < a; i++){
xcoord[i] = translationX + (a - i);
xcoord[1*a - 1 + i] = translationX - i;
xcoord[2*a - 1 + i] = translationX - a + i;
xcoord[3*a - 1 + i] = translationX + i;
int ycoordinate = (int)(sqrt((1 - (sq(i) / sq(a))) * sq(b)));
ycoord[a - i] = translationY + ycoordinate;
ycoord[1*a + i] = translationY + ycoordinate;
ycoord[(3*a - 1) - i] = translationY - ycoordinate;
ycoord[3*a + i] = translationY - ycoordinate;
}
for(int i=0; i < numImages; i++){
images[i] = loadImage("http://www.mmenchu.net/blog/files/renamed/" + (i+1) + ".jpg");
}
}
void draw()
{
background(0,0,0);
currentIndex = startingCurrentIndex;
startingCurrentIndex += 2;
double depthFactor = 3;
int zcoord = 0;
int deltaIndex = (int)(a*4.5 / numImages);
int variance = 10;
int varianceX = 20;
for(int i=0; i < numImages; i++){
//point(xcoord[currentIndex],ycoord[currentIndex],0);
noStroke();
beginShape();
texture(images[i]);
if (currentIndex >= (4*a))
currentIndex = deltaIndex;
// if (abs(translationY - ycoord[currentIndex]) < variance)
// zcoord = translationZ;
// else
zcoord = translationZ - (int)(depthFactor*(translationY - ycoord[currentIndex]));
vertex(xcoord[currentIndex], ycoord[currentIndex],zcoord, 0,0);
vertex(xcoord[currentIndex] + imagewidth, ycoord[currentIndex],zcoord,images[i].width,0);
vertex(xcoord[currentIndex] + imagewidth, ycoord[currentIndex] + imageheight,zcoord,images[i].width,images[i].height);
vertex(xcoord[currentIndex], ycoord[currentIndex] + imageheight, zcoord,0,images[i].height);
endShape();
//if (((currentIndex % a) < varianceX) && (ycoord[currentIndex] < translationY))
// currentIndex += (int)(deltaIndex*0.95);
//else
currentIndex += deltaIndex;
}
}
I was inspired by http://www.morrise.com/youtubesearch.html
-
Vimeo: About / Blog / Developers / Jobs / Community Guidelines / Community Forums / Help Center / Site Map / Merchandise
/ Get Vimeo

Previous Week