image transformation: rotation missing(?)

[Wildernesss]

Hi everyone. There was a request about image transformation (rotation) that was closed in 2016 (#1534)... I don't really understand why. Because this request is in my opinion full well founded but apparently no improvement of p5.js in that direction has ever been done. Am I missing something? With p5.js it's easy too transform image color with filters (for instance a color image transformed into a gray scaled image), but apparently there is no function to transform image itself with a rotation (when I write 'transformation', that means real image pixels transformation, no the way image is drawn on canvas). If I understand it well, the only one mean has been to rotate canvas before drawing the image on the canvas. This can be usefull in certains circumstances, but that transformation of reference point is something very complicate to understand for beginner. I'm not saying here the canvas rotate() function should disappear but that in parallel there really should be more basic transformation on image object available (I mean transformation of image itself, not the canvas orientation), like the basic that is orientation. Something that could be easily improved into p5.js. At least it would be great! Thanks to the whole p5.js development team for their great work! Laurent

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[outofambit]

Hi @Wildernesss! I've been thinking about possible ways to approach this on top of p5's current coordinate rotation/transformation and I'm afraid I haven't been able to think of something that would be doable. The best I have is an API that looks like this:

let img;
function preload() {
  img = loadImage('assets/laDefense.jpg');
}
function setup() {
  rotateNextDrawing(PI/4)   // this is the proposed function
  image(img, 0, 0);
}

Something like rotateNextDrawing could be written where the rotation would only be applied to the next drawing command. There's some other things to work out though like: does this rotation stack on top of the current global transformation matrix, or does this exist as an independent transformation stack? And there are probably other corner cases I haven't thought of yet.

Do you think this sort of solution would be helpful? Or do you have another form you'd like to see the API to do this take?

[Wildernesss]

Hi @outofambit / Evelyn! Thanks a lot for taking care of this proposal :o). My idea is to add function(s) into p5.Image class in order to make possible image rotation directly on the image itself and its pixels, the same way other p5.Image functions (such as .filter() ) make image pixel transformation (that means absolute image transformation, not relative image transformation by using a canvas rotation).

I need this rotation operation in a project but I haven't found a function into p5.Image to do this at this stage. So I've written my owns:

function rotateRight(img){

  var w = img.width;
  var h = img.height;
  var index, indexr;
  var img2 = createImage(w, h);

  img.loadPixels();
  img2.loadPixels();

  indexr = 0;

  for (let x = 0; x < w; x++) {

    for(let y = h - 1; y >= 0; y--) {

      index = (x+y*w)*4;
      img2.pixels[indexr] = img.pixels[index];
      img2.pixels[indexr + 1] = img.pixels[index+1];
      img2.pixels[indexr + 2] = img.pixels[index+2];
      img2.pixels[indexr + 3] = img.pixels[index+3];

      indexr += 4;

    }
  }

  img.updatePixels();
  img2.updatePixels();

  return img2;

}


function rotateLeft(img){

  var w = img.width;
  var h = img.height;
  var index, indexr;
  var img2 = createImage(w, h);

  img.loadPixels();
  img2.loadPixels();

  indexr = 0;

  for (let x = w - 1; x >= 0; x--) {

    for(let y = 0; y < h; y++) {

      index = (x+y*w)*4;
      img2.pixels[indexr] = img.pixels[index];
      img2.pixels[indexr + 1] = img.pixels[index+1];
      img2.pixels[indexr + 2] = img.pixels[index+2];
      img2.pixels[indexr + 3] = img.pixels[index+3];

      indexr += 4;

    }
  }

  img.updatePixels();
  img2.updatePixels();

  return img2;

}

Those functions transform image with a +-90 degrees rotation. What would be still better would be a unique and more universal rotate() function included into p5.Image class, that could be called like in this examples:

function preload() {

  img = loadImage('assets/laDefense.jpg');

}

function setup() {
  
   // for instance:
  img.rotate(PI/4);
  img.rotate(-PI/4);
  img.rotate(PI/3);
  img.rotate(-PI/2.4);
  // ...
}

That means a function that can make any possible rotation (not only 90 degrees rotation). But here I'm not an image transformation or maths expert to write code to do pixels rotation matrix.

I hope I've been a little bit more understandable with the suggested idea!

Once again thanks a lot for your attention and your precious work in developing p5.js and Processing project :o)

Have a nice week

Laurent

[limzykenneth]

When an image is rotated for say 45 degrees, what should the bounding box be? Does the bounding box rotate along with the image? Or does the bounding box expand so that it stay upright but touching the corners of the image?

From my limited experience, the first case is what people coming from a graphical software such as Illustrator will be familiar with but it is significantly harder to deal with in code, as unlike in Illustrator where you have immediate feedback on what the bounding box look like, you cannot immediately see it in code and that makes placing the image harder. For the second case, the image will essentially not have a fixed width and height as it rotates which makes handling it and drawing it harder (when drawing with image(50, 50, 200, 200) does the 200, 200 define the size of the bounding box or the image?)

[outofambit]

Thanks for your reply @Wildernesss! It seems I misunderstood your idea. 😂 The example code you shared helps me a lot! I think having a method of manipulating pixels on a P5.Image to "rotate" it is interesting. My main question is what @limzykenneth mentioned above: What would the desired behavior be for images that weren't square?

[Wildernesss]

Hi @outofambit and @limzykenneth , thanks for your attention! Yes, that's true, in my project I need to make square image rotation, and technically it's easier to do than rectangular image rotation. I think that second option would be the best intuitive one for beginners (bounding box expanding so that it stay upright but touching the corners of the image, without changing original image size bounded in the box). It would be interesting to see how developers of p5.play did in order to deal with sprite rotations (http://molleindustria.github.io/p5.play/), that is the same purpose. Thanks again! Laurent