How do you flip a image horizontally using Processing.js?

Question

Not much to add to the question. How do you flip a image horizontally using Processing.js?

unblevable · Answer 1 · 2013-07-20T07:59:59.157

7

Assuming you've already loaded your img:

processing.draw = function () {
   // place image
    processing.image(img, 0, 0);

    // flip using a matrix
    processing.pushMatrix();
    processing.scale(-1.0, 1.0)
    processing.image(img, -img.width, 0);
    processing.popMatrix();
};

If needed, it shouldn't be too hard to adjust the arguments to flip the image vertically.

edited Jul 20 '13 at 07:59

answered Jul 20 '13 at 07:46

unblevable

1,296
10
14

2

drawing upside down might be faster than accessing and writing all pixels. +1 – George Profenza Jul 20 '13 at 23:03

score 0 · Answer 2 · answered Jul 20 '13 at 06:49

0

public PImage getReversePImage( PImage image ) {
 PImage reverse = new PImage( image.width, image.height );
 for( int i=0; i < image.width; i++ ){
   for(int j=0; j < image.height; j++){
     reverse.set( image.width - 1 - i, j, image.get(i, j) );
   }   
 }
 return reverse;
}

From http://uihacker.blogspot.com/2012/04/processing-flip-pimage-horizontally.html

answered Jul 20 '13 at 06:49

1

Yea but I need it with javascript (should've made clearer) and there's the problem that where I am supposed to put that? If I just place it on setup, after "loadImage", it will obviously not work as the original image will not be loaded. There is no callback for loadImage so that's not an option... – MaiaVictor Jul 20 '13 at 06:51
js might be slow at processing images, consider using the `pixels` array and a single for loop instead of a nested for loop – George Profenza Jul 20 '13 at 23:06

How do you flip a image horizontally using Processing.js?

2 Answers2