Mondrian style Animation

[Chaz Chester]

Not totally sure I understand what you’re going for, but would something like this help? https://gumroad.com/l/acdtg

[Martyn Morris]

Hi there,
yes that’s kind of what I’m looking to achieve.
Although I couldn’t work out how to add more than 4 boxes.

Thanks
Martyn

[Filip Vandueren]

I haveen’t inspected the linked template, but it can get complicated pretty quickly ☺
For a 5×5 grid, you’d need about 16 nulls controlling at least 36 layers.

Do you want everything to squash and stretch, so column 2 always stays column 2 e.g.
or can the lines cross-over each other?
Mondriaan uses subdivisions in some square, how would you handle that in your grid ?

Would you want to control the lines or the squares ? How is the coloring handled ?

Do you need to have a lot of control to do precisely timed animations to msuic for exmaple, or just some kind on blocky noise effect?

[Martyn Morris]

Hi Filip,
You are right it could get pretty complicated. Less so all the sliders where on one adjustment layer?
I Would like Every thing to squash and stretch and not to crossover each other and have control of the colour as well as the thickness of the black lines.

Do you think it’s possible?

Many thank,
Martyn

[Filip Vandueren]

Since you mentioned the sliders, I gave it some thought…

the thing we can’t do is have the sliders react to each other, so when you move one slider, the others would respond to squash, so everything keeps fiitting inside the width.
I think the next best thing would be to just have 10-sliders:
– 5 Row-heights
– 5 Column-Widths
These create a Grid with fine control.

And then make them relative to their total.
So widths of 50-20-20-10-10 would have the same result as 5-2-2-1-1 for example.

I think things are best simplified further by using a shape-object, that way e don’t need a few dozen layers, with lots and lots of cross-referencing expressions.

I started out with creating a text-layer, named “GRID”
This Text-layer gets 10 sliders name “R 1”, “R 2”, “R 3”, “R 4”, “R 5”, “C 1”, “C 2”, “C 3”, “C 4”, “C 5”.
Those are sliders for 5 Rows and 5 Columns.
You should keyframe these.

Two extra sliders: W and H, set the output size of the shape in pixels. Also keyframe-able.

The source-Text of the layer gets this expression:
(Code is not compatible with older versions of After Effects)

r=[]; c=[];
w = effect("W")("Slider");
h= effect("H")("Slider");
const sum_reducer = (accumulator, currentValue) => accumulator + currentValue;

min_cell_size = 0;
// put all the sliders in arrays
for (i=1; i<=5; i++) {
r[i-1] = Math.max(min_cell_size, effect("R "+i)("Slider").value);
c[i-1] = Math.max(min_cell_size, effect("C "+i)("Slider").value);
}

// calculate the total width and height
grid_w=c.reduce(sum_reducer,0);
grid_h=r.reduce(sum_reducer,0);

// put each corner of the reuslting grid in a 2-dimensional array
grid = [];

for (i=0; i<=5; i++) {
grid[i]=[];
for (j=0; j<=5; j++) {
// coordinates are the sums of all previous widths summed
x=c.slice(0,i).reduce(sum_reducer,0) / grid_w;
y=r.slice(0,j).reduce(sum_reducer,0) / grid_h;
grid[i][j] = [(x-0.5)*w, (y-0.5)*h];
}
}
JSON.stringify(grid);


You can hide that text-layer now, putting it inside of a text-source it’s a convenient way to re-use the coördinates in a few different places.

Now make a new empty shape layer (Layer -> New -> Shape)
In the Timeline: Contents -> Add -> Path.
Give the Path this expression:

// get the calculate grid-array from the textlayer
grid = JSON.parse(thisComp.layer("GRID").text.sourceText);

// draw vertical lines, then horizontal lines, then bounding box in 1 shape
mypoints =
[
grid[1][5], grid [1][0],
grid[2][0], grid [2][5],
grid[3][5], grid [3][0],
grid[4][0], grid [4][5],
grid[5][5], grid [5][1],

grid[0][1], grid [0][2],
grid[5][2], grid [5][3],
grid[0][3], grid [0][4],
grid[5][4], grid [5][5],

grid [5][0], grid [0][0], grid[0][5], grid[5][5]
]

createPath(mypoints, [],[], false);


Add a black stroke to this, set width to taste.

Now you might want coloured Squares…

In your Shape-Layer: Add->Group(empty). Move it to be AFTER (below) the stroke of the Grid.

Rename the Group to “[2,2]”
In This Group: Add Path.
Give that Path this expression:

// get the calculate grid-array from the textlayer
grid = JSON.parse(thisComp.layer("GRID").text.sourceText);

// get the Square number from this Groups name
c=JSON.parse(thisProperty.propertyGroup(3).name);
x=c[0]-1;
y=c[1]-1;

myPoints = [
grid[x][y], grid[x+1][y], grid[x+1][y+1], grid[x][y+1]
]

createPath(myPoints, [],[], true);


Add a Fill to just this Group (Red or Yellow, I guess?)

You’ll see that duplicating/changing the name of the Group to for example [4,1] would color the 4th square down in the 1st column etc…

Mondrian also split some squares down the middle Horizontally or Vertically.
You could add extra Paths to your shape between the Grid and the Stroke with this expression:

// get the calculate grid-array from the textlayer
grid = JSON.parse(thisComp.layer("GRID").text.sourceText);

// get the Square number from this Groups name
c=JSON.parse(thisProperty.propertyGroup(1).name);
x=c[0]-1;
y=c[1]-1;
line_mode=c[2];

if (line_mode=="h") {
myPoints = [ (grid[x][y] + grid[x][y+1])/2, (grid[x+1][y] + grid[x+1][y+1])/2 ];
} else if (line_mode=="v") {
myPoints = [ (grid[x][y] + grid[x+1][y])/2, (grid[x][y+1] + grid[x+1][y+1])/2 ];
}

createPath(myPoints, [],[], false);

Naming that Path [1,2,”h”] would split the 2nd square of thee 1st column in two horzontally.

etcetera…

Have fun Keyframing and please share the endresult…

[Martyn Morris]

Hi Filip,
this looks amazing!
Thanks for your time for making this possible. From looking at the screen shot it looks very neat.
I’m going to follow along tomorrow.

Many thanks,
Martyn

[Martyn Morris]

Hi Filip,
Thanks for again for your help.
I’ve run straight in to errors and Im not sure how you started with the Shape Layers?.
I’ve followed your explanation & tried to work it out with a friend but we both came away scratching our heads.
Did you draw out the grid first?

Im not very advanced when it comes to expressions so its easy for me to get lost quick.

Would it be possible to have a look at your file you made?

Many thanks,
Martyn

[Filip Vandueren]

No the expressions draws the grid…

I’ll attach a comp

14209_mondriaan.aep.zip

[Martyn Morris]

Thanks Filip,
It’s really good

Martyn