Loading...
Logo
Processing Forum
Hey,

I have made a sketch of a car moving up and down a road. The car starts at the top and when it reaches the bottom it moves to the other lane and drives upwards, and then down again  in the other lane when it reaches the top..

What I'm trying to do now is that when the car, which is an image, reaches the bottom of the road the image should flip/rotate 180 degrees, and when it reaches the top it should then rotate back 180 degrees. I've played around with translate and rotate but have yet not found a way to do this. How can I manage this?

This is my code so far:

Copy code
  1. float y;
  2. float x;
  3. int speed;
  4. PImage img;


  5. void setup(){
  6.   
  7.  size(800, 800);  
  8.  y = -150; // Y start position car. Car starts outside window
  9.  x = 300; // X start pos car.
  10.  speed = 4; // speed
  11.  img = loadImage("cargo.png");
  12. }



  13. void draw(){
  14.    println("Speed = "+speed);
  15.    //println("xPos = "+x);
  16.    //println("yPos = "+y);*/
  17.   
  18.    
  19.   //road
  20.   fill(78, 75, 75);
  21.   rect(200, 0, 400, 800); 
  22.  //roadend

  23.   // yellow line
  24.   fill(254, 247, 0);
  25.   rect(400, 20, 10, 50);
  26.   rect(400, 90, 10, 50);
  27.   rect(400, 160, 10, 50);
  28.   rect(400, 230, 10, 50);
  29.   rect(400, 300, 10, 50);
  30.   rect(400, 370, 10, 50);
  31.   rect(400, 440, 10, 50);
  32.   rect(400, 515, 10, 50);
  33.   rect(400, 585, 10, 50);
  34.   rect(400, 655, 10, 50);
  35.   rect(400, 725, 10, 50); 
  36.   //end yellow line
  37.   
  38.   //Speed y
  39.   y = y + speed;
  40.   
  41.   
  42.   /// Change lane and drive upwards
  43.     if  (y > height+160) {
  44.        y=800; 
  45.        x= 500; 
  46.        speed = -speed;
  47.        
  48.        
  49.        
  50.    }
  51.    // back to start pos
  52.  if ((y <= -115) && (x == 500)) {
  53.        y = -150;
  54.        x = 300;
  55.        speed = -speed;
  56.        
  57.        }

  58.   drawCar();
  59. }


  60. void drawCar(){
  61.   image(img, x, y);
  62.   

  63. }

  64. void keyPressed() {
  65.                
  66.   
  67.         //ACCELERATE
  68.        if ( key == 'g' || key == 'G' ){
  69.          // up
  70.              if (speed <= -1){
  71.                  speed = speed -2; 
  72.              }
  73.              //down
  74.              if (speed >= 0) {
  75.                  speed = speed +2;
  76.              }
  77. }             //BREAK
  78.              if ( key == 'b' || key == 'B' ) {
  79.           //up
  80.           if (speed <= 0) {
  81.           speed = speed +2;
  82.           }
  83.           //down
  84.          if (speed >= 0) {
  85.            speed = speed -2;
  86.          }
  87.         }
  88. }
Thx in advance.

Replies(2)

You can do this using translate() and rotate() like I've shown below, and I've also made your code easier to read. It's important to stay consistent with your spacing, indentations, comment style, etc. so other people can read it easily and you can keep track of everything. Also, I didn't know how wide or high your "cargo.png" was so I just guessed that it was about 50 x 100.
Copy code
  1. int carwidth = 50;
  2. int carheight = 100;
  3. int y; // You shouldn't need floating points here as you're
  4. int x; //    not dealing with decimals, only whole pixels
  5. int speed;
  6. boolean goingUp;
  7. PImage img;

  8. void setup(){
  9.     size(800, 800);
  10.     y = -150; // Y start position car. Car starts outside window
  11.     x = 300; // X start pos car.
  12.     speed = 4; // speed
  13.     goingUp = false;
  14.     img = loadImage("cargo.png");
  15. }

  16. void draw(){
  17.     //println("Speed = "+speed);
  18.     //println("xPos = "+x);
  19.     println("yPos = "+y);
  20.     
  21.     //road
  22.     fill(78, 75, 75);
  23.     rect(200, 0, 400, 800); 
  24.     //roadend
  25.     
  26.     //yellow line (You can use loops like this to duplicate shapes)
  27.     fill(254, 247, 0);
  28.     for(int i = 0;i < 11;i++) {
  29.         rect(400, 20+(i*70), 10, 50);
  30.     }
  31.     //end yellow line
  32.     
  33.     //Speed y
  34.     y = y + speed;
  35.     
  36.     /// Change lane and drive upwards
  37.     if  (y > height+160) {
  38.         y = 800; 
  39.         x = 500; 
  40.         speed = -speed;
  41.         goingUp = true; // The car has turned and is now going up
  42.     }
  43.     // back to start pos
  44.     if ((y <= -115) && (x == 500)) {
  45.         y = -150;
  46.         x = 300;
  47.         speed = -speed;
  48.         goingUp = false; // The car has turned and is now going down
  49.     }
  50.     
  51.     drawCar();
  52. }


  53. void drawCar(){
  54.     translate(x,y); // From here on 0,0 will be at x,y
  55.     if(goingUp) {rotate(PI);} // If the car is going up, rotate the car 180 degrees
  56.     image(img, 0-(carwidth/2), 0-(carheight/2)); // Draw the image so it's center point is at 0,0
  57. }

  58. void keyPressed() {
  59.     //ACCELERATE
  60.     if ( key == 'g' || key == 'G' ){
  61.         // up
  62.         if (speed <= -1){
  63.             speed = speed -2; 
  64.         }
  65.         //down
  66.         if (speed >= 0) {
  67.             speed = speed +2;
  68.         }
  69.     }
  70.     //BREAK
  71.     if ( key == 'b' || key == 'B' ) {
  72.         //up
  73.         if (speed <= 0) {
  74.             speed = speed +2;
  75.         }
  76.         //down
  77.         if (speed >= 0) {
  78.             speed = speed -2;
  79.         }
  80.     }
  81. }