​

​

​

//change to a string to allow to save as png...

const saveName =  "infographics" ;// "portfolio";

​

// each letter is an array of line segments

// (base line is at zero, y is positive up, so opposite of usual screen drawing)

// final boolean will add "shadowing" effect... only tested for orthoganol and 

// 45 degree characters. (and doesn't do proper clipping, so for like "L" or "Z"

// you have to just use extra non-shadow segments as shadow lines)

​

const alpha = {

  A: [

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

    [0, 1, 1, 2, true],

    [1, 2, 2, 1, false],

    [2, 1, 2, 0, false],

    [2, 0, 0, 0, false],

    [1, 0, 1, 0.5, false],

    [0.75, 1, 1.25, 1, false],

  ],

  B: [

    [0, 0, 0, 2, true],

    [0, 2, 1, 2, true],

    [1, 2, 2, 1, false],

    [2, 1, 2, 0, false],

    [2, 0, 0, 0, false],

    [1, 1.5, 0.5, 1.5, false],

    [0.5, 0.5, 1, 0.5, false],

  ],

  C: [[0,1,1,2,true],[1,2,2,2,true],[2,2,2,0,false],[2,0,1,0,false],[1,0,0,1,false],[2,1,1.25,1,false]] ,

  D:[[0,0,0,2,true],[0,2,1,2,true],[1,2,2,1,false],[2,1,1,0,false],[1,0,0,0,false],[1,1,0.5,1,false]] ,

  E:

[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[2,0.75,1,0.75,false],[1,1.25,2,1.25,false]] ,

  F:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,1,false],[2,1,1,1,false],[1,1,1,0,false],[1,0,0,0,false],[2,1.5,1,1.5,false]] ,

  G:

[[1,0,0,1,false],[0,1,1,2,true],[1,2,2,2,true],[2,2,2,0,false],[2,0,1,0,false],[2,1,1.25,1,false],[1.25,1,1.25,0.5,false]] ,

  H:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[1,0,1,0.75,false],[1,1.25,1,2,false]] ,

  I:[[0,0,0,2,true],[0,2,1,2,true],[1,2,1,0,false],[1,0,0,0,false]] ,

  J: [[0,1,1,1,true],[1,1,1,2,true],[1,2,2,2,true],[2,2,2,1,false],[2,1,1,0,false],[1,0,0,1,false]] ,

  K:[[0,0,0,2,true],[0,2,2,2,true],[2,2,1,1,false],[1,1,2,0,false],[2,0,0,0,false],[0.75,0,0.75,0.5,false],[0.75,2,0.75,1.5,false]] ,

​

​

​

  L: [

    [0, 0, 0, 2, true],

    [0, 2, 1, 2, true],

    [1, 2, 1, 1, false],

    [1, 1, 2, 1, false],

    [2, 1, 1.5, 1.5, false],

    [1.5, 1.5, 1, 1.5, false],

    [1.5, 1, 1, 1.5, false],

    [2, 1, 2, 0, false],

    [2, 0, 0, 0, false],

    ],

  M:[[0,0,0,2,true],[0,2,1,1,false],[1,1,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[0.75,0,0.75,0.5,false],[1.25,0,1.25,0.5,false]] ,

  N:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[0.75,0,0.75,0.75,false],[1.25,1.25,1.25,2,false]] ,

  O:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[0.75,1,1.25,1,false]] ,

​

P:

[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,1,false],[2,1,1,1,false],[1,1,1,0,false],[1,0,0,0,false],[0.75,1.5,1.25,1.5,false]] ,

Q:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[0.75,1,1.25,1,false],[2,0.5,1.75,0.75,false],[1.5,0,1.25,0.25,false]] 

,

 R:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,1,false],[2,1,1,1,false],[1,1,2,0,false],[2,0,0,0,false],[1,0,1,0.5,false],[0.75,1.5,1.25,1.5,false]] 

,

  S:[[0,0,0,1,true],[0,1,1,2,true],[1,2,2,2,true],[2,2,2,1,false],[2,1,1,0,false],[1,0,0,0,false],[0,0.75,0.5,0.75,false],[2,1.25,1.5,1.25,false],[1.5,1.25,1.25,1.25,false],[0.75,0.75,0.5,0.75,false]] 

  ,

  T:

[[0.5,0,0.5,1,false],[0.5,1,0,1,false],[0,1,0,2,true],[0,2,2,2,true],[2,2,2,1,false],[2,1,1.5,1,false],[1.5,1,1.5,0,false],[1.5,0,0.5,0,false],[0.5,0,0,0.5,false],[0,0.5,0,1,false],[0,1,0.5,0.5,false]] ,

  U:[[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,0,0,false],[1,2,1,1.25,false]], 

V:[[0,2,2,2,true],[2,2,2,1,false],[2,1,1,0,false],[1,0,0,1,false],[0,1,0,2,true],[1,2,1,1.25,false]] 

,

W:  

  [[0,0,0,2,true],[0,2,2,2,true],[2,2,2,0,false],[2,0,1,1,false],[1,1,0,0,false],[0.75,2,0.75,1.5,false],[1.25,2,1.25,1.5,false]] ,

  X:[[0,0,1,1,true],[1,1,0,2,false],[0,2,2,2,true],[2,2,1,1,false],[1,1,2,0,false],[2,0,0,0,false],[1,0,1,0.25,false],[1,2,1,1.5,false],[1,0,1,0.5,false]] ,

Y:[[0.5,0,0.5,1,false],[0.5,1,0,1,false],[0,1,0,2,true],[0,2,2,2,true],[2,2,2,1,false],[2,1,1.5,1,false],[1.5,1,1.5,0,false],[1.5,0,0.5,0,false],[0.5,0,0,0.5,false],[0,0.5,0,1,false],[0,1,0.5,0.5,false],[1,2,1,1.5,false]] ,

​

Z:[[0,0,1,1,false],[1,1,0,1,false],[0,1,0,2,true],[0,2,2,2,true],[2,2,1,1,false],[1,1,2,1,false],[2,1,2,0,false],[2,0,0,0,false],[0,0,-0.5,0.5,false],[-0.5,0.5,0,1,false],[0,1,0.5,0.5,false],[0.25,0.25,-0.25,0.75,false],[2,1,1.5,1.5,false],[1.25,1.25,1.5,1,false],[0.75,0.75,0.5,1,false]] 

​

};

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  saveName ? clear() : background(220);

​

  let x = 0;

  let y = 80;

  const word = Object.keys(alpha).join("");

  //const word = "ISRAEL";

  //const word = "PORTFOLIO";

  word.split("").forEach((c) => {

    push();

    translate(x, y);

    drawC(c, alpha[c]);

    const w = getWidthInSegs(alpha[c]);

    x += (w + 0.5) * squareSize;

    if(x > width - squareSize * 3){

       x = 0;

      y += squareSize * 3;

    }

    pop();

  });

  saveName && save(`${saveName}.png`);

  noLoop();

}

​

function drawC(c, lines) {

  if(c !== ' ') drawLetter(lines);

}

​

​

​

function getWidthInSegs(lines) {

  if(! lines) return 1;

  const maxX = lines.reduce((max, line) => {

    const x1 = line[0];

    const x2 = line[2];

    return Math.max(max, x1, x2);

  }, 0);

  return maxX;

}

​

function drawLetter(lines) {

  strokeWeight(4);

  lines.forEach((seg) => {

    const [x1, y1, x2, y2, shadow] = seg;

​

    drawRegSeg(x1, y1, x2, y2);

​

    if (shadow) {

      const x1b = x1 - 0.5;

      const x2b = x2 - 0.5;

      const y1b = y1 + 0.5;

      const y2b = y2 + 0.5;

​

      //draw back parallel

      drawRegSeg(x1b, y1b, x2b, y2b);

​

      const sx = min(x1, x2);

      const ex = max(x1, x2);

      const sy = min(y1, y2);

      const ey = max(y1, y2);

​

      // we assume each segment is either orthogonal or 45 degrees

      // so distance is either straight up difference, or divided by the hypotenus

​

      const stretch = dist(0, 0, 1, 1);

      const truedist = dist(sx, sy, ex, ey);

​

      const orth = sx === ex || sy === ey;

​

      const numshadow = (orth ? 2 : 4) * (orth ? truedist : truedist / stretch);

​

      for (let p = 0; p <= numshadow; p++) {

        const over = p / numshadow;

        const x = lerp(sx, ex, over);

        const y = lerp(sy, ey, over);

        drawRegSeg(x, y, x - 0.5, y + 0.5);

      }

    }

  });

}

​

function recXToScreen(recx) {

  return (recx + 1) * squareSize;

}

​

function recYToScreen(recy) {

  return -(recy + 1) * squareSize;

}

​

function drawRegSeg(x1, y1, x2, y2) {

  line(recXToScreen(x1), recYToScreen(y1), recXToScreen(x2), recYToScreen(y2));

}

​