Best coding method for multi-image Canvas anim?

[ladlon]

Hi.  So, if I'm getting this correct, the attached codepen demo is how I would create a Canvas anim with a static background and a single animated image item.

 

But, if I wanted to have multiple animated images (and not all clones of the original, but completely different images/objects... with different sizes, images, locations, etc), I'm not clear on how best to code this.

 

The most direct/obvious method would be to just duplicate the image and object declarations (New Image() and the Init functions) for each image/item.... but I can't help but think that it could (should?) be done with a single copy and a loop... although it seems the amount of code saved would be negligible, since the unique position, scale, name and image urls would have to be declared on unique lines anyway, so the space savings seems like it would be minimal.

 

Do I just do unique New Image() and Init functions for each, as I originally thought?

See the Pen RwrKWpm?editors=0010 by ladlon (@ladlon) on CodePen

[ZachSaucier]

Hey ladlon.

 

6 minutes ago, ladlon said:

the attached codepen demo is how I would create a Canvas anim with a static background and a single animated image item.

Your CodePen doesn't run due to mismatching brackets for me. Can you please fix it and get it working?

 

Most likely you should just create your images in a loop. I talk about using them in my article on animating efficiently.

[ladlon]

Can you check it now?  I'm just using Codepen to show the code, not the result.  Again, more of a general concept question, rather than a specific.

 

And, ya, normally it would seem that loops would be best used to define multiple objects... but since each object has a different image URL, name, x/y position, scale, etc it seems that you'd end up having to use unique code lines anyway to define those, even if you assign each item a shared/same value for each property with a loop.  So, that's why I'm confused about the proper process here.

[ladlon]

I suppose I could loop the assigning of the x and y positions, giving the objects loop-generated names (ex. object[1]) rather than unique ones... and then assign the proper names using unique code lines.... like Character1 = object[2]... transferring the loop-generated object/properties to a uniquely named object?

 

But it seems the New Object section can't really be efficiently looped, since virtually all the properties are unique, and would require unique code lines... Unless maybe if I stored the properties to be assigned in a pre-made array?

[ZachSaucier]

2 minutes ago, ladlon said:

Can you check it now? 

Still errors. Look in the dev tools console to fix the errors. 

 

2 minutes ago, ladlon said:

I'm just using Codepen to show the code, not the result.  Again, more of a general concept question, rather than a specific.

I see. I recommend that you always try to show the result because it will 1) help you catch errors in your code and 2) help us understand what you're trying to do  

 

3 minutes ago, ladlon said:

normally it would seem that loops would be best used to define multiple objects... but since each object has a different image URL, name, x/y position, scale, etc it seems that you'd end up having to use unique code lines anyway to define those, even if you assign each item a shared/same value for each property with a loop.

You haven't described your end goal at all so it's hard to give suggestions.

 

In some cases it might make sense to use an array of values or an array of objects with values and then loop through that to set things up.

[ladlon]

Basically, all I am trying to do is create a Canvas animation consisting of a background (fixed, non-animating) and several unique image objects... so, not just a bunch of cloned objects doing a dance, but several unique (unique image, unique size, unique position, etc) images.

 

Yep, I think maybe manually building a pre-made array of the sizes, image urls, etc... then using a loop to read that data into the object/image declarations is the way to go... So, now I just have to see if I can get that to work.  New at this...

[ladlon]

What's the flaw in my thinking here?  (...BTW, the source data has been replaced with single letters for ease of reading in this sample)

 

Instead of doing the object as an array, do I need to instead generate the name with an object + i concantenation or something?

 

The editor is claiming an issue with the array brackets after 'pic', saying it's expecting a comma for some reason.  Obviously, there's a flaw to my thinking here, and this is not the right way to go, but I'm confused what to do.  This is partially why I was concerned about doing all the declarations within a loop, as I knew I'd get tripped up with the naming/array process.

 

 

var picSrc = [a,b,c,d];

var picHeight = [10,20,30,40];

var picWidth = [100,200,300,400];

 

// Bulk-create images

var obj = new Array;

var i;

for(i = 0; i < picHeight.length; i++) {

    var pic[i] = new Image();

    pic[i].src = picSrc[i];

    pic[i].height = picHeight[i];

    pic[i].width = picWidth[i];

 

    var obj[i] = {x: 0, y: 0};

}

[ZachSaucier]

Please create a minimal demo if you're expecting us to help. Additionally, if your question isn't related to GSAP (it doesn't seem like it is) we might not have the capacity to help you.

 

Lastly, please use the code formatter that we have in the top bar (the <> button) when posting code directly in to the forums  

[ladlon]

  Ya, I wanted to change/delete it, but I couldn't figure out how to get rid of that code window.

[ladlon]

Where is a good place for me to ask coding questions?

[ZachSaucier]

StackOverflow