Anim not randomizing when put on canvas

[OSUblake]

6 minutes ago, ladlon said:

I actually tried it (seemingly the exact same way you did), and it didnt' seem to work. 

 

You have to make sure you use ctx.save() and ctx.restore() when doing transforms, or it will keep adding on the last transform, messing everything up.

 

 

[OSUblake]

1 hour ago, ladlon said:

Zack seemed to indicate that GSAP can't directly rotate things... which is why I was then trying to go the non-GSAP rotation route.

 

He meant that gsap won't do the draw calls.

 

1 hour ago, ladlon said:

Ya, I noticed the rotation properties in your previous examples.  Weird, why didn't those show up in any of the vids I saw?  (See, that's what I'm talking about when I say I was concerned about the validity of these YouTube tutorial vids I find!)

 

What videos? If someone isn't animating rotation, there's no point in putting in on the object. Or perhaps they named it something different. 

 

1 hour ago, ladlon said:

I'm still confused about whether or not to use the whole 'wait for the page to fully load' routine.  You had it in your previous sample to me (Dog sliding), as well as your current one, yet (unless I'm understanding him wrong) Zack seems to think they are unnecessary.  Look at his posts on this thread.  So, ya, I'm a bit confused... and going in circles sometimes.

 

If you're using images, then you need to wait for the images to load. If you're just drawing shapes, then no, you really don't need to wait. Look at how I'm using window.addEventListener in the demo I posted. I think that is the easiest way.

 

1 hour ago, ladlon said:

I'll study up on the whole Canvas rotation thing some more... although now I'm confused about whether that 'move the canvas to line up the origin to the target 'object' origin, rotate the whole canvas, drop the object, rotate the canvas back and move the canvas back' hack/routine is still needed.

 

It's not a hack.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

 

The browser has do the exact same thing when you rotate an html element. It happens automagically, so you don't notice it, but it's the exact same calculations.

 

Just think of canvas a piece of graph paper, but you can only draw stuff at 0, 0, so you need to move (transform) the paper around. 

 

 

 

 

[ladlon]

Okay, so a number of issues... (as far as using the code method of your previous sample for my purposes):

 

-I am using an image, not a fillRect routine, and I'm not sure how to connect the image item (...needed for the drawImage()...) and the object (...needed to attach properties to, such as rotate, x, y, etc).  I tried doing something like 'pic = new Image()... attaching a rotation property to it... and then using that as the target item (first property) in the drawImage()... but the GSAP tweened rotations don't seem to translate to the pic 'object'.  I'm not sure how to utilize your matrix rotation section of the code with the existing code.

 

-The image I want to rotate is not static (it randomly moves around), so I'm not sure how to utilize it's position as an additional offset to the axis of rotation.

 

Here's my codepen demo again (with the ranomly moving 'image' (made as a fillRect for the purpose of the demo... the original image-based draw is included but commented out, so you can see what I WILL actually be using for the real version.

 

What now, do I need to add to this demo code in order to have a GSAP random rotation tween (similar to the existing one for random position movement) applied to my image item (represented by the rectangle in the demo)?  Could you modify my code to show me what is needed to be added?  Again, remember that the real version is using an image (drawImage()... not a drawRect()...).

 

https://codepen.io/ladlon/pen/rNxjLYp

[GreenSock]

I know Blake is working on an answer, but I think he already gave you all the code to do that previously. 

 

Here's a fork that shows what I believe you're asking for: 

See the Pen 8c52120d2ce105292ad9880a70fb3496?editors=0010 by GreenSock (@GreenSock) on CodePen

[ladlon]

Thanks for pointing that out.  I think I may have missed that codepen, as I don't remember seeing it before.

 

Yes the motion/action on that is exactly what I'm looking for, but the remaining problem is that the solutions are always utilizing a fillRectangle(), rather than an image.  I have to use a drawImage() (in order to display an image, rather than plot a shape)... but, that requires reference to an image object as the first property... unless there's some methodology that I'm not aware of (which is quite likely, but that's why I'm here).  That's why I'm always specifically saying that it needs to act on an image, and not a plotted shape.  If it were a plotted shape, it's easy, and I've never really had trouble with that.

 

Part of my confusion for me is, again, the fusing of the image displaying functionality of drawImage() and the property containing aspects of a defined object.  The sample does everything to the object 'sub' but doesn't utilize the image item 'subimage'... so it's all great, until you get to the draw.  I still am unclear on how to bring the drawImage() in, but have it utilize the properties of the object.

 

That's what I'm hoping will be shown in the newly requested version.  Everything is good in this version, except I need it to draw an image, not a plotted shape.... and I can't seem to just use drawImage(), as the rotation properties can't seem to be applied to it.. only the object... but, I can't seem to somehow link the image to the object (ex. give the object a .src property)... unless I'm mistaken.  That's what I'm trying to sort out.

[OSUblake]

I've provided numerous demos, on how to do that. This is basically copypasta.

 

See the Pen 770020227bacc02ea19bcbb796b25ef9 by osublake (@osublake) on CodePen

 

@GreenSock is random supposed to be returning strings? That messed me up for a second.

 

 

[OSUblake]

Just now, ladlon said:

fillRectangle(), rather than an image.

 

Follow the code. translate is used to move the x and y.

[ladlon]

There we go!  That's what I'm after.

 

No, unless I missed some previous demo, they were all either a plotted shape (not an image) doing the desired move,.... or an image, but without rotation.

 

Visually, this looks like exactly what I was after.  Thanks.  Hopefully the code makes sense to me.  Some of this is very new to me, so it's sometimes hard to merge it into my own code.

 

Great.  Thanks!

[OSUblake]

There are no shapes in this demo. It's all images.

 

See the Pen c70ff0dcd68fc1581dbf8b335fb60c3b by osublake (@osublake) on CodePen

 

If you have more than 1 sprite, you should put them in an array just like the demo above. 

 

function render() {
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  for (var i; i < sprites.length; i++) {
  
    var sprite = sprites[i];
    
    context.save();
    context.translate(+sprite.x + sprite.offsetX, +sprite.y + sprite.offsetY);
    context.rotate(sprite.rotation * toRad);
    context.drawImage(sprite.texture, -sprite.offsetX, -sprite.offsetY);
    context.restore(); 
  }  
}