p5.js Web Editor | Ring badger

xxxxxxxxxx
const data = [
  [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
  [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1],
  [1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1],
  [1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1],
  [1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1],
  [0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 1, 0],
  [0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
  [0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1, 1],
  [1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0],
  [0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0],
  [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0],
  [1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0],
  [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1],
  [1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1],
  [1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0],
  [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0],
  [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1],
];
​
const w = 500;
const h = 500;
const res = 25;
const s = w / res;
const borderRadius = 8;
​
function setup() {
  createCanvas(w, h);
}
​
function test(i, j) {
  if (i < 0 || j < 0 || i >= res || j >= res) {
    return false;
  } else {
    return data[i][j];
  }
}
​
const testLeft = (i, j) => test(i, j - 1);
​
function testRight(i, j) {
  return test(i, j + 1);
}
​
function testUp(i, j) {
  return test(i - 1, j);
}
​
function testDown(i, j) {
  return test(i + 1, j);
}
​
function testXNeighbors(i, j) {
  return testLeft(i, j) && testRight(i, j);
}
​
function testYNeighbors(i, j) {
  return testUp(i, j) && testDown(i, j);
}
​
function testAnyNeighbor(i, j) {
  return testLeft(i, j) || testRight(i, j) || testUp(i, j) || testDown(i, j);
}
​
function testUL(i, j) {
  return test(i - 1, j - 1);
}
​
function testUR(i, j) {
  return test(i - 1, j + 1);
}
​
function testLL(i, j) {
  return test(i + 1, j - 1);
}
​
function testLR(i, j) {
  return test(i + 1, j + 1);
}
​
function testAnyCorner(i, j) {
  return testUL(i, j) || testUR(i, j) || testLL(i, j) || testLR(i, j);
}
​
function paintFilledCell(i, j) {
  const x = j * s;
  const y = i * s;
  fill(0);
​
  if (testXNeighbors(i, j) || testYNeighbors(i, j)) {
    // Fill completely if the cell is contained
    // in an orthogonal row of filled cells.
    rect(x, y, s, s);
  } else {
    let ulRadius = borderRadius;
    let urRadius = borderRadius;
    let llRadius = borderRadius;
    let lrRadius = borderRadius;
    // Create rounded edges by painting circles and filling
    // in the necessary corners with rectangles.
    //circle(x + s / 2, y + s / 2, s);
    if (testUp(i, j) || testLeft(i, j) || testUL(i, j)) {
      ulRadius = 0;
      //paintUL(x, y);
    }
    if (testUp(i, j) || testRight(i, j) || testUR(i, j)) {
      urRadius = 0;
      //paintUR(x, y);
    }
    if (testDown(i, j) || testLeft(i, j) || testLL(i, j)) {
      llRadius = 0;
      //paintLL(x, y);
    }
    if (testDown(i, j) || testRight(i, j) || testLR(i, j)) {
      lrRadius = 0;
      //paintLR(x, y);
    }
    rect(x, y, s, s, ulRadius, urRadius, lrRadius, llRadius);
  }
}
​
/*
Note to self: what if each dark region was an area to randomly distribute
points, then you uhhhhh draw random bipartite graphs between adjacent filled
cells. 
*/
​
function paintEmptyCell(i, j) {
  const x = j * s;
  const y = i * s;
  let requiresPaint = false;
  let ulRadius = 0;
  let urRadius = 0;
  let llRadius = 0;
  let lrRadius = 0;
​
  fill(0);
​
  if (testUp(i, j) && testLeft(i, j)) {
    ulRadius = borderRadius;
    requiresPaint = true;
  }
  if (testUp(i, j) && testRight(i, j)) {
    urRadius = borderRadius;
    requiresPaint = true;
  }
  if (testDown(i, j) && testLeft(i, j)) {
    llRadius = borderRadius;
    requiresPaint = true;
  }
  if (testDown(i, j) && testRight(i, j)) {
    lrRadius = borderRadius;
    requiresPaint = true;
  }
​
  if (requiresPaint) {
    fill(0);
    rect(x, y, s, s);
    fill(255);
    rect(x, y, s, s, ulRadius, urRadius, lrRadius, llRadius);
  }
}
​
function drawPixel(i, j) {
  if (test(i, j)) {
    paintFilledCell(i, j);
  } else {
    paintEmptyCell(i, j);
  }
}
​
function draw() {
  background(255);
  fill(0);
  noStroke();
  for (let i = 0; i < res; i++) {
    for (let j = 0; j < res; j++) {
      drawPixel(i, j);
    }
  }
  noLoop();
}
​
Cookies

Sketch Files

Console

Preview
