​

class Arrow {

  constructor(D,R,T,O) {

    this.D = D    // direction vector

    this.R = R    // rotation increment vector

    this.T = T    // translation increment vector

    this.O = O    // position vector

  }

  draw() {

    let t = this

    // Offset the canvas by the position vector

    translate(t.O.x, t.O.y)

    // Rotate the canvas by the direction vector

    applyMatrix(t.D.x, -t.D.y, t.D.y, t.D.x, 0, 0)

    // Draw the arrow centered at the origin

    beginShape()

    vertex(  0, -30),

    vertex( 20, -10),

    vertex( 10, -10),

    vertex( 10,  30),

    vertex(-10,  30),

    vertex(-10, -10),

    vertex(-20, -10)

    endShape(CLOSE)

    // Restore the origin to the top-left corner

    // with rotation 0, ... (initial draw state)

    resetMatrix()

    // Increment motion variables ready for 

    // the next draw frame:

    // Update the direction by the rotation increment

    let x = t.D.x * t.R.x - t.D.y * t.R.y

    let y = t.D.x * t.R.y + t.D.y * t.R.x

    t.D.x = x

    t.D.y = y

    // Update the position by the translation increment

    // and wrap around the canvas

    t.O.x = (width + t.O.x + t.T.x) % width

    t.O.y = (height + t.O.y + t.T.y) % height

  }

}

​

function setup() {

  createCanvas(400, 400)

  noFill()

​

  for(let i = 0; i < 20; i++) {

    let ang = random(PI/500, PI/2000) * 

        (random() < 0.5 ? -1 : 1)

    // create an arrow with random motion paramaters

    arrows[i] = new Arrow(

      p5.Vector.random2D(),

      p5.Vector.fromAngle(ang),

      p5.Vector.random2D().div(5),

      createVector(random(width), random(height))

    )

  }

}

​

function draw() {

  background(220)

  for(let A of arrows) {

    A.draw()

  }

}