# Animate QuadGrid

**URL:** <https://discourse.processing.org/t/animate-quadgrid/9242>\
**Category:** Libraries\
**Created:** [March 12, 2019, 5:36pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242 "2019-03-12T17:36:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 12, 2019, 5:36pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/1 "2019-03-12T17:36:20Z")

</div>

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](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](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](https://www.dropbox.com/s/5pfe6qbiprcx1z2/2019walkintest_quadgrid.mp4?dl=0)

Anyone have any ideas? Maybe @quark himself?

Thanks!  
Serge

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 13, 2019, 11:58am UTC](https://discourse.processing.org/t/animate-quadgrid/9242/2 "2019-03-13T11:58:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 13, 2019, 4:55pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/3 "2019-03-13T16:55:03Z")

</div>

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? 🙂

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 14, 2019, 12:28pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/4 "2019-03-14T12:28:44Z")

</div>

> [@sjespers](#):
>
> it’s always a bit of challenge to dig into someone else’s code, isn’t it?

Very true, sometimes I find it hard digging into my own 😌😆

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 14, 2019, 1:02pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/5 "2019-03-14T13:02:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 14, 2019, 4:52pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/6 "2019-03-14T16:52:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 14, 2019, 6:23pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/7 "2019-03-14T18:23:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 14, 2019, 6:28pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/8 "2019-03-14T18:28:00Z")

</div>

Absolutely

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/038a1274cf2444863a7a1e626d8e2cc1b941b0e0.jpeg)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 14, 2019, 6:29pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/9 "2019-03-14T18:29:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 14, 2019, 6:30pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/10 "2019-03-14T18:30:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 14, 2019, 6:31pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/11 "2019-03-14T18:31:56Z")

</div>

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](https://www.dropbox.com/s/9t4bq1qu8o21app/2019walkintest.mp4?dl=0)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 14, 2019, 7:01pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/12 "2019-03-14T19:01:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 14, 2019, 8:16pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/13 "2019-03-14T20:16:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 15, 2019, 9:53am UTC](https://discourse.processing.org/t/animate-quadgrid/9242/14 "2019-03-15T09:53:36Z")

</div>

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. 😁

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 15, 2019, 3:02pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/15 "2019-03-15T15:02:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 16, 2019, 6:10pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/16 "2019-03-16T18:10:19Z")

</div>

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.

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

```

[![](https://img.youtube.com/vi/jtvUXwLl4ig/hqdefault.jpg "QuadGrid example (Processing)") ](https://www.youtube.com/watch?v=jtvUXwLl4ig)

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 16, 2019, 6:13pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/17 "2019-03-16T18:13:48Z")

</div>

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

You rock! 🙂

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 16, 2019, 6:34pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/18 "2019-03-16T18:34:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 16, 2019, 6:35pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/19 "2019-03-16T18:35:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 16, 2019, 6:42pm UTC](https://discourse.processing.org/t/animate-quadgrid/9242/20 "2019-03-16T18:42:42Z")

</div>

1. That would be fantastic
2. That would be fantastic

🙂

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

[Next page](https://discourse.processing.org/t/animate-quadgrid/9242.md?page=2)