GRK TUT3 Task 4

by linoskoczek

HTML

<style> body { background-color:#ccc; } </style>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script type="text/javascript">

function setup() {
  createCanvas(512,512);
  background(255);
  var x0=-1;
  var y0=-1;
  var x1=-1;
  var y1=-1;
}

function mousePressed() {
    x0=mouseX;
    y0=mouseY;
}

function mouseDragged() {  
    x1=mouseX;
    y1=mouseY;  
    background(255);
    noStroke();
    fill('red');
    ellipse(x0-3,y0-3,6);
    fill('green');  
    ellipse(x1-3,y1-3,6);
}

function mouseReleased() {
  background(255);
  loadPixels();
  draw_line();
  updatePixels();
}

function set_pixel(xx, y, c) {
    idx=(y*512+xx)*4;
    pixels[idx]=c;
    pixels[idx+1]=c;
    pixels[idx+2]=c;
    pixels[idx+3]=255;
}

function draw_line() {
  dx = x1 - x0;
  dy = y1 - y0;
  a = dy/dx;
  dp = 2*dy - dx;
  deq = 2*dy;
  dinc = 2*dy - 2*dx;
  d = dp;
  y = y0;
  
  for(i = x0; i <= x1; i++) {
    set_pixel(i, y, color(100));
    if(d < 0) d+=deq;
    else {
    	d+=dinc;
      y+= 1;
    }
  }
}
</script>