​

let extraCanvas;

​

​

// object showing digital numbers

var ledDigitalNumbers = {

​

  // Rhombus related variables

  sizeofRhombus: 6,

  rhombusSegmentWidth: 7, // Related to segment design - must follow

  rhombusSegmentHeigth: 9, // Related to segment design - must follow

  widthOfDisplaySegment: this.sizeofRhombus * this.rhombusSegmentWidth,

  heightOfDisplaySegment: this.rhombusSegmentHeigth * this.sizeofRhombus,

  enabledSegment: false,

  strokesize: 10,

  disabledcolor: 50, // grayscale

  enabledcolor: 255, // white

​

  init: function() {

    this.sizeofRhombus = 6;

    this.rhombusSegmentWidth = 7; // Related to segment design - must follow

    this.rhombusSegmentHeigth = 9; // Related to segment design - must follow

    this.widthOfDisplaySegment = this.sizeofRhombus * this.rhombusSegmentWidth;

    this.heightOfDisplaySegment = this.rhombusSegmentHeigth * this.sizeofRhombus;

    this.enabledSegment = false;

    this.strokesize = 10;

    this.disabledcolor = 50; // grayscale

    this.enabeldcolor = 255; // white

​

  },

​

  // Rhombus segment related variables 

  /// rhombusSegmentWidth and rhombusSegmentHeigth must follow.

  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, 1, 1, 0],

      [0, 0, 0, 1, 0, 1, 0],

      [0, 0, 1, 0, 0, 1, 0],

      [0, 1, 0, 0, 0, 1, 0],

      [0, 1, 1, 1, 1, 1, 0],

      [0, 0, 0, 0, 0, 1, 0],

      [0, 0, 0, 0, 0, 1, 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],

    ]

  ],

​

​

  printRhombus: function(x, y, enabled) {

​

    stroke(this.strokesize);

    rectMode(CENTER);

    if (enabled) {

      fill(this.enabledcolor);

    } else {

      //fill(this.disabledcolor);

      fill('rgba(0,255,0, 0.25)')

    }

    rect(x, y, this.sizeofRhombus, this.sizeofRhombus);

  },

​

  displaySegment: function(i, j, enabled) {

    this.printRhombus(i, j, enabled);

  },

​

  lookupSegment: function(i, j, number) {

​

    // find number in table and map it to segments which needs to be turned on

    if (this.numbers[number][j][i] == 1)

      result = true;

    else

      result = false;

​

    return result;

  },

​

  printRhombusNumber: function(x, y, number) {

​

    // create the rhombusSegmentWidth x rhombusSegmentHeigth segments 

    for (i = 0; i < this.rhombusSegmentWidth; i += 1) {

      for (j = 0; j < this.rhombusSegmentHeigth; j += 1) {

        isEnabled = this.lookupSegment(i, j, number);

        this.displaySegment(x + i * this.sizeofRhombus + this.sizeofRhombus, y + j * this.sizeofRhombus + this.sizeofRhombus, isEnabled);

​

      }

    }

​

  },

​

  printAtPos: function(atPos, number) {

    this.init();

    let numberToPrint = number;

    let amountSegPerLine = floor(width / this.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 * this.sizeofRhombus + (ii * this.widthOfDisplaySegment));

      ii++;

    }

​

    this.printRhombusNumber(pos, (line * this.heightOfDisplaySegment) + (line * this.sizeofRhombus), numberToPrint);

  }

​

};

​

​

​

​

function setup() {

  createCanvas(400, 400);

  extraCanvas = createGraphics(400, 400);

  extraCanvas.clear();

  background(0);

​

}

​

​

​

function draw() {

  background(0);

​

  if (mouseIsPressed) {

    //extraCanvas.fill(205, 150);

    extraCanvas.fill('rgba(205,150,0, 0.25)');

    extraCanvas.noStroke();

    extraCanvas.ellipse(mouseX, mouseY, 60, 60);

  }

​

  image(extraCanvas, 0, 0);

​

  ledDigitalNumbers.printAtPos(9, 4);

  ledDigitalNumbers.printRhombusNumber(mouseX,mouseY,0);

​

}