We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › flipping an image
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
flipping an image (Read 2432 times)
guybowden
flipping an image
Apr 28th, 2005, 6:09pm  
simple question with a simple answer no doubt..

How do I mirror an image that i've loaded in?

Is there any proper way to do it? or should I load the image in, copy it to another image and go through the pixel array?  I know i can do that, but it seems a long way round!?

Cheers,
Guy
Back to top
 
 
K. Damkjer
Re: flipping an image
Reply #1 - Apr 28th, 2005, 8:48pm  
A simple way would be to scale by -1 about the axis of interest. So, for a horizontal image flip, try:

Code:
scale(-1, 1);


for a verticle try:

Code:
scale(1, -1);
Back to top
 
WWW  
guybowden
Re: flipping an image
Reply #2 - Apr 29th, 2005, 1:01pm  
How can I apply that to sprites?

ideally it would be something like this:

<code>
xscale = dir ? 1 : -1;
img.scale(xscale,1);
image(img, x, y);
</code>

whereby the image is scaled before it gets placed on screen, but doesn't effect the other sprites.
Back to top
 
 
guybowden
Re: flipping an image
Reply #3 - Apr 29th, 2005, 1:16pm  
found a round about way:

xscale = dir ? 1 : -1;
scale (xscale, 1);
image(img, xscale * x, y);
scale (xscale, 1);

- sorry, I've come from a Flash / actionscript background Smiley makes it hard to think that once something is on stage, you can't do squat with it Smiley
Back to top
 
 
K. Damkjer
Re: flipping an image
Reply #4 - Apr 29th, 2005, 3:33pm  
Oops, sorry I didn't warn you about that...

For sprites, it's best to always draw the image at 0, 0 and use translates to move it around. Also, a good way to avoid having to "undo" a lot of moves is to use pushMatrix() and popMatrix()... here's a quick example:

Code:
PImage img;
float pct;

void setup() {
  size(300, 225);
  img = loadImage("myPicture.jpg");
}

void draw() {
  background(204);

  pct = (2.0 * mouseX - width) / width;

  translate(150, 0);
  pushMatrix();
    scale(-pct, 1);
    image(img, 0, 0);
  popMatrix();
  scale(pct, 1);
  image(img, 0, 0);
}


You can continue to manipulate things on the screen as much as you'd like in Processing too.

Hope this helps.

<<edited to make for a slightly neater example>>
Back to top
 
WWW  
guybowden
Re: flipping an image
Reply #5 - Apr 29th, 2005, 6:23pm  
sorry - but whats the reason behind the transform - then push then pop stuff?

why not add an image at a certain point instead of the translate stuff?
Back to top
 
 
Mythmon
Re: flipping an image
Reply #6 - May 1st, 2005, 6:19am  
basically, translate, rotate and functions like that effect the transformation matrix, which is (as i understand it) a 2-d (3?) array that says things like where (0,0,0) is and what way is x. ie if you do a rotate(90), basially your saying the the x axis now points down.

pushMatrix() will save the transformation matrix, and popMatrix will restore it

hope that helps
Back to top
 
 
st33d
Re: flipping an image
Reply #7 - May 1st, 2005, 4:35pm  
Still doesn't answer why the need to apply the matrix instead of placing it at a different location. Won't calling the matrix incur more processing overhead?
Back to top
 
WWW  
Mythmon
Re: flipping an image
Reply #8 - May 1st, 2005, 8:04pm  
well, i think the reason is that, say you wanted to place the image at 45 degrees, if you placed it at its final location, then rotated it, it would roatate around (0,0) not its center. so you draw things at (0,0), roatate them if necessary, then move them to thier final place

hopefully someone who really know the reason for this all will answer.
Back to top
 
 
Markavian
Re: flipping an image
Reply #9 - May 2nd, 2005, 3:18am  
Mythmon has pretty much explained it, but I'll try anyway:

When you draw things to the stage they are passed through the transformation matrix to be positioned. The default is 0,0 in the top left corner, with a rotation of 0.

Rotation functions apply to the transformation matrix, so rotating by 45o swing the whole x,y coordinates around by 45o.

If you want to rotate an image, then position it, you need to draw it with a centre of 0,0 and then shift it to its new position.

However, if you then want to draw a second image and move it around you have to reset the transformation matrix, otherwise you'd be drawing relative from the last position/rotation of the matrix.

An easy way round this is to use pushMatrix(), popMatrix().

By calling pushMatrix(); you specify a coordinate system to return to when popMatrix(); is called. Essentially rolling back any transforms applied between the two methods.

In the example below, I've transformed a few rectangles and positioned them around the screen. Drawing rectangles works just the same as drawing PImages and other elements.

(http://mkv25.net/applets/transform/)

Code:

// Set up scene
size(200, 200);
// Set draw mode for rectangles
rectMode(CENTER);

// Draw red rectangle
fill(255, 0, 0);
rect(20, 20, 40, 40);

pushMatrix();
// Draw blue rectangle
rotate(radians(15));
fill(0, 0, 255);
rect(20, 20, 40, 40);
// Draw green rectangle
rotate(radians(15));
fill(0, 200, 0);
rect(20, 20, 40, 40);
popMatrix();

// Draw white rectangle in center
pushMatrix();
translate(width/2, height/2);
rotate(radians(45));
fill(255);
rect(0, 0, 40, 40);
popMatrix();

// Draw small black rectangle in center
fill(0);
rect(width/2, height/2, 20, 20);
Back to top
 
WWW Markavian+iTX  
K. Damkjer
Re: flipping an image
Reply #10 - May 2nd, 2005, 6:20am  
I was suggesting the use of pushMatrix() and popMatrix() because scale() affects the transformation matrix. Because of this, you would always have to scale back by the inverse to "undo" the last scale before drawing another sprite or incorporate this calculation into your next transformation. This extra calculation is generally slower than simply popping the transformation matrix to restore it to a previous state. Granted, this doesn't necessarily hold for the translations since image() allows us to position the images easily, but visualizing the sprites as being drawn at the origin helps simplify the math. Consider the following example where I use both the image position and the translate() to control how my sprites are positioned:

Code:
PImage img;
float pctW, pctH;
 
void setup() {
  img = loadImage("myPicture.jpg");
  size(img.width * 3, img.height * 3);
}
 
void draw() {
  background(204);
 
  // use the mouse position to calculate scale percentages
  pctW = -(2.0 * mouseX - width) / width;
  pctH = -(2.0 * mouseY - height) / height;

  // save the current transformation matrix 
  pushMatrix();

    // move the origin to the center of the stage
    translate(width/2f, height/2f);

    // scale the stage
    scale(pctW, pctH);

    // draw the image so that its center sits on the origin
    image(img, -img.width/2f, -img.height/2f);

  // restore the last saved transformation matrix
  popMatrix();
  

  // move the origin to the mouse cursor
  translate(mouseX, mouseY);

    // draw the image so that its center sits on the origin
  image(img, -img.width/2f, -img.height/2f);
}


Sure, manipulating the matrix stack may not always yield the speediest code, but it's generally "safe" and relatively easy to understand. I guess the issue isn't really one of right approach vs. wrong approach, just different.
Back to top
 
WWW  
guybowden
Re: flipping an image
Reply #11 - May 3rd, 2005, 11:39am  
all makes sense now.. I think.

Cheers for the in depth answers..

Its getting used to making the change to the whole thing, then reseting it, rather than just making the change to the sprite.

Cheers
Guy
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›