p5.js Web Editor | RhombusNumber

xxxxxxxxxx
// create rhumbus numbers
​
let extraCanvas;
​
// Rhombus related variables
let sizeofRhombus = 6;
let rhombusSegmentWidth = 7; // Related to segment design - must follow
let rhombusSegmentHeigth = 9; // Related to segment design - must follow
let widthOfDisplaySegment = sizeofRhombus * rhombusSegmentWidth;
let heightOfDisplaySegment = rhombusSegmentHeigth * sizeofRhombus;
let enabledSegment = false;
let strokesize = 10;
let disabledcolor = 50; // grayscale
let enabeldcolor = 255; // white
​
// Rhombus segment related variables 
/// rhombusSegmentWidth and rhombusSegmentHeigth must follow.
var numbers = [
  [ // 0
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 1
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 2
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
    [0, 0, 1, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 3
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 4
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 5
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 6
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 7
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 8
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // 9
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ],
  [ // Empty
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
  ]
​
];
​
​
​
function printRhombus(x, y, enabled) {
  stroke(strokesize);
  rectMode(CENTER);
  if (enabled) {
    fill(enabeldcolor);
  } else {
    fill(disabledcolor);
  }
  rect(x, y, sizeofRhombus, sizeofRhombus);
}
​
function displaySegment(i, j, enabled) {
  printRhombus(i, j, enabled);
}
​
function lookupSegment(i, j, number) {
​
  // find number in table and map it to segments which needs to be turned on
  if (numbers[number][j][i] == 1)
    result = true;
  else
    result = false;
​
  return result;
}
​
​
function printRhombusNumber(x, y, number) {
​
  // create the rhombusSegmentWidth x rhombusSegmentHeigth segments 
  for (i = 0; i < rhombusSegmentWidth; i += 1) {
    for (j = 0; j < rhombusSegmentHeigth; j += 1) {
      isEnabled = lookupSegment(i, j, number);
      displaySegment(x + i * sizeofRhombus + sizeofRhombus, y + j * sizeofRhombus + sizeofRhombus, isEnabled);
​
    }
  }
​
}
​
function setup() {
  createCanvas(400, 400);
  extraCanvas = createGraphics(400, 400);
  extraCanvas.clear();
  background(0);
}
​
​
​
function printRhombusNumberAtPos(atPos, number) {
​
  let numberToPrint = number;
  let amountSegPerLine = floor(width / widthOfDisplaySegment - 1);
​
  let i = 0;
  let ii = 0;
  let line = 0;
  let count = 0;
  let pos = 0;
  for (i = 0; i <= atPos; i++) {
    line = floor(i / amountSegPerLine);
    pos = 0;
    if (i % amountSegPerLine == 0) {
      pos = 0;
      ii = 0;
    }
    pos = pos + (ii * sizeofRhombus + (ii * widthOfDisplaySegment));
    ii++;
  }
​
  printRhombusNumber(pos, (line * heightOfDisplaySegment) + (line * sizeofRhombus), numberToPrint);
}
​
function draw() {
​
  if (mouseIsPressed) {
    extraCanvas.fill(205, 150);
    extraCanvas.noStroke();
    extraCanvas.ellipse(mouseX, mouseY, 60, 60);
  }
​
  image(extraCanvas, 0, 0);
​
  let numberToPrint = 0;
  let amountSegPerLine = floor(width / widthOfDisplaySegment - 1);
​
  let i = 0;
  let ii = 0;
  for (i = 0; i < 48; i++) {
    let line = floor(i / amountSegPerLine);
​
    let pos = 0;
    if (i % amountSegPerLine == 0) {
      pos = 0;
      ii = 0;
    }
    pos = pos + (ii * sizeofRhombus + (ii * widthOfDisplaySegment));
    printRhombusNumber(pos, (line * heightOfDisplaySegment) + (line * sizeofRhombus), 1);
    ii++;
  }
​
​
  // override at position with another number
  printRhombusNumberAtPos(9, 3);
​
}
Cookies

Sketch Files

Console

Preview
