idea: two arrays, the target and original, match each point in the original to a point in the target that takes the lowest cost(smallest distance) to travel

*/

let points; //starting array of points

let target; //target position of points

let matchPts; //array matching their index

​

var count = 100; //how many points there are in total

var BIG = 100000;

​

var tmax = 1000; //controls speed, smaller = faster

var t = 0;

​

var mode = 0;

var submode = 0;

var inited = true;

​

//mode 1

var ink = count;

var safedrawing = false; //if we are in drawing mode

​

function setup() {

  createCanvas(800, 800);

  background(220);

  /* initialize the data values */

  points = [];

  target = [];

  initTarget(count);

  initPoints(count);

​

  matchPts = getMatch(points, target);

}

​

function draw() {

  background(220);

  textSize(12);

  text("use right arrow key to switch to different mode", width/2, 10);

  if (mode == 0) {

    if (t < tmax) {

      t++;

    } else {

      t = 0;

      initPoints(count);

      matchPts = getMatch(points, target);

    }

    updatePoints(t);

    displayTarget();

    displayPoints();

  } else if (mode == 1) {

    mode1Manager();

  }

}

​

function keyPressed() {

  if (keyCode === RIGHT_ARROW) {

    mode = (mode + 1) % 2;

    print(mode);

    if (mode == 0) {

      mode0init();

    } else if (mode == 1) {

      mode1init();

    }

  }

}

​

function mouseDragged() {

  if (mode == 1 && safedrawing == true) {

    ellipse(mouseX, mouseY, 5, 5);

    ink--;

    if (submode == 1) {

      pt = new Particle();

      pt.loc.x = mouseX;

      pt.loc.y = mouseY;

      points.push(pt);

    } else if (submode == 2) {

      pt = new Particle();

      pt.loc.x = mouseX;

      pt.loc.y = mouseY;

      target.push(pt);

    }

  }

  // prevent default

  return false;

}

​

/******** MY FUNCTIONS **************/

function initTarget(c) {

  /*initalize the array target with particles

    in: number of particles 

    out: void

    */

  target = [];

  //for now, make a grid

  n = int(sqrt(c));

  step = width / n;

  padding = step / 2;

  for (var x = 0; x < n; x++) {

    for (var y = 0; y < n; y++) {

      let pt = new Particle();

      pt.loc.x = x * step + padding;

      pt.loc.y = y * step + padding;

      target.push(pt);

    }

  }

}

​

function initPoints(c) {

  /* initialize points array with particles 

  in: number of particles 

  out: void

    */

  points = [];

  /*for now, generate random xy positions*/

  for (var i = 0; i < c; i++) {

    let pt = new Particle();

    pt.loc.x = random(width);

    pt.loc.y = random(height);

    points.push(pt);

  }

}

​

function displayTarget() {

  /* displays all the target dots */

  fill(255, 204, 0);

  for (var i = 0; i < target.length; i++) {

    target[i].display();

  }

}

​

function displayPoints() {

  /* displays all the point dots */

  fill(65, 65, 65);

  for (var i = 0; i < points.length; i++) {

    points[i].display();

  }

}

​

function updatePoints(t) {

  /* update the position of each point by stepping in the direction of its velocity */

  let weight = t / tmax;

  for (var i = 0; i < points.length; i++) {

    //print("last working" + i);

    var ptm = target[matchPts[i]].loc.copy();

    var ptMatch = ptm.mult(weight);

    var ptOG = points[i].loc.mult(1.0 - weight);

    points[i].loc = ptOG.add(ptMatch);

​

    /*

    loc = points[i].loc;

    v = points[i].velocity;

    points[i].loc = loc.add(v.mult(t));

    */

  }

}

​

function mode0init() {

  /* initialize the data values */

  points = [];

  target = [];

  initTarget(count);

  initPoints(count);

​

  matchPts = getMatch(points, target);

​

  submode = 0;

}

​

function mode1init() {

  /* initialize the data values */

  submode = 1;

  points = [];

  target = [];

}

​

function drawUI(step) {

  if (step == 1) {

    textSize(32);

    text("draw your first shape!", 10, 30);

    text("ink left:" + ink, 10, 65);

    if (ink == 0) {

      text("click space to move on!", 10, 90);

    }

  } else if (step == 2) {

    textSize(32);

    text("draw your second shape!", 10, 30);

    text("ink left:" + ink, 10, 65);

  } else if (step == 3) {

    text("now just wait a little bit...", 10, 30);

  }

}

​

function mode1Manager() {

  /* manages drawing and recording shapes */

  /* 4 steps: 

     1. user draw original shape

     2. user draw target shape

     3. calculate

     4. interpolate & repeat animation

  */

  if (submode == 1) {

    //user drawing first shape

    if (ink > 0) {

      safedrawing = true;

    } else {

      safedrawing = false;

      submode = 2;

      ink = count;

    }

    displayPoints();

  } else if (submode == 2) {

    if (ink > 0) {

      safedrawing = true;

    } else {

      safedrawing = false;

      submode = 3;

    }

    displayTarget();

  } else if (submode == 3) {

    matchPts = getMatch(points, target);

    submode = 4;

  } else if (submode == 4) {

    //animation

    if (t < tmax) {

      t++;

    } else {

      t = 0;

    }

    updatePoints(t);    

    displayTarget();

    displayPoints();

  }

​

  drawUI(submode);

}

​