How to make this rotate and fall in raindow position

[lv2lrn4lf]

I want to make a rain effect but having trouble with rotating the image in shader... i think i'm close but just don't see it for the most part. his my codepen https://codepen.io/L2L2L/pen/vYdExmM?editors=1010 and on the webgl website they have a rotation example. https://webglfundamentals.org/webgl/lessons/webgl-2d-rotation.html i tried to incorporate that into the shader but having trouble figuring out how.

[greggman]

First off, it looks like you copied the first example instead of the last example (with the most features) including rotation of the texture.

https://webglfundamentals.org/webgl/webgl-2d-drawimage-06.html

And 2nd off, the next article adds rotation of the quads.

[lv2lrn4lf]

didn't even notice that game from webglfunddamentals, got it from somewhere else. How do I make it not rotate funny? it don't stay square when it rotate.

https://codepen.io/L2L2L/pen/ExQapEN?editors=1011

---

https://gist.github.com/simonecesano/f4c2d2acecf5a8b7a0277b0431dc1384

came across this and i'mma update this comment cause i'm not ready to reply to the one below, but thanks in advance.

[greggman]

How do I make it not rotate funny? it don't stay square when it rotate.

Your change isn't setting the correct size for the textures. It's setting a 1x1 texture, then loading cross origin images. It's not setting the crossOrigin attribute when loadng so the image loading is failing but it's still getting the width and height from the image attributes so it's stretching that 1x1 texture to the size of the loaded images.

Further, it's choosing a random non-square size for each quad

https://codepen.io/greggman/pen/jOZEJgE?editors=1010

BTW: If you go to the article page and click "Export" on a live sample it will export a version on codepen that runs with the images.

https://codepen.io/greggman/pen/OJQPqGq?editors=101

[lv2lrn4lf]

I don't understand, the two links does the same with the last one looking shew, it rotate the image funny like my does... The image look to be getting clipped out in all example of this, even the one hosted by webglfundmental site.

I guess i got to calculate vertices points since the code seem to the color coordinate vu only.... I don't even know.... trying to do something so simple as rotate a falling image....

[greggman]

The code is rotating the texture [inside the destination quad]. If you want to rotate the quad the texture is drawn too use the code from the following article

[lv2lrn4lf]

Yes i saw that and tried it but i still can't get it right:

https://codepen.io/L2L2L/pen/gOvbNej?editors=1010

I did exactly what they are doing.

[greggman]

You're basically asking for a Canvas 2D tutorial since that example is emulating the canvas 2D API. The examples on the page show rotation

https://webglfundamentals.org/webgl/webgl-2d-matrixstack-02.html

https://codepen.io/greggman/pen/QWQweev?editors=101

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

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

[lv2lrn4lf]

I went through it and have manage to alter it to fit my use case and make it render multi images. Thank you so much for providing code and helping me out with this! I went over all the resource that you provided me... I skim through them mostly but made sure to take something from each one. Again appreciate your help.