creating a moving arrow...

Hey, I'm new to processing and am stuck trying to get an arrow (made form three seperate lines) which forms a class with its own variables e.g velocity/speed etc. I am curious as to how I would attempt getting the arrow to rotate when it hits the boundaries of the screen and then travel in the direction of which it is heading and to continue doing so for all four edges of the screen.

This is my code so far...

int len = 8; int posX, posY = 0; int speedX, speedY = 0;

void setup(){ size(400,400); }

void draw(){ speedY++; speedX++; background(255); strokeWeight(2); stroke(255,0,0); posX += speedX; posY += speedY; drawArrow(posX,posY,80,10);

}

void drawArrow(int cx, int cy, int len, float angle){ pushMatrix(); translate(cx, cy); rotate(radians(angle)); line(0,0,len, 0); line(len, 0, len - 8, -8); line(len, 0, len - 8, 8); popMatrix(); }

any help with this would be great :) thanks!

Answers

  • edited February 2015

    See How to format code and text...
    See also the Objects tutorial, and perhaps also From several arrays to classes.

  • Hey, thanks for replying! That has helped me out a lot, thank you :) This is my code so far:

    int x = 100;

    int y = 100;

    int speedX = 4;

    int speedY = 1;

    int len = 8;

    void setup() {

    size(400, 400);

    smooth();

    }

    void draw() {

    background(0);

    strokeWeight(2);

    stroke(255, 0, 0);

    drawArrow(x, y, 80, 10);

    x = x + speedX;

    y = y + speedY;

    if ((x > width-60) || (x < 0-20))

    {

    speedX = speedX * -1;
    

    }

    if ((y > height) || (y < 0))

    {

    speedY = speedY * -1;
    

    }

    stroke(0);

    fill(255);

    }

    void drawArrow(int cx, int cy, int len, float angle) {

    pushMatrix();

    translate(cx, cy);

    rotate(radians(angle));

    line(0, 0, len, 0);

    line(len, 0, len - 8, -8);

    line(len, 0, len - 8, 8);

    popMatrix();

    }

    i have attempted adding a rotation each time it hits the edges of the screen but can't seem to implement this, any suggestions?

  • edited February 2015

    That's the same code than above, still not formatted, still without classes.
    Not sure what you have read from the links I gave... BTW, you can edit a message, to improve its format...

    "i have attempted adding a rotation each time it hits the edges of the screen but can't seem to implement this"
    You call drawArrow with a constant angle, it should change after a change of direction.

  • edited February 2015
    PVector p = new PVector(200,200,0);
    float a = random(TWO_PI);
    PVector v = new PVector(2*cos(a),2*sin(a),1);
    
    void setup(){
      size(400,400);
    }
    
    void draw(){
      p.add(v);
      if(p.x>width||p.x<0){v.x*=-1;p.x=p.x<0?0:width;}
      if(p.y>height||p.y<0){v.y*=-1;p.y=p.y<0?0:height;}
      background(0);
      stroke(255);
      line(p.x,p.y,p.x+20*v.x,p.y+20*v.y);
    }
    
  • thanks for that code TfGuy44, i just have a few questions;

    can you explain to me what these lines mean?

    p.x=p.x<0?0:width; p.y=p.y<0?0:height;

    and also, how, by using those global variables at the beginning of the code, i can add an arrow head to the existing line? thanks

  • edited February 2015

    Conditional operator: https://processing.org/reference/conditional.html

    p.x = p.x<0? 0 : width; is the same as if (p.x < 0) p.x = 0 else p.x = width;

    Here's an alternative version using constrain(), which achieves the same thing: O:-)
    https://processing.org/reference/constrain_.html

    p.add(v);
    
    v.x *= p.x>width  | p.x<0? -1 : 1;
    v.y *= p.y>height | p.y<0? -1 : 1;
    
    p.x = constrain(p.x, 0, width);
    p.y = constrain(p.y, 0, height);
    
  • edited February 2015

    Hopefully you understand that the variable p is for position, and variable v is for velocity. The line is being drawn between two points, one of which is the position. What's the other point? Well, it's 20 times the velocity away from the position! With those two points on this line, you can get the angle that line makes. (Or, if you're clever about it, you can update the global variable a when the line changes direction...) With that angle and knowing where the second point is, you can use a combination of pushMatrix(), translate(), rotate(), line(), rotate(), line(), and popMatrix() to draw the arrow head.

Sign In or Register to comment.