animating portion of an array

[Liquid 7 Likes (Newbie)]

Hi again, i broke couple of walls banging my head, trying to figure out this one.

In example  below, initial animation works fine, than after it ends, you can click dark area and from that event wave spreads out on all squares, thats ok, but i wan't to limit spread area to only (x) squares from square that was at epicenter of this wave, so i can't figure out how to limit animation to portion of whole array, array is drawn on canvas in this sequence

 

[0,5,10,20,etc

1,6,11,21,etc

2,7,12,22,etc

3,8,13,23,etc

4,9,14,24,etc]

 

array named 'tiles' hold all objects, function 'reanim' is called to start onClick animation.

x_elem is an number telling us how many squares are in x axis.

y_elem is an number telling us how many squares are in y axis

 

i did try, slicing array, limiting grid to numbers, i eaven did endArray which slowed down browser to crawl.

 

Best option was clearing array and making new one that consisted of selected squares, but any onther square outside of selected range was not shown.

All of this is inside 'reanim' function

 

See the Pen BaZGdRO?editors=0010 by Liquidator (@Liquidator) on CodePen

[OSUblake 18,537 Likes (Superhero)]

I think you need to start watching some Coding Train videos. I'm pretty sure something like this has been done before.

https://www.youtube.com/c/TheCodingTrain

 

The Game of Life might be a good one to start with.

 

 

 

But the basic idea is that you should store your tiles in 2D array. 

https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript

 

There's a bunch of different ways to create a 2D array, but something like this.

 

let tileGrid = [];
let rows = 5;
let cols = 10;

for (let y = 0; y < rows; y++) {
  tileGrid.push([])
  for (let x = 0; x < cols; x++) {
    tileGrid[y][x] = ...;
  }
}

 

Then you can easily figure out what tiles are to the top, left, right, bottom of the tile you are animating out from. 

 

[Liquid 7 Likes (Newbie)]

Cheers OSUBlake, will read and watch it. thanks

[Liquid 7 Likes (Newbie)]

this so called game of life is allready in the code, i was thinking along the lines of passing an extra param as array of indexes that are in the main array of objects, and indexes in that array that we pass as an extra param will tell gsap to animate those indexed objects only ofcourse i will have to sort this indexes  and animation will start from first element.

 

I think i can go this way but explicitly create gsap.to() in for loop or timeline for better control of flow, which won't be so neat as just one line of code as it is now

 

let ofseter = 32;
// where SelectedElements is an array of indexes to animate
gsap.to(tiles, { animateOnly:SelectedElements, x:"-="+(ofseter/2),y:"-="+(ofseter/2),width:"+="+(ofseter),height:"+="+(ofseter),duration:1,stagger:{grid:[x_row_elem,y_coumn_elem],from:selectedSquare,amount:0.75}});