Drawing a shape in processing

Question

I was working on an animation on processing. Then, I have a question about the loop. Normally, my code is more long. However, I made a simple code which can usefull also for the beginners. My sample code:

void setup(){
  println("Line between points " + curr + " and " + (curr+1));
  println("initial X: " + initialX + " initial Y: " + initialY );
  println("final   X: " + finalX + "   final Y: " + finalY );
  counter = 0; // reset counter;
}

void draw() {
  point(initialX, initialY);
  println(initialX, initialY, p);

  }

So, like you see I used "Bresenhams Algorithm" for drawing the lines. However when I draw the lines it doesn't draw the lines between points. It's just drawing a little bit. Normally my text file is so long. How to I draw lines that can follow from first x and y coordinates to last x and y coordinates without disconnection?

Answer 1

This is implementation of a version of Bresenham's algorithm using balancing the positive and negative error between the x and y coordinates:

/*
String[] coordinates = {    // Creating an array for my text file.
"117 191",
"96 223",
"85 251",
"77 291",
"78 323",
"84 351",
"97 378",
"116 404",
"141 430"
};
*/
int[][] points;

int deltaX, deltaY;
int initialX, initialY;  // Initial point of first coodinate
int finalX, finalY;      // Final point of first coodinate
int counter = 0;
int curr = 0;
int sx, sy, err;

void setup() {

    size(500, 500);

    strokeWeight(4);
    frameRate(25);

    coordinates = loadStrings("coordinates.txt");
    beginShape();         // It combines the all of vertexes

    points = new int[coordinates.length][2];
    int row = 0;
    for (String line : coordinates) {
        String[] pair = line.split(" ");
        points[row] = new int[] { Integer.parseInt(pair[0]), Integer.parseInt(pair[1])};
        println(points[row][0]); // print x
        println(points[row][1]); // print y
        row++;
    }

    fixLines();

    endShape(CLOSE);
}

void fixLines() {
   int ix = curr % points.length;
   int jx = (curr + 1) % points.length;
   initialX = points[ix][0];
   initialY = points[ix][1];
   finalX = points[jx][0];
   finalY = points[jx][1];

   deltaX = abs(finalX - initialX);
   sx = initialX < finalX ? 1: -1;
   deltaY = -abs(finalY - initialY);
   sy = initialY < finalY ? 1: -1;
   err = deltaX + deltaY;

   println("Line between points " + curr + " and " + (curr+1));
   println("[" + initialX + ", " + initialY + "] - [" + finalX + ", " + finalY + "]");
   println("deltaX=" + deltaX);
}

void draw() {

    point(initialX, initialY);
    if (initialX == finalX && initialY == finalY) {
        curr++;
        if (curr == points.length) {
            noLoop();
        } else {
            fixLines();
        }
    } else {
        int e2 = 2 * err;
        if (e2 >= deltaY) {
            err += deltaY;
            initialX += sx;
        }
        if (e2 <= deltaX) {
            err += deltaX;
            initialY += sy;
        }
    }
}

The output is very close to linear implementation:

Answer 2

I try updating method draw to update deltaY and continue drawing until deltaY != 0 but result does not look good. Most likely you need to review your implementation of the algorithm and related calculations.

void draw() 
{

  point(initialX, initialY);
  println(initialX, initialY, p);

  if (finalX > initialX )
    initialX++;
  else
    initialX--;

  if (p < 0) {
    p = p + 2 * deltaY;
  } else {
    if (initialY > finalY)
      initialY--;
    else
      initialY++;

    p = p + 2 * deltaY - 2 * deltaX;
  }
  deltaY = abs(finalY - initialY); // update deltaY

  counter++;
  if (counter > deltaX) {
    if (deltaY > 0) {
      counter--;
    } else {
      curr++;
      if (curr == points.length) {
        noLoop(); // possibly you should break out of the main loop here
      } else {
      fixLines();
      }
    }
  }
}

Implementation with line(initialX, initialY, finalX, finalY); looks much better.

void draw() 
{
  point(initialX, initialY);
  println(initialX, initialY, p);
  line(initialX, initialY, finalX, finalY);
  curr++;
  if (curr == points.length) {
    noLoop();
  } else {
    fixLines();
  }
}