3D image pivot

Programming Questions

azkennedy

in Programming Questions • 2 years ago

I've been using processing for a while but my sketches have always been 2D. This year I've decided I'm going to make our family christmas card electronic, but I'm already stuck trying to implement what I'd like because I havent been able to find any references/tutorials. Essentially what I'm looking to do is have a grid of images and then have the individual images pivot at random times around the images height/2 or width/2 axis. As the images pivot, I'd like them to be flat with a new image on the backside. Can anyone give me any pointers or links as a reference? Thanks so much,

-B

Replies(6)

cedrickie..

Re: 3D image pivot

2 years ago

it might be already enough if you scale them to get the wanted effect.
i made a quick example.
you have to change the rects with images though.

float s;

void setup() {
size(600,400);
smooth();
background(255);

rectMode(CENTER);
}

void draw() {
background(255);

s = sin(frameCount/10.0)*300;

fill(255,0,0);
if(s<0)rect(width/2,height/2,300,s);
fill(0,255,0);
if(s>0)rect(width/2,height/2,300,s);
}

azkennedy

Re: 3D image pivot

2 years ago

Thanks for that. It was always my fallback idea to do that in 2D, but I figured this was a good opportunity to take a look at how to use openGl and program 3 dimensionally. Any one else got any samples/tutorials they could point me to? Thanks again,

-B

kooogy

Re: Re: 3D image pivot

2 years ago

there's not a lot of 3d involved as everything but the twisting piece is on the z=0 plane. (assuming z is in/out and y is up/down)

just rotate the piece in question around a line parallel to the y axis and going through its centre. when it's edge-on change the picture.

azkennedy

Re: 3D image pivot

2 years ago

After a lot of experimenting this evening I got the rotation part working as I had originally hoped. Here is a block of code which will continuously loop an image on the Y axis:

import processing.opengl.*;
PImage pix;
void setup(){
size(640, 480, OPENGL);
//size(640, 480, P3D);
pix = loadImage("Santa.jpg");
textureMode(NORMALIZED);
pix.resize(pix.width/2, pix.height/2);
scale(90);
}
void draw(){
background(127,0,0);
translate(width/2, height/2);
rotateY(frameCount*PI/180);
beginShape();
texture(pix);
vertex(-pix.width/2, -pix.height/2, 0, 0, 0);
vertex( pix.width/2, -pix.height/2, 0, 1, 0);
vertex( pix.width/2, pix.height/2, 0, 1, 1);
vertex(-pix.width/2, pix.height/2, 0, 0, 1);
endShape();
}

I also discovered that if you use P3D with this code you get some really strange warping with the center of the image. I'll post the code to the final project once I'm completely finished if anyone is interested. Thanks,

-B

azkennedy

Re: 3D image pivot

2 years ago

After a lot of experimenting this evening I got the rotation part working as I had originally hoped. Here is a block of code which will continuously loop an image on the Y axis:

import processing.opengl.*;
PImage pix;
void setup(){
size(640, 480, OPENGL);
//size(640, 480, P3D);
pix = loadImage("Santa.jpg");
textureMode(NORMALIZED);
pix.resize(pix.width/2, pix.height/2);
scale(90);
}
void draw(){
background(127,0,0);
translate(width/2, height/2);
rotateY(frameCount*PI/180);
beginShape();
texture(pix);
vertex(-pix.width/2, -pix.height/2, 0, 0, 0);
vertex( pix.width/2, -pix.height/2, 0, 1, 0);
vertex( pix.width/2, pix.height/2, 0, 1, 1);
vertex(-pix.width/2, pix.height/2, 0, 0, 1);
endShape();
}

-B

kooogy

Re: Re: 3D image pivot

2 years ago

P3D texture problem is well known - search the forum and see the 3d textured cube example. use opengl to get around it or cut your objects and textures into smaller pieces.

Top Reply

3D image pivot

Replies(6)

Re: 3D image pivot

Re: 3D image pivot

Re: Re: 3D image pivot

Re: 3D image pivot

Re: 3D image pivot

Re: Re: 3D image pivot

Statistics

Tags

Actions

Related Posts