Random pathways 

​

// moves up to the mouse, the further away the moves, the more direct the path to the mouse

​

Debug vizualization:

- square fires whenever distance > radius

- left bar is radius (counts down)

- right bar is current distance

- circle line is radius

​

*/

​

// Store x,y coordinates of current location

let x, y;

// Store x,y coordinates of previous location

let px, py;

// Store current xspeed and yspeed

let xspeed, yspeed;

​

// # of frames to wait before changing direction.

let interval;

// Range of random, relative range of vertical random

let range, yscl;

// How much to shift right/left, up/down

let xshift, yshift;

// Mouse to squiggle

let distance, radius;

​

function setup() {

  rectMode(CENTER);

  createCanvas(windowWidth, windowHeight);

  x = width / 2;

  y = (height / 2) + 120;

  px = x;

  py = y;

​

  xspeed = 0;

  yspeed = 0;

​

  interval = 10;

  range = 4;

  yscl = 1;

  xshift = 1;

  yshift = 1;

  radius = width / 1.5;

​

  background(0);

  noStroke();

  noFill();

}

​

function draw() {

  background(0, 50);

  // Draw very transparent background every frame

  // to create fade-out effect

  //background(0, 10);

​

  //Change direction

  if (frameCount % interval == 0) {

    xspeed = random(-range, range * xshift); //shift median to go right/left

    yspeed = random(-range * yscl, range * yscl * yshift); // shift median to go up/down

  }

  //change radius

  if (frameCount % 60 == 0) {

    radius -= 10;

    //print(radius);

  }

​

  // Move

  x += xspeed;

  y += yspeed;

​

  // get dist between mouse and squiggle

  distance = dist(mouseX, mouseY, x, y);

  //print(distance);

​

  // DEBUG

  //rect(10, height/2, 10, -radius); // DEBUG show radius

  //rect(30, height/2, 10, -distance); // DEBUG show distance

​

  // if line too far from mouse with next move,

  // change directionality towards mouse

  if (distance > radius) {

    // DEBUG square does fire whenever distance larger than radius

    //rect(50, height / 2, 20, 20);

​

    xshift = mouseX / x; // left if (mouseX < x), right if (mouseX > x)

    yshift = mouseY / y; // up if (mouseY < y), down if (mouseY > y) 

  }

  // else make completely random with no directional manipulation

  else {

    xshift = 1;

    yshift = 1;

  }

​

  // Another idea: the closer to the mouse, the slower the squiggle goes

  // range = 10 * distance/radius;

​

  // Draw a line from the previous loc to this loc

  stroke(255);

  line(px, py, x, y);

​

  // DEBUG: visualize radius

  //noFill();

  //ellipse(mouseX, mouseY, radius, radius);

​

​

  // Remember current location for next frame

  px = x;

  py = y;

​

  // Wrap around screen

  if (x < 0 || x > width || y < 0 || y > height) {

    if (x < 0) x = width;

    else if (x > width) x = 0;

    if (y < 0) y = height;

    else if (y > height) y = 0;

​

    // Don't draw line when wrapping around

    px = x;

    py = y;

  }

​

  // wrap around radius

  if (radius < 0) {

    radius = width / 2;

  }

​

  // additional code by Nun

​

  // if the mouse is too close to the pathway, restart sketch

  let moused = 30; 

if (pmouseX - mouseX > moused || pmouseY - mouseY > moused || mouseX - pmouseX > moused || mouseY - pmouseY > moused) {

    x = x * 1.1;

    y = y * 1.1;

  }

​

  // Draw a landmark in the center

  fill(255);

  noStroke();

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

​

}