So, I have been banging my head against the wall for a bit on this one, and hopefully someone can help with this.

I have been trying to draw lines from coordinates, so that it looks as if they are being drawn in real time by a pen or paintbrush.  The cords are pixel locations from an image that I load up with the sketch.

Now, the problem that I am having is that I have an array with all of the cords with the pixel locations, and that's all good, but since they are not loaded into the array by order of proximity along the lines of the drawing, (just in a top down for-loop) I can't just slowly iterate through the array.  I want it to follow a line, not just a top down revealing of points.

Anyone have any ideas?

I'd post code, but this seems more concept than code based, but I can post my code if needed.

thanks! I think I might try that approach.  It'll change around the code that I am about to post, but that's cool!

Anyway, you're right, I should post my code.  So here it is in all it's half baked glory:

UPDATE:  It's a b/w line drawing that I am trying to recreate.  

Code:

PImage a;
int[] aPixels;
float adv=0;
Cords cords = new Cords();


void setup() {
  a = loadImage("naomi_portrait.jpg");
  size(a.width, a.height);
  aPixels = new int[width*height];
  colorRun(200);
  smooth();

}
void draw(){
  background(255);
  noStroke();
  fill(0, 175);
  for (int i=0; i<adv; i++) {
    
    ellipse(cords.getX(i),cords.getY(i), 1,1);

  }
  adv=adv + 0.75;
 if (adv>cords.length()) adv=0;
}


void colorRun(int thresh) {


  int counter = 0;



  for (int y=1; y<height-1; y++) {
    for (int x=1; x<width-1; x++) {

      int loc = x + y*width;

      if (brightness(a.pixels[loc])<thresh) cords.add(x,y);

    }
  }

}

class Cords {

ArrayList x = new ArrayList();
ArrayList y = new ArrayList();

  public Cords() {


  }

  void add(int xCord, int yCord) {

    x.add(xCord);
    y.add(yCord);

  }

  int getX(int i) {
    java.lang.Integer tmp = (java.lang.Integer) x.get(i);
    
    return tmp;
  }

  int getY(int i) {
    
    java.lang.Integer tmp = (java.lang.Integer) y.get(i);
    
    return tmp;

  }
  
  int length() {
    
    return x.size();
    
  }

}

 

I feel bad about the first solution, so I cooked up a much simpler solution that might help.

Code:

PImage a;
int[] aPixels;
float adv=0;
Cords cords = new Cords();


void setup() {
  a = loadImage("naomi_portrait.jpg");
  size(a.width, a.height);
  aPixels = new int[width*height];
  colorRun(200);
  smooth();

}

int penX = 0;
int penY = 0;

void draw(){

  
  int i = cords.getClosestIndex(penX,penY);
  if(i >= 0){
  println(""+i);
  //background(255);
  noStroke();
  fill(0, 175);
  //for (int i=0; i<adv; i++) {

    ellipse(cords.getX(i),cords.getY(i), 1,1);

  //}
  adv=adv + 0.75;
  if (adv>cords.length()) adv=0;
  penX = cords.getX(i);
  penY = cords.getY(i);
  
  cords.killAPixel(i);
}

}


void colorRun(int thresh) {
  int counter = 0;
  for (int y=1; y<height-1; y++) {
    for (int x=1; x<width-1; x++) {
      int loc = x + y*width;
      if (brightness(a.pixels[loc])<thresh) cords.add(x,y);
    }
  }
}

class Cords {

  ArrayList vectorList = new ArrayList();

  //ArrayList x = new ArrayList();
  //ArrayList y = new ArrayList();

  public Cords() {


  }

  void add(int xCord, int yCord) {

    //x.add(xCord);
    //y.add(yCord);

    vectorList.add(new PVector(xCord, yCord));

  }

  int getX(int i) {


    //java.lang.Integer tmp = (java.lang.Integer) x.get(i);
    //return tmp;
    PVector v = (PVector)vectorList.get(i);
    return (int)v.x;
  }

  int getY(int i) {

    //java.lang.Integer tmp = (java.lang.Integer) y.get(i);

    //return tmp;
    PVector v = (PVector)vectorList.get(i);
    return (int)v.y;
  }

  int length() {
    //return x.size();
    return vectorList.size();
  }

  int getClosestIndex(int xCord, int yCord){
    int answerIndex = -1;
    float bestDistance = dist(0, 0, width, height);
    PVector targetVector = new PVector(xCord, yCord);
    for(int i = 0; i < vectorList.size(); i++){
      PVector v = (PVector)vectorList.get(i);
      float d = dist(targetVector.x, targetVector.y, v.x, v.y);
      if(d < bestDistance){
        answerIndex = i;
        bestDistance = d;
      }
     

    }   
     return answerIndex;
  }
  
  void killAPixel(int deathIdx){
    vectorList.remove(deathIdx);
  }

} 




 

Welcome, that was fun.

Few bugs here and there, but if you can favor a certain direction of the "stroke" in each "closest pixel" algorithm, I think you have a legit stroke (e.g., if you want right-handed, favor "/" type diagonal).

Good luck with your project!