Textured Object Incremental Rotation on Y-Axis

woodhous

Hi!

I'm trying to make an custom shape object that's been textured turn incrementally with rotateY() after it reaches a certain point in an oscillation. (Essentially, I'm trying to make it look like this boat image is doing a little loop around this lake if you can picture that).

Unfortunately, I'm having some difficulties in making it work properly. I've tried utilizing vectors to have the shape 'follow' the direction of motion but couldn't get that working properly. I also tried using conditionals so that when it reaches a certain point of the curve it starts to rotate X radians, but that also didn't work.

Has anyone tried something like this before?

Thank you so much!

Code below:

//tab 1

Boat boaty;
PImage background;
PImage boat;
float angle = 45;
float aVelocity = 0.01;

void setup(){
smooth();
size(638,562,P3D);
background = loadImage("background.png");
boat = loadImage("boat.png");
boaty = new Boat(boat);
}

void draw(){
image(background,0,0,width,height);
boaty.display();
boaty.move();
}

//tab 2

**class Boat {
 float r = 75;
 float theta = 0;
 float x,y,z;
 PImage img;

  Boat(PImage tempI) {
    img = tempI;
  }

  void display() {
  textureMode(NORMAL);
  noStroke();

//translating to where I want the boat to start
  translate(390,290);
  scale(.65);

// println(x,y);

// putting in variables to create the motion of the boat
  translate(x*2,y/2,50);


  pushMatrix();
  beginShape();
  texture(img);
  vertex(0,0,0,0);
  vertex(115,0,1,0);
  vertex(115,160,1,1);
  vertex(0,160,0,1);
  endShape();
  popMatrix();
  }

  void move(){
  x = r * cos(theta);
  y = r * sin(theta);
  angle += aVelocity;
  theta+= .01;
  }
}

koogs

Edit post, highlight code, press Ctrl-o to format

koogs

And get rid of the formatting you've already tried to apply.

jeremydouglass

• https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

One approach: you could orient your boat to the tangent to your curve, which you an calculate yourself

• https://en.wikipedia.org/wiki/Tangent

...or use the Processing built-in curveTangent():

• https://processing.org/reference/curveTangent_.html

Note that curveTangent() is used to calculate the x and y components separately.

Study the reference example, which draws line perpendicular to a curve:

• https://processing.org/reference/curveTangent_.html

Here is a simple modification of that example that draws rectangles which rotate as they travel along the curve. Instead of a rectangle, you could use an image or anything else.

// add centered rect
rectMode(CENTER);

noFill();
curve(5, 26, 73, 24, 73, 61, 15, 65); 
int steps = 6;
for (int i = 0; i <= steps; i++) {
  float t = i / float(steps);
  float x = curvePoint(5, 73, 73, 15, t);
  float y = curvePoint(26, 24, 61, 65, t);
  //ellipse(x, y, 5, 5);
  float tx = curveTangent(5, 73, 73, 15, t);
  float ty = curveTangent(26, 24, 61, 65, t);
  float a = atan2(ty, tx);

  // remove perpendicular lines
  //a -= PI/2.0;
  // line(x, y, cos(a)*8 + x, sin(a)*8 + y);

  // use a (angle of tangent) to rotate a rect
  // and draw it centered on the path.
  pushMatrix();
  translate(x, y);
  rotate(a);
  rect(0,0,10,10);
  popMatrix();
}

woodhous

Thank you Jeremy!