Textured Object Incremental Rotation on Y-Axis

edited January 2018 in Questions about Code

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;
  }
}

Answers

  • Answer ✓

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

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

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

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

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

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

    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();
    }
    
  • Thank you Jeremy!

Sign In or Register to comment.