Linear motion with controls.

Mouse position controls direction and speed of movement.

Distance from center determines speed.

Angle from center determines direction.

*/

​

// Variables to store x,y coordinates of current position

let x, y

// Variables to store x,y coordinates of previous position

let px, py;

​

let xspeed = -0.4;

let yspeed = 0.8;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // Initial position is center

  x = width / 2;

  y = 10;

​

  background(0);

  rectMode(CENTER);

}

​

function draw() {

  // Change xspeed and yspeed according to the mouse position

  // relative to the center.

  xspeed = (mouseX-(width/2))/100;

  yspeed = (mouseY-(height/2))/100;

  x += xspeed;

  y += yspeed;

​

  // Set fill color to white

  stroke(255);

  strokeWeight(3);

  // Draw a circle at x,y

  line(px, py, x, y);

​

  // Remember current position as previous position for next frame

  px = x;

  py = y;

​

  // Draw a landmark in the center

  fill(255);

  rect(width/2, height/2, 10, 10);

}

​

​

​

​