Drawing a Line In the Frame Buffer

• Assume we have a SetPixel(x,y,c) function
  • This will set the pixel at position (x,y) to be color c.
  • The position (x,y) are pixel locations (ie 0 to maxX, 0 to maxY)
  • For us, this will just be points on the canvas.
• Can we use this to draw a line between two points in the frame buffer?
• Two cases are easy, a horizontal line and a vertical line.
  • Two special cases, but each is an easy loop.
• How about a general line.
  • Drawing a line between $(x_0, y_0)$ and $(x_1,y_1)$.
  • Assume $x_0 \ne x_1, y_0 \ne y_1$
  • WLOG assume $x_0 \lt y_0$
  • Point slope from : $ y-y_0 = m(x-x_0), m = \frac{y_1-y_0}{x_1-x_0}$
  • so $y = mx - mx_0 + y_0$
  • or $b = y_0 + mx_0$.

  • let m = (y1-y0)/(x1-x0);
    let b = y0+m*x0;
    
    for(let x=x0; x <= x1; x++) {
       let y = m*x + b;
       SetPixel(x,y);
    } 

  • Give it a try: badLine.php
• Can we fix the dashed line problem?
  • What exactly is the cause of this problem?
    • Axis of major change.
  • How can we detect the problem?
  • how do we solve it
    • $ y-y_0 = m(x-x_0)$
    • $ mx = y - y_0 + mx_0$
    • $ x = \frac{1}{m}(y-y_0) + x_0$
    • $ x = \frac{1}{m}(y) - \frac{1}{m}y_0 + x_0$
    • let $c = -\frac{1}{m}y_0 + x_0$
    • $ x = \frac{1}{m}(y) +c$
  • Give it a try: medLine.php
• But is this the best we can do?
  • We will be drawing a LOT of lines.
  • With this method, every iteration involves
    • An integer addition. (x++, or y++)
    • A floating point multiply (m*x or 1/m*y)
    • And one floating point adds (+b or + c)
  • WLOG assume $|m| \lt 1$.
    • For an arbitrary point $x_n$,
    • We know that $x_n = x_0 + n$
    • and $y_n = m(x_n) + b$.
    • so $y_{n+1} = m(x_{n+1}) + b$
    • But $x_{n+1} = x_n + 1$
    • so $y_{n+1} = m(x_n+1) + b$
    • $y_{n+1} = mx_n + m + b$
    • $y_{n+1} = mx_n + b + m $
    • $y_{n+1} = y_n + m $
  • We can easily derive that for $|m| > 1 $
    • $x_{n+1} = 1/m + x_n $
  • we know that $y_0 = y0$ the input paramter.
  • So the code becomes

    • let y = y0;
      for(let x = x0; x <= x1; x++) {
           y += m;
           SetPixel(x,y);
      } 

    • This is an integer and a floating point add.
    • And is much better.
• Give it a try: dda.php
• By the way, this code uses a three-state state machine
  • State 0: no points
    • On click add first point.
    • Go to state 1
  • State 1: 1 point
    • On click add second point.
    • Go to state 2
  • State 2: two points,
    • draw a line.
    • Go to state 0