p5.js how to translate along axes after rotate

Question

After I rotated an coordinates system it is translating along its new axes. Is it somehow possible to translate it along axes before rotation?

Idea is that user uploads an image and then he can rotate it, zoom it and move it around the middle of the viewport. Somehow I failt o achive all of those functions ta once.

Any suggestions?

EDIT

I.e. there is a canvas. I draw an image there. Then I rotate it 90° and I want to translate it on X axis. It moves down the screen. Because axes are turned around.

EDIT

Here is a code snippet that I use for transformation. Image is rotated always in it's (0,0) point. That is why I translate it in a way that it is rotatet in its middle point. Afterwards I draw the image in an offset point.

    p.push();
        p.translate(canvasWidth/2, canvasHeight/2);
        p.rotate(angle * p.TWO_PI/360);

        var x = -loadedImage.width/2  - offsetX;
        var y = -loadedImage.height/2 - offsetY;

        p.image(loadedImage, x, y);
    p.pop();

EDIT

I decied to translate first, and then rotate. It makes translating correct but it rotates around wrong pivot point. I can't have everything I guess.

Do you want to rotate around the origin of the object or the origin of the screen? — Andrei Nemes
Origin of the screen. I.e. there is a canvas. I draw an image there. Then I rotate it 90° and I want to translate it on X axis. It moves down the screen. Because axes are turned around. — greg

user3547679 user3547679 · Accepted Answer · 2015-07-14T11:11:43

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.fillStyle="red";
ctx.translate(100,0);
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
ctx.fillRect(100,0,50,50);

try this code:Use drawImage instead of fillRect in your code

p5.js how to translate along axes after rotate

1 Answers