​

let bgColor;

let litColor;

let dimColor;

let offColor;

​

const SegmentOrientation =

{

  Horizontal: 0,

  Vertical: 1,

};

​

const sA = [ 0.0, -0.5,  SegmentOrientation.Horizontal];

const sB = [ 0.5, -0.25, SegmentOrientation.Vertical];

const sC = [ 0.5,  0.25, SegmentOrientation.Vertical];

const sD = [ 0.0,  0.5,  SegmentOrientation.Horizontal];

const sE = [-0.5,  0.25, SegmentOrientation.Vertical];

const sF = [-0.5, -0.25, SegmentOrientation.Vertical];

const sG = [ 0.0,  0.0,  SegmentOrientation.Horizontal];

const segments = [sA, sB, sC, sD, sE, sF, sG];

​

const digits =

[

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

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

  [1, 1, 0, 1, 1, 0, 1],  // 2

  [1, 1, 1, 1, 0, 0, 1],  // 3

  [0, 1, 1, 0, 0, 1, 1],  // 4

  [1, 0, 1, 1, 0, 1, 1],  // 5

  [1, 0, 1, 1, 1, 1, 1],  // 6

  [1, 1, 1, 0, 0, 0, 0],  // 7

  [1, 1, 1, 1, 1, 1, 1],  // 8

  [1, 1, 1, 1, 0, 1, 1],  // 9

  [1, 1, 1, 0, 1, 1, 1],  // A

  [0, 0, 1, 1, 1, 1, 1],  // b

  [1, 0, 0, 1, 1, 1, 0],  // C

  [0, 1, 1, 1, 1, 0, 1],  // d

  [1, 0, 0, 1, 1, 1, 1],  // E

  [1, 0, 0, 0, 1, 1, 1],  // F

];

​

let digitW = 32;

let digitH = 80;

let segmentThickness = 6;

let segmentSpacing = 1;

let digitSpacing = 4;

​

let currentNumber = 0;

const maxNumber = Number.MAX_SAFE_INTEGER;

​

​

function setup()

{

  createCanvas(800, 400);

​

  colorMode(HSB);

​

  bgColor = color(45, 50, 12, 1.0);

  litColor = color(240, 80, 100, 1.0);

  dimColor = color(240, 90, 100, 0.65);

  offColor = color(240, 100, 100, 0.4);

}

​

​

function draw()

{

  background(bgColor);

  if (!keyIsDown(32))

  {

    let delta = 0;

    if (keyIsDown(UP_ARROW) || keyIsDown(RIGHT_ARROW)) delta += 1;

    if (keyIsDown(DOWN_ARROW) || keyIsDown(LEFT_ARROW)) delta -= 1;

    if (keyIsDown(SHIFT)) delta *= 10;

    if (keyIsDown(CONTROL)) delta *= 100;

    if (keyIsDown(ALT)) delta *= 10000;

    Add(delta);

  }

  noStroke();

  DrawSevenSegmentNumber(currentNumber, 4, height / 2, litColor, offColor);

}

​

​

function keyPressed(e)

{

  if (!keyIsDown(32)) return;

  let delta = 0;

  if (e.key === "ArrowUp" || e.key === "ArrowRight") delta += 1;

  else if (e.key === "ArrowDown" || e.key === "ArrowLeft") delta -= 1;

  if (keyIsDown(SHIFT)) delta *= 10;

  if (keyIsDown(CONTROL)) delta *= 100;

  if (keyIsDown(ALT)) delta *= 10000;

  Add(delta);

}

​

​

function Add(delta)

{

  currentNumber = (currentNumber + delta) % maxNumber;

}

​

​

function DrawSevenSegmentNumber(n, x, y, lit, dim)

{

  x += (digitW + segmentThickness) / 2;

  const toStr = n.toString();

  for (let i = 0, offset = 0; i < toStr.length; ++i)

  {

    let c = toStr[i];

    if (c === ".")

    {

      fill(lit);

      DrawDecimalPoint(x, y, offset - digitSpacing);

      continue;

    }

    let d = parseInt(toStr[i]);

    if (isNaN(d)) continue;

    let digitX = x + offset;

    DrawSevenSegmentDigit(d, digitX, y, lit, dim);

    offset += digitW + segmentThickness + digitSpacing;

  }

}

​

​

function DrawSevenSegmentDigit(d, digitX, digitY, lit, dim)

{

  for (let i = 0; i < segments.length; ++i)

  {

    let segment = segments[i];

    let digit = digits[d];

    fill(digit[i] ? lit : dim);

    DrawSegment(segment, digitX, digitY);

  }

}

​

​

function DrawSegment(s, digitX, digitY)

{

  const hw = digitW / 2;

  const qh = digitH / 4;

  const ht = segmentThickness / 2;

  if (s[2] === SegmentOrientation.Horizontal)

  {

    HSegment(s[0] * digitW + digitX, s[1] * digitH + digitY, hw, ht);

  }

  else

  {

    VSegment(s[0] * digitW + digitX, s[1] * digitH + digitY, qh, ht);

  }

}

​

​

function HSegment(x, y, hw, ht)

{

  hw -= segmentSpacing;

  /*

  lct (l corner top)       rct (r corner top)

               > •-----------• <

                /             \

  lt (l tip) > •               • < rt (r tip)

                \             /

               > •-----------• <

  lcb (l corner bottom)    rcb (r corner bottom)

  */

  let rt_x = x + hw;

  let rt_y = y;

  let rcbx = x + hw - ht;

  let rcby = y + ht;

  let lcbx = x + ht - hw;

  let lcby = rcby;

  let lt_x = x - hw;

  let lt_y = y;

  let lctx = lcbx;

  let lcty = y - ht;

  let rctx = rcbx;

  let rcty = lcty;

​

  beginShape();

  {

    vertex(rt_x + vertexOffset, rt_y + vertexOffset);

    vertex(rcbx + vertexOffset, rcby + vertexOffset);

    vertex(lcbx + vertexOffset, lcby + vertexOffset);

    vertex(lt_x + vertexOffset, lt_y + vertexOffset);

    vertex(lctx + vertexOffset, lcty + vertexOffset);

    vertex(rctx + vertexOffset, rcty + vertexOffset);

    vertex(rt_x + vertexOffset, rt_y + vertexOffset);

  }

  endShape();

}

​

​

function VSegment(x, y, qh, ht)

{

  qh -= segmentSpacing;

  /*

                   tt (t tip)

                       v

                       •

                      / \

  tcl (t corner l) > •   • < tcr (t corner r)

                     |   |

                     |   |

  bcl (b corner l) > •   • < bcr (b corner r)

                      \ /

                       •

                       ^

                   bt (b tip)

  */

  let tt_x = x;

  let tt_y = y - qh;

  let tcrx = x + ht;

  let tcry = y + ht - qh;

  let bcrx = tcrx;

  let bcry = y + qh - ht;

  let bt_x = x;

  let bt_y = y + qh;

  let bclx = x - ht;

  let bcly = bcry;

  let tclx = bclx;

  let tcly = tcry;

​

  beginShape();

  {

    vertex(tt_x + vertexOffset, tt_y + vertexOffset);

    vertex(tcrx + vertexOffset, tcry + vertexOffset);

    vertex(bcrx + vertexOffset, bcry + vertexOffset);

    vertex(bt_x + vertexOffset, bt_y + vertexOffset);

    vertex(bclx + vertexOffset, bcly + vertexOffset);

    vertex(tclx + vertexOffset, tcly + vertexOffset);

    vertex(tt_x + vertexOffset, tt_y + vertexOffset);

  }

  endShape();

}

​

​

function DrawDecimalPoint(x, y, offset)

{

  let hw = digitW / 2;

  let hh = digitH / 2;

  let ht = segmentThickness / 2;

  let rx = x - (hw + ht);

  let ry = y + hh;

  let tx = x - (hw);

  let ty = y + hh - ht;

  let lx = x - (hw - ht);

  let ly = ry;

  let bx = tx;

  let by = y + hh + ht;

  beginShape();

  {

    vertex(rx + vertexOffset + offset, ry + vertexOffset);

    vertex(tx + vertexOffset + offset, ty + vertexOffset);

    vertex(lx + vertexOffset + offset, ly + vertexOffset);

    vertex(bx + vertexOffset + offset, by + vertexOffset);

    vertex(rx + vertexOffset + offset, ry + vertexOffset);

  }

  endShape();

}

​