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 › Programs › Image Viewer: Moving the Image
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Image Viewer: Moving the Image (Read 1847 times)
Neurologist
Image Viewer: Moving the Image
Mar 18th, 2010, 12:28pm  
Can anyone help me with this? I am trying to make an image viewer. It was fine, till I came to the part of moving the image while zoomed in. I know I'm still a beginner, but who wasn't Tongue. Anyway, here's the code:

Code:

PImage pic;
float a;
float b=1;
float x=0;
float y=0;

void setup(){
  size(screen.width, screen.height);
  background(128);
  noStroke();
  smooth();
  pic=loadImage("mypic.jpg");
  imageMode(CENTER);
  translate(width/2,height/2);
  image(pic,0,0,width/2,height/2);
}

void draw(){
  background(128);
  if(mousePressed && mouseButton==LEFT){
    if(mouseX>pmouseX){
      translate(width/2,height/2);
      a+=7.5;
      rotate(radians(a));
      scale(b);
      image(pic,x,y,width/2,height/2);
    }else if(mouseX<pmouseX){
      translate(width/2,height/2);
      a-=7.5;
      rotate(radians(a));
      scale(b);
      image(pic,x,y,width/2,height/2);
    }else{
      translate(width/2,height/2);
      rotate(radians(a));
      scale(b);
      image(pic,x,y,width/2,height/2);
    }
  }else if(mousePressed && mouseButton==RIGHT){
    if(mouseY>pmouseY){
      translate(width/2,height/2);
      b+=0.05;
      rotate(radians(a));
      scale(b);
      image(pic,x,y,width/2,height/2);
    }else if(mouseY<pmouseY){
      translate(width/2,height/2);
      b-=0.05;
      rotate(radians(a));
      scale(b);
      image(pic,x,y,width/2,height/2);
    }else{
      translate(width/2,height/2);
      rotate(radians(a));
      scale(b);
      image(pic,x,y,width/2,height/2);
    }
  }else{
    translate(width/2,height/2);
    rotate(radians(a));
    scale(b);
    image(pic,x,y,width/2,height/2);
  }
  if(keyPressed && key=='r'){
    a=0;
    b=1;
    x=0;
    y=0;
  }
  if(keyPressed && key==CODED && keyCode==UP){
    y=y+1;
  }else if(keyPressed && key==CODED && keyCode==DOWN){
    y=y-1;
  }else if(keyPressed && key==CODED && keyCode==RIGHT){
    x=x-1;
  }else if(keyPressed && key==CODED && keyCode==LEFT){
    x=x+1;
  }
}


I know it's long; just ignore length. I want the image to move while disregarding the rotation, if you understand me. Any help is appreciated  Wink
Back to top
 
WWW Neurologist AbdullahAhmed12  
TfGuy44
Re: Image Viewer: Moving the Image
Reply #1 - Mar 18th, 2010, 11:03pm  
I understand you.
Right now, you rotate, then you scale, then you draw the picture at x, y.
Instead, scale, then translate to (x, y), then rotate, then draw the picture.

That is, blocks like this:
translate(width/2,height/2);
a+=7.5;
rotate(radians(a));
scale(b);
image(pic,x,y,width/2,height/2);

Should really look like this:
translate(width/2, height/2); // Center it.
scale(b); // Adjust the scale.
translate(x, y); // Offset it from center.
a+-7.5; // Update the rotation amount however you like.
rotate(radians(a));
image( pic, 0, 0); // Draw the picture.

This may cause the picture to no longer be centered. You may need to draw it at (-(pic.width)/2, -(pic.length)/2) instead of at (0, 0).
Back to top
 
 
Neurologist
Clarification
Reply #2 - Mar 20th, 2010, 4:51am  
Thanks, I really appreciate that Wink I was not clear in my question. I mean, for instance, run the app and rotate the image by 45 degrees. If you try to move it to the right, the image will move to "its" right. I want it to move to my right. I think the error is in the last part. Any ideas?
Back to top
 
WWW Neurologist AbdullahAhmed12  
TfGuy44
Re: Image Viewer: Moving the Image
Reply #3 - Mar 20th, 2010, 5:30am  
As I said before, I understood your question.
I suggest you run this:

Quote:
float Xposition, Yposition;
float rotation = 0;
float scaleFactor = 1;
float[] offsets = {
  100, 100, 300, 100 };
boolean[] keys = new boolean[5];
void setup(){
  size(400,200);
  noStroke();
}
void draw(){
  simulate();
  render();
}
void simulate(){
  if(keys[0]){
    Yposition--;
  }
  if(keys[1]){
    Yposition++;
  }
  if(keys[2]){
    Xposition--;
  }
  if(keys[3]){
    Xposition++;
  }
  if( keys[4] ){
    rotation+=0.01;
  }
}
void render(){
  background(0);
  
  // YOUR WAY in RED
  fill(255,0,0);
  pushMatrix();
  translate(offsets[0],offsets[1]);
  rotate(rotation);
  scale(scaleFactor);
  rect(Xposition-10,Yposition-10,20,20);
  stroke(255,0,0);
  line(Xposition,Yposition,Xposition,Yposition-20);
  line(Xposition,Yposition-20,Xposition-5,Yposition-15);
  line(Xposition,Yposition-20,Xposition+5,Yposition-15);
  noStroke();
  popMatrix();
  
  // MY WAY in GREEN
  fill(0,255,0);
  pushMatrix();
  translate(offsets[2],offsets[3]);  
  scale(scaleFactor);
  translate(Xposition,Yposition);
  rotate(rotation);
  rect(-10,-10,20,20);
  stroke(0,255,0);
  line(0,0,0,-20);
  line(0,-20,-5,-15);
  line(0,-20,5,-15);
  noStroke();
  popMatrix();
}
void keyPressed(){
  if(key==CODED){
    if(keyCode==UP){
      keys[0] = true;
    }
    if(keyCode==DOWN){
      keys[1] = true;
    }
    if(keyCode==LEFT){
      keys[2] = true;
    }
    if(keyCode==RIGHT){
      keys[3] = true;
    }
  } 
  else {
    if(key==' '){
      keys[4] = true;
    }
  }
}
void keyReleased(){
  if(key==CODED){
    if(keyCode==UP){
      keys[0] = false;
    }
    if(keyCode==DOWN){
      keys[1] = false;
    }
    if(keyCode==LEFT){
      keys[2] = false;
    }
    if(keyCode==RIGHT){
      keys[3] = false;
    }
  } 
  else {
    if(key==' '){
      keys[4] = false;
    }
    if( key=='z'){
      scaleFactor-=.1;
    }
    if( key=='x'){
      scaleFactor+=.1;
    }
  }
}



Arrow keys move the objects about. Notice that they move about the same. Z and X scale the objects. Notice that they scale the same. The space bar rotates the objects. Notice that, after being rotated, they move VERY differently. This difference is due ONLY BECAUSE OF THE WAY THEY ARE BEING DRAWN - that is, they both use the same variables to determine their location/orientation, but they are using those variables in different ways. You should look at the render() function to see how those ways differ.

The short answer: Translate to your image's location with a translate() call BEFORE you rotate()!
Back to top
 
 
Neurologist
Re: Image Viewer: Moving the Image
Reply #4 - Mar 21st, 2010, 4:41am  
Got it. Thanks, appreciated  Smiley
Back to top
 
WWW Neurologist AbdullahAhmed12  
Neurologist
Re: Image Viewer: Moving the Image
Reply #5 - Mar 22nd, 2010, 12:04pm  
One more thing:

So far I understood:
1)My code did not work
2)Your code worked
3)I understood everything in your code

The problem is:
What is wrong with my code. I just want to get that mistake to avoid it.
Back to top
 
WWW Neurologist AbdullahAhmed12  
TfGuy44
Re: Image Viewer: Moving the Image
Reply #6 - Mar 22nd, 2010, 7:43pm  
rotate(rotation);
translate(Xposition,Yposition);
rect(-10,-10,20,20);

VS

translate(Xposition,Yposition);
rotate(rotation);
rect(-10,-10,20,20);

The first one rotates space first, so when you later draw at an offset, you're drawing in a rotated space. Because space was rotated, "up" is no longer towards the top of the applet.

The second one moves to the right place first, then rotates. Since it translates before it rotates, up is towards the top of the applet when it moves, and, once it's in the right place, it is rotated in place.
Back to top
 
 
Neurologist
Re: Image Viewer: Moving the Image
Reply #7 - Mar 23rd, 2010, 4:16am  
But look, my code is:

translate(width/2,height/2);
rotate(radians(a));
scale(b);
image(pic,x,y,width/2,height/2);

Translate came before rotate.

???
Back to top
 
WWW Neurologist AbdullahAhmed12  
antiplastik
Re: Image Viewer: Moving the Image
Reply #8 - Mar 25th, 2010, 11:08pm  
No. Actually you translate twice, because

image(pic, x, y, width/2, height/2);

means

translate(x, y);
image(pic, 0, 0, width/2, height/2);

This statement : translate(width/2, height/2) is here only to put everything in the middle of the screen.

So you better do :

Code:
translate(width/2, height/2);
pushMatrix();
  scale(b);
  translate(x, y);
  rotate(radians(a));
  image(pic, 0, 0, width/2, height/2);
popMatrix();


Back to top
 
WWW  
Neurologist
Finally!
Reply #9 - Mar 26th, 2010, 4:58am  
Finally got it, thanks Wink

The final code that worked:

Quote:
PImage pic;
float rotation;
float Scale=1;
float x;
float y;

void setup(){
  rotation=0;
  Scale=1;
  x=0;
  y=0;
  size(screen.width, screen.height);
  background(128);
  noStroke();
  smooth();
  pic=loadImage("C:\\Documents and Settings\\All Users\\Documents\\My Pictures\\Sample Pictures\\Sunset.jpg");
  imageMode(CENTER);
  translate(width/2,height/2);
  image(pic,0,0,width/2,height/2);
}

void draw(){
  background(128);
  if(mousePressed && mouseButton==LEFT){
    if(mouseX>pmouseX){
      translate((width/2)+x,(height/2)+y);
      rotation+=5;
      rotate(radians(rotation));
      scale(Scale);
      image(pic,0,0,width/2,height/2);
    }
    else if(mouseX<pmouseX){
      translate((width/2)+x,(height/2)+y);
      rotation-=5;
      rotate(rotation);
      scale(Scale);
      image(pic,0,0,width/2,height/2);
    }
    else{
      translate((width/2)+x,(height/2)+y);
      rotate(radians(rotation));
      scale(Scale);
      image(pic,0,0,width/2,height/2);
    }
  }
  else if(mousePressed && mouseButton==RIGHT){
    if(mouseY>pmouseY){
      translate((width/2)+x,(height/2)+y);
      Scale+=0.05;
      rotate(radians(rotation));
      scale(Scale);
      image(pic,0,0,width/2,height/2);
    }
    else if(mouseY<pmouseY){
      translate((width/2)+x,(height/2)+y);
      Scale-=0.05;
      rotate(radians(rotation));
      scale(Scale);
      image(pic,0,0,width/2,height/2);
    }
    else{
      translate((width/2)+x,(height/2)+y);
      rotate(radians(rotation));
      scale(Scale);
      image(pic,0,0,width/2,height/2);
    }
  }
  else{
    translate((width/2)+x,(height/2)+y);
    rotate(radians(rotation));
    scale(Scale);
    image(pic,0,0,width/2,height/2);
  }
  if(keyPressed && key=='r'){
    setup();
  }
  if(keyPressed && key==CODED && keyCode==UP){
    y+=5;
  }
  else if(keyPressed && key==CODED && keyCode==DOWN){
    y-=5;
  }
  else if(keyPressed && key==CODED && keyCode==RIGHT){
    x-=5;
  }
  else if(keyPressed && key==CODED && keyCode==LEFT){
    x+=5;
  }
}
Back to top
« Last Edit: Mar 30th, 2010, 2:02pm by Neurologist »  
WWW Neurologist AbdullahAhmed12  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›