GRK TUT3 Task 5

by linoskoczek

HTML

<style>
  body {
    background-color: #ccc;
  }

</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<body oncontextmenu="return false;">
  <script type="text/javascript">
    function setup() {
      createCanvas(512, 512);
      background(255);
    }
    var last_x = -1;
    var last_y = -1;

    function mouseDragged() {
      if (mouseButton != LEFT) return;
      if (last_x > 0) {
        line(last_x, last_y, mouseX, mouseY);
      }
      last_x = mouseX;
      last_y = mouseY;
    }

    function mouseReleased() {
      last_x = last_y = -1;
      if (mouseButton == RIGHT) {
        loadPixels();
        flood_fill(mouseX, mouseY);
        updatePixels();
      }
    }

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

    function get_pixel(x, y) {
      idx = (y * 512 + x) * 4;
      return pixels[idx];
    }

    //fill this function
    function flood_fill(x, y) {
      cnt = 1000000;
      x = floor(x);
      y = floor(y);
      stack = [];
      stack.push([x, y]);
      while (stack.length > 0 && cnt-- > 0) {
        [x, y] = stack.pop();
        x = floor(x);
        y = floor(y);
        col = get_pixel(x, y);
        if (col != 255) {
          continue;
        }
        set_pixel(x, y, 200);
        if (x >= 0 && y >= 0 && x <= 512 && y <= 512) {
          stack.push([x - 1, y]);
          stack.push([x + 1, y]);
          stack.push([x, y - 1]);
          stack.push([x, y + 1]);
        }
      }
    }

  </script>
</body>