NAzT
5/3/2017 - 5:20 PM

grid.paint.p5.js

grid.paint.p5.js

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Grid Painting..</title>
    <script src="libraries/p5.js" type="text/javascript"></script>
    <script src="sketch.js" type="text/javascript"></script>

    <style> body {
        padding: 20px;
        margin: 0;
    }

    canvas {
        vertical-align: top;
    } </style>
</head>
<body>
</body>
</html>
grid.paint.p5.js
content_copyfile_download
var columns;
var rows;
var board;

const w = 20;
var paintFlag = 0;

function setup() {
    createCanvas(800, 400);
    // Calculate columns and rows
    columns = floor(width / w);
    rows = floor(height / w);
    board = [];
    var i;
    for (i = 0; i < columns; i++) {
        board[i] = [];
    }
}

function draw() {
    background(255);
    var _i = floor(mouseX / w);
    var _j = floor(mouseY / w);
    var i, j;

    for (i = 0; i < columns; i++) {
        for (j = 0; j < rows; j++) {
            if ((board[i][j] === 1)) {
                fill(0);
            }
            else {
                fill(255);
            }
            stroke(0);
            rect(i * w, j * w, w - 1, w - 1);
        }
    }

    doPaint(_i, _j);
}

function doPaint(_i, _j) {
    if (mouseX < width && mouseY < height) {
        board[_i][_j] = paintFlag;
    }
}

function mousePressed() {
    paintFlag = (paintFlag === 0)? 1: 0;
}