y = 250;

let vx = 0,

  vy = 0;

let ax = 0,

  ay = 0;

const dt = 0.1;

​

function setup() {

  createCanvas(750, 500);

}

​

function draw() {

  background(0);

  vx += ax * dt;

  vy += ay * dt;

  x += vx * dt;

  y += vy * dt;

​

  ax = 0;

  ay = 0;

  if (keyIsDown(LEFT_ARROW)) {

    ax = -2;

  }

  if (keyIsDown(RIGHT_ARROW)) {

    ax = 2;

  }

  if (keyIsDown(UP_ARROW)) {

    ay = -2;

  }

  if (keyIsDown(DOWN_ARROW)) {

    ay = 2;

  }

​

  wrapEdges();

  drawBlob(x, y, vx, vy, ax, ay);

}

​

function drawBlob(x, y, vx, vy, ax, ay) {

  push();

  stroke(255);

  strokeWeight(3);

  noFill();

  ellipseMode(CENTER);

  ellipse(x, y, 50, 50);

  drawVec(x, y, vx, vy, color(255, 0, 0), 5);

  drawVec(x, y, ax, ay, color(255, 0, 255), 20);

  pop();

}

​

function drawVec(x, y, vx, vy, myColor, s) {

  const sx = vx * s;

  const sy = vy * s;

  push();

  stroke(myColor);

  strokeWeight(3);

  fill(myColor);

  if (vx != 0 || vy != 0) {

    translate(x, y);

    line(0, 0, sx, sy);

    const vec = createVector(sx, sy);

    rotate(vec.heading());

    let arrowSize = 7;

    translate(vec.mag() - arrowSize, 0);

    triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);

    pop();

  }

}

​

function wrapEdges() {

  if (x < -25) {

    x = width + 25;

  }

  if (x > width + 25) {

    x = -25;

  }

  if (y < -25) {

    y = height + 25;

  }

  if (y > height + 25) {

    y = -25;

  }

}