stickWidthSlider,

    stickHeightSlider,

    spaceBetweenSticksSlider;

​

const charactersEncoding = {'0': 0x7E, '1': 0x30, '2': 0x6D, '3': 0x79, '4': 0x33, '5': 0x5B, '6': 0x5F, '7': 0x70, '8': 0x7F, '9': 0x7B, 'A': 0x77, 'b': 0x1F, 'C': 0x4E, 'd': 0x3D, 'E': 0x4F, 'F': 0x47};

​

function setup() {

  createCanvas(400, 600);

  currentChar = 0x00;

  animateCharacter([0x00, 0x7F], 5, 500);

  createP(`Type a character among ${Object.keys(charactersEncoding).join(", ")}.<br>(Don't forget to give the focus to the canvas!)`).addClass("label");

  createP("Stick width").addClass("label");

  stickWidthSlider = createSlider(0, 135, 80);

  createP("Stick height").addClass("label");

  stickHeightSlider = createSlider(0, 80, 35);

  createP("Space between sticks").addClass("label");

  spaceBetweenSticksSlider = createSlider(0, 20, 5);

}

​

function draw() {

  background(220);

  translate((width - stickWidthSlider.value()) / 2 - stickHeightSlider.value() - spaceBetweenSticksSlider.value(), height / 2 - stickWidthSlider.value() - 1.5 * stickHeightSlider.value() - 2 * spaceBetweenSticksSlider.value());

  sevenSegment(currentChar);

}

​

function animateCharacter(values, remainingSteps, interval, totalSteps) {

  if (typeof(totalSteps) === "undefined" || totalSteps < remainingSteps)

    totalSteps = remainingSteps;

  currentChar = values[(totalSteps - remainingSteps) % values.length];

  remainingSteps -= 1;

  if (remainingSteps) {

    setTimeout(() => {

      animateCharacter(values, remainingSteps, interval, totalSteps);

    }, interval);

  }

}

​

function getColor(value, shift) {

  return color(50, 100, 200, 55 + 200 * ((value >> shift) & 1));

}

​

function drawSegment(x, y, orientation, fillColor) {

  translate(x, y);

  rotate(orientation);

  fill(fillColor);

  beginShape();

  vertex(spaceBetweenSticksSlider.value() + 0.5 * stickHeightSlider.value(), 0.5 * stickHeightSlider.value());

  vertex(spaceBetweenSticksSlider.value() + stickHeightSlider.value(), 0);

  vertex(spaceBetweenSticksSlider.value() + stickHeightSlider.value() + stickWidthSlider.value(), 0);

  vertex(spaceBetweenSticksSlider.value() + 1.5 * stickHeightSlider.value() + stickWidthSlider.value(), 0.5 * stickHeightSlider.value());

  vertex(spaceBetweenSticksSlider.value() + stickHeightSlider.value() + stickWidthSlider.value(), stickHeightSlider.value());

  vertex(spaceBetweenSticksSlider.value() + stickHeightSlider.value(), stickHeightSlider.value());

  endShape();

}

​

function sevenSegment(value) {

  noStroke();

  drawSegment(0, 0, 0, getColor(value, 6));

  drawSegment(2 * spaceBetweenSticksSlider.value() + stickWidthSlider.value() + 2 * stickHeightSlider.value(), 0, HALF_PI, getColor(value, 5));

  drawSegment(2 * spaceBetweenSticksSlider.value() + stickWidthSlider.value() + stickHeightSlider.value(), 0, 0, getColor(value, 4));

  drawSegment(2 * spaceBetweenSticksSlider.value() + stickWidthSlider.value() + 2 * stickHeightSlider.value(), 0, HALF_PI, getColor(value, 3));

  drawSegment(2 * spaceBetweenSticksSlider.value() + stickWidthSlider.value() + 2 * stickHeightSlider.value(), 0, HALF_PI, getColor(value, 2));

  drawSegment(2 * spaceBetweenSticksSlider.value() + stickWidthSlider.value() + stickHeightSlider.value(), 0, 0, getColor(value, 1));

  drawSegment(stickHeightSlider.value(), 0, HALF_PI, getColor(value, 0));

}

​

function keyPressed() {

  if (charactersEncoding[key]) {

    currentChar = charactersEncoding[key];

  }

}