GRK TUT3 Task 2

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, r, g, b) {
    idx=(y*512+xx)*4;
    pixels[idx]=r;
    pixels[idx+1]=g;
    pixels[idx+2]=b;
    pixels[idx+3]=255;
}

function draw_line() {  
	dx = x1 - x0;
  dy = y1 - y0;
  a = dy/dx;
  
  for(i = 0; i <= 512; i++) {
  	for(j = 0; j <= 512; j++) {
      dxy = a*(i - x0) - (j - y0);
      if(dxy < 0) {
        set_pixel(i, j, Math.round((-1)*dxy), 0, 0);
      }
      else {
        set_pixel(i, j, 0, Math.round(dxy), 0);
      }
    }
  }
}
</script>