Unfortunately I am away from my computer at the moment so I can’t view the movie but I like the idea of animating it.
There are two possible animations that could be applied
modifying the texture (uv) coordinates
modifying the corner vertices
both would be fairly simple to implement. It would even be possible to include the animation code in the QuadGrid i.e. a method where you specify the new UV coordinates and the time allowed to go from current state to the new state.
What do you think?
I would not be able to do anything before the weekend.
Can you post the image (i.e. the actual bitmap image not a screen shot) you used in the first animation so I have a better idea of where you started from
Long story short: I was basically asked to recreate this 3D example (from Cinema 4D) in processing to make it dynamically load images from social channels.
The problem with the first approach is that you need to modify both the XY coordinates and the UV coordinates at the same time. The problem here is to synchronize the changes to both sets so that the image appears as if uncovered by a mask. If they are not synchronized then the image may appear to move or stretch/compress as it is uncovered.
Then there is the aesthetic issue. Personally I prefer the second video because it looked like the image was on the side of an enlarging box.
It was later I realised what effect you were trying to achieve and I don’t think it will be as hard as I originally thought. I will have a go this weekend.
Although the maths was fairly straight forward the programming was more challenging. The original QuadGrid class used fairly basic code but the newer version (still in production) is much better for third party use . Have a look at the video below it was created with the following code, I have excluded the QuadGrid code on purpose to emphasize how little is needed from the user.
Anyway I would appreciate your comments and any changes you might want.
Builder builder;
QuadGrid qg;
float t = 0;
float speed = 0.007f;
float dir = 1;
public void setup() {
size(500, 500, P2D);
builder = new QuadGrid.Builder();
PImage img = loadImage("flower.jpeg");
builder.useImage(img).detail(6, 4).staticEdge(50, 30, 50, 450).movingEdge(390, 70, 390, 410);
qg = builder.build();
}
public void draw() {
if(t > 1) {
dir = -1;
t = 1;
}
else if(t < 0 ) {
dir = 1;
t = 0;
}
else {
t += speed * dir;
}
qg.interpolate(t);
background(200, 210, 255);
qg.drawGrid(this);
}
I have not documented the QuadGrid class yet but there are a couple of things you might want before I release it.
do you want me to add the animation as part of the class so you can have a simple one line statement to show / close the quad e.e. qg.animate(0, 1, 500) will open the quad over a period of 500 milliseconds, qg.animate(1, 0, 500) would close it
in the video the grid enlarges slightly as it opens to give the impression it is approaching the viewer. Do you want me to add that feature?