Image at angle from 2 vectors scaled and centered

Processing Coding Questions
1

hallo.
I am trying to place an image (1000X1000px) scaled and centered between 2 vectors, and keep it always centered there no matter the angle.

So far i have

PVector a,b,c;
PImage img1;

void setup(){
  size(400,400,P2D);
  a = new PVector(100,200);
b = new PVector(200,200);
c = new PVector(300,200);
img1 = loadImage("wing0.png");
}

void draw(){
  background(125);
  ellipse(a.x,a.y,10,10);
  ellipse(b.x,b.y,10,10);
  ellipse(c.x,c.y,10,10);
  stroke(255,0,0);
  line(a.x,a.y,b.x,b.y);
  stroke(0);
  line(b.x,b.y,c.x,c.y);
  
 
    // get angle 
  float angle=angleBetweenPV_PV(a, b);
 
  // show the found angle 
  displayInDegree(angle); 
  //triangleMy(angle);
  
  
  //if (a.y <= b.y) { arcangle = angle; } else { arcangle = angle + 2*(PI-angle); }
  println(int(degrees(angle)));  
  pushMatrix();
  translate(a.x,a.y-(img1.height/img1.width*dist(a.x,a.y,b.x,b.y))/2);
  //translate(a.x,a.y);
  rotate(angle);
  image(img1,0,0,dist(a.x,a.y,b.x,b.y),dist(a.x,a.y,b.x,b.y));
  //image(img1,a.x,a.y-((img1.height/img1.width*dist(a.x,a.y,b.x,b.y))/2),dist(a.x,a.y,b.x,b.y),img1.height/img1.width*dist(a.x,a.y,b.x,b.y));
  popMatrix();
}


void mouseDragged(){
  if (mousePressed == true) {
       if (dist(mouseX,mouseY,a.x,a.y)<10){
         a.x = mouseX;
         a.y = mouseY;
       } else        if (dist(mouseX,mouseY,b.x,b.y)<10){
         b.x = mouseX;
         b.y = mouseY;
       }
       else        if (dist(mouseX,mouseY,c.x,c.y)<10){
         c.x = mouseX;
         c.y = mouseY;
       }
  }
  
}




float angleBetweenPV_PV(PVector a, PVector mousePV) {
 
  // calc angle : the core of the sketch 
 
  PVector d = new PVector();
 
  // calc angle
  pushMatrix();
  translate(a.x, a.y);
  // delta 
  d.x = mousePV.x - a.x;
  d.y = mousePV.y - a.y;
  // angle 
  float angle1 = atan2(d.y, d.x);
  popMatrix();
 
  return angle1;
} 
 
void displayInDegree(float ang) {
 
  // expects rad, shows in degrees 
 
  fill(255);
  float t=degrees(ang);
 
  if (b.y<a.y) {
    t=360-t;
    t=360-t;
    t=abs(t);
  } else {
    t=360-t;
  }
 
  text(t, 21, height-21);
}
 
//void triangleMy(float ang) {
 
//  pushMatrix();
 
//  translate(a.x, a.y);
 
//  rotate(ang);
 
//  fill(255); // white shield 
//  triangle(60, 0, 
//    80, -30, 
//    80, 30);
 
//  popMatrix();
//}

the wing0.png with transparency

wing0
wing0.jpg1000×1000 57 KB

the problem is it shifts while rotating. I want to keep it centered in the red line as it is appearing when running the sketch before moving the leftmost point.
Capture
like that.

When i click and move the a point, the wing shifts
Capture
How can i achieve keeping it always centered?

1 Like
2

can’t you just add

imageMode(CENTER);

in setup?

actually if you add imageMode(CENTER) and then change your draw code to

void draw(){
  background(125);
  ellipse(a.x,a.y,10,10);
  ellipse(b.x,b.y,10,10);
  ellipse(c.x,c.y,10,10);
  stroke(255,0,0);
  line(a.x,a.y,b.x,b.y);
  stroke(0);
  line(b.x,b.y,c.x,c.y);
   
  float angle=angleBetweenPV_PV(a, b);
 
  displayInDegree(angle); 

  println(int(degrees(angle)));  
  pushMatrix();
  translate(a.x + (b.x - a.x) / 2, a.y + (b.y - a.y) / 2);
  rotate(angle);
  float scale = dist(a.x,a.y,b.x,b.y);
  image(img1, 0, 0, scale, scale);
  popMatrix();
}

this will lock it to between the two vectors and you just need to add in the scaling which i didn’t bother with. edit: i added the scaling back in.

2 Likes
3

Exactly what i needed!
I didn’t think of CENTER imageMode.
Thank you!