Scale Translate AB comparission

prince_polka

This is probably pointless but oh well...
I had a pan and zoom problem and solved it using scale and translate functions.
I got curious if there was any reason to use those functions other than convenience.
So I set up this this A B comparison, one with and one without them.
Turns out it makes no visual difference whether you use them or not.
left-click = pan
scrollwheel = zoom
right-click = switch mode

// scaletranslate A B comparission
float mx,my,ratio,xpt,ypt,xzt,yzt,cx,cy,swt,zoom;
boolean mode=false;
void setup() {
 size(600,600);
  zoom=1.0;
  mx=width/60;
  my=mx*height/width;
  ratio=mx/my;
}
void draw() {

  if(!mode){cxcy(60,60);}
  else if(mode){scaletranslate(60,60);}
}
void mouseClicked(){
  if(mouseButton == RIGHT){
    if(mode){mode=false;}else{mode=true;}

  }
}
void mouseDragged(){
  xpt-=(pmouseX-mouseX)/zoom;
  ypt-=(pmouseY-mouseY)/zoom;
}
void mouseWheel(MouseEvent event) {
  swt-=event.getCount();
  if (swt==0) {
    zoom=1.0;
  } else if (swt>=1 && swt<=10) {
    zoom=pow(2, swt);
  } else if (swt<=-1 && swt>=-10) {
    zoom=1/pow(2, abs(swt));
  }
  xzt=((zoom-1)*width/2)/zoom;
  yzt=((zoom-1)*height/2)/zoom;
  if(event.getCount()<=-1){
  xpt-=(mouseX-width/2)/zoom;
  ypt-=(mouseY-height/2)/zoom;
  } else {
  xpt+=(mouseX-width/2)/(pow(2, swt+1));
  ypt+=(mouseY-height/2)/(pow(2, swt+1));
  }
}
void cxcy(float x, float y) {
  cx=(xpt-xzt); cy=(ypt-yzt);
  background(128);
  stroke(0);
  strokeWeight(zoom);
  for(int i = 0; i < x; i++){line(((i*width/x)+cx)*zoom,cy*zoom,((i*width/x)+cx)*zoom,(height+cy)*zoom);}
  for(int i = 0; i < y; i++){line(cx*zoom,((i*height/y)+cy)*zoom,(width+cx)*zoom,((i*height/y)+cy)*zoom);}
  fill(#ff0000);rect((cx+mx*10)*zoom,(cy+mx*10)*zoom,mx*zoom,mx*zoom);
  fill(#ffff00);rect((cx+mx*49)*zoom,(cy+mx*10)*zoom,mx*zoom,mx*zoom);
  fill(#00ff00);rect((cx+mx*10)*zoom,(cy+mx*49)*zoom,mx*zoom,mx*zoom);
  fill(#0000ff);rect((cx+mx*49)*zoom,(cy+mx*49)*zoom,mx*zoom,mx*zoom);
  fill(#abcdef);ellipse((cx+width/2)*zoom,(cy+height/2)*zoom,width/8*zoom,height/8*zoom);
  textSize(4*mx*zoom);
  fill(0);
  textAlign(CENTER);
  text("CX CY Floats",(cx+width/2)*zoom,(cy+height/2)*zoom);
}

void scaletranslate(float x, float y) {
  scale(zoom);
  translate(xpt-xzt,ypt-yzt);
  background(128);
  stroke(0);
  strokeWeight(1.0);
  for(int i = 0; i < x; i++){line(i*width/x,0,i*width/x,height);}
  for(int i = 0; i < y; i++){line(0,i*height/y,width,i*height/y);}
  fill(#ff0000);rect(mx*10,mx*10,mx,mx);
  fill(#ffff00);rect(mx*49,mx*10,mx,mx);
  fill(#00ff00);rect(mx*10,mx*49,mx,mx);
  fill(#0000ff);rect(mx*49,mx*49,mx,mx);
  fill(#abcdef);ellipse(width/2,height/2,width/8,height/8);
  textSize(4*mx);
  fill(0);
  textAlign(CENTER);
  text("Scale Translate",width/2,height/2);
}

kfrajer

Notice that if you were to use rotations, then it will be the difference of calling rotate() vs. working with an angle and trigonometric functions. Your head will soon literally start spinning. This is a reason why Processing is good for beginners and advance users as it does lots of work for you. Notice however than when you mix transformations then it is important to know what is happening behind the scenes which you have experience with this code.

Thxs for sharing,

Kf

cameyo

Very useful. Thanks for sharing :)

prince_polka

I hit a roadblock on my "train simulation" thing so went back and worked on this sketch.
Got rotation working and enhanced the zooming a little bit. Click right button to toggle rotation, no A B thing going on now.. Open processing did not detect scrollwheel so I put it on WASD.
https://openprocessing.org/sketch/408434

I really think it's useful to do one "manual transformation" just for the mouse pointer, and do transform the graphics with rotate() scale() etc...
Notice the ellipse following the mouse?
Sure I could have done a popMatrix after everything else was drawn, but if I wanted to detect whether it's is on top of a square or something I wouldn't be able to do that.

prince_polka

typical... now I found screenX(x, y) which seems like it's what I should have tried to begin with, I added a green ball and although it doesn't follow the mouse it would probably have been helpful coding around with it from the start, and I don't wan't to rewrite everything yet again, but when the screenX/Y doesn't follow the mouse I guess that's a red flag