Position Offset If Condition

Moderators: Disciple, zlovatt

Post Reply
iProphet
Posts: 6
Joined: November 19th, 2017, 3:55 pm

Hi, 

I am trying to create a grid of images. So each time i duplicate the layer, it is duplicated to an offset to fit in the grid effectively. So far i am able to duplicate the images on the x axis (a single row, if you will), i want so that once it reaches a the end of the composition of the row, it should go to the next row and start offsetting the images from the x position of the first image so that it aligns on the column starting a new row on the offset value of Y and so on..

so far i have this code

OffX=1000;
OffY=500;
xPosition=thisComp.layer(index-1).transform.position[0]+OffX
yPosition=transform.position[1];
[xPosition,yPosition]


if (xPosition>=3000)
yPosition=thisComp.layer(index-1).transform.position[1]+OffY;
[xPosition,yPosition]

While we are here, is there an efficient way of getting the offset so that it's not limited to one particular image size? This meaning, that since i have specific values that offset the images of one size, if i change the image size then they offset at the same spot leaving a lot of empty space.

Any thoughts on this would be really appreciated.
User avatar
CodingAe
Posts: 21
Joined: August 30th, 2017, 8:35 pm
Location: Detroit, Mi
Contact:

This might be one way to achieve that.
***When using this code make sure that the values for the transform anchor for these images are both set at 0;

Code: Select all

var numX = 2; // Change this variable for how many images you want in one row
var numY = 4; // Change this variable for how many you images you want in one column
var indexX = (index - 1) % numX; //This will reset the image count once you go beyond the amount you want for that row back to zero
var compX = thisComp.width / numX; //This will determine the width of the image, so it can fit the width of the composition 
var x = compX * indexX;  
var y = 0;
var i;

//This for loop is saying every time you get the right amount of images on the x position add thisComp.height divided by numY to the y position
for(i = index; i > numX; i -= numX){   
  y += thisComp.height / numY;
}
[x, y]
User avatar
CodingAe
Posts: 21
Joined: August 30th, 2017, 8:35 pm
Location: Detroit, Mi
Contact:

The code above is made to make a perfect grid, but if you want more freedom to offset you use this:
You don't have to set the transform anchor to 0 for this code, but it might make it easier to control:

Code: Select all

var numX = 2; // Change this variable for how many images you want in one row
var numY = 4; // Change this variable for how many you images you want in one column
var indexX = (index - 1) % numX; //This will reset the image count once you go beyond the amount you want for that row back to zero
var offX = 50; // Change this to how much you want offset the x position
var offY = 50; // Change this to how much you want offset the y position
var x = offX + 500 * indexX;
var y = offY + 0;
var i;

//This for loop is saying every time you get the right amount of images on the x position add thisComp.height divided by numY to the y position
for(i = index; i > numX; i -= numX){
  y += thisComp.height / numY;
}
[x, y]
iProphet
Posts: 6
Joined: November 19th, 2017, 3:55 pm

Hey, thanks for the response.

I'm afraid this isn't working for me, it's overlapping images and i'm not able to set the initial position of the image also it's not offsetting evenly.
I am attaching my project for your ease of understanding, i am able to work through the rows but like i said before if there is a better way of offsetting in this particular setting not being singled out on one particular image size. Your method was working but it seems to be overlapping images.
I cannot for the life of me reset the X value once it reaches the end of the composition width.

I think your way is probably very ideal and perfect it might help me further with the actual grid lines itself. I have a few ideas on how the grid lines will attach itself next to the placeholder, the challenge would probably be if i enter different values (scale) then how the lines compensate the position value.
if you have any ideas please shed some light on it as well.


EDIT: I did change the values of the offset and other things.
Attachments
grid.zip
(19.62 KiB) Downloaded 860 times
User avatar
CodingAe
Posts: 21
Joined: August 30th, 2017, 8:35 pm
Location: Detroit, Mi
Contact:

I've got it to work:
You don't have to zero your anchor this time, but if you are going to use this code make sure that the image layers are the first layers in composition
If you tried using the earlier code, I forgot to tell you that the layers had to be the first layers in composition so sorry about that.

Code: Select all

var numX = 3;
var numY = 3;
var xOffset = 1940;
var yOffset = 1100;
var indexX = (index - 1) % numX;
var x = thisComp.layer(index).transform.position[0] + xOffset * indexX;
var y = transform.position[1]
var i;

for(i = index; i > numX; i -= numX){
  y += yOffset;
}
[x , y]
I already fixed the code in the aep file that you give me, so if you duplicate the image layer it will align itself up with the grid as long as the layer stay at the top of the composition.
I'd pasted the code here because my machine don't have that same font in the aep file so my machine did changed the font when I'd open up After Effects.
Attachments
GridStrip1.zip
(20.94 KiB) Downloaded 883 times
iProphet
Posts: 6
Joined: November 19th, 2017, 3:55 pm

Worked flawlessly. I can adjust the grid and the text through z-axis so having them on a different index won't be a problem. 
Thanks alot!

Edit : Hey DeMarc!

This got me wondering, do you think it's possible for the user to be able to only duplicate on X axis or Y axis using a checkbox within the walls of this code?
User avatar
CodingAe
Posts: 21
Joined: August 30th, 2017, 8:35 pm
Location: Detroit, Mi
Contact:

Under the numX and numY variable (Note: You can get rid of numY, it's not doing anything):

Code: Select all

var row = thisComp.layer("Null 8").effect("Row Only")("Checkbox"); //Change this by pick whipping this to a checkbox control for X axis only
var col = thisComp.layer("Null 8").effect("Column Only")("Checkbox"); //Change this by pick whipping this to a different checkbox control for Y axis only
var isRowOnly = row == 1 ? numX = index : undefined; //This is just another version of the if/else syntax
var isColOnly = col == 1 ? numX = 1 : undefined;
iProphet
Posts: 6
Joined: November 19th, 2017, 3:55 pm

Yep i figured that numY wasn't doing anything in the beginning. I had managed to get the y axis checkbox working, i thought the x axis was unnecessary, it was already duplicating on the x without the checkbox. I think you're way is way better than mine, i was having a bit of offset issue. I'll amend my code. 

Thanks a lot DeMarc. I learnt a lot from you through this post.
Post Reply