Animate QuadGrid


#1

Hello!

I found @quark’s QuadGrid on the old forum (https://forum.processing.org/two/discussion/11549/texture-on-a-deformed-plane-is-bent-how-do-i-fix-it) and it was exactly what I was looking for but now I’d like to animate it.

Here’s the example I created with just plain QUAD vertices: https://www.dropbox.com/s/gukwz9z4r80orlm/2019walkintest_short.mp4?dl=0

The distortion isn’t a real issue with this image but once you have straight lines it’s kinda ugly. QuadGrid fixes that but I’m not sure how to get the same animation (I change the UV coordinates in the example above): https://www.dropbox.com/s/5pfe6qbiprcx1z2/2019walkintest_quadgrid.mp4?dl=0

Anyone have any ideas? Maybe @quark himself?

Thanks!
Serge


#2

QuadGrid! Wow that’s a blast from the past.

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

  1. modifying the texture (uv) coordinates
  2. 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.


#3

That sounds great. I’ve poked around in the QuadGrid code but it’s always a bit of challenge to dig into someone else’s code, isn’t it? :slight_smile:


#4

Very true, sometimes I find it hard digging into my own :relieved::laughing:


#5

OK just getting my head round what you need.

In both videos you have a reveal, in the first only part of the image is shown in the quad and you do this by modifying the UV coordinates.

In the second the entire image is shown as the quad expands. I assume this is the effect you want to achieve?


#6

Actually, the first video is what I’m trying to achieve with QuadGrid.
The second video is just an example of out-of-the-box QuadGrid.


#7

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


#8

Absolutely


#9

How did you create the left hand side of the imaginary box?


#10

More vertices. It’s basically a fake 3D box type thing.


#11

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.

https://www.dropbox.com/s/9t4bq1qu8o21app/2019walkintest.mp4?dl=0


#12

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.


#13

I kinda like how it feels as if it comes out of the wall (and that’s what the designer was going for).

Do you think it’s possible with your QuadGrid?


#14

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. :grin:


#15

You rock! I’m sending you a private message as well.


#16

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);
	}

#17

That looks awesome! Ship it! :smiley:
Can you send me the updated QuadGrid?

You rock! :slight_smile:


#18

The original does start out flat. It’s subtle so I think I can make this work :slight_smile:


#19

I have not documented the QuadGrid class yet but there are a couple of things you might want before I release it.

  1. 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
  2. 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?

#20
  1. That would be fantastic
  2. That would be fantastic

:slight_smile:

Really appreciate your help on this! Could not finish this project without QuadGrid and your help!