​

// editor for characters in https://editor.p5js.org/kirkjerk/sketches/d2ZGkl9R9

​

// 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

​

// click in for focus, then a starts a new segment, d draws a "normal" segment.

// s draws a "shadowed" segment, r reports/dumps to console and resets

​

let lines = [];

let unclicked = true;

let lastX, lastY;

let squareSize;

function setup() {

  createCanvas(400, 400);

  console.log(`click for focus

a = start new seg

d = draw seg

s = shadow seg

r = report + reset`);

}

​

function draw() {

  background(unclicked ? 120 : 220);

​

  strokeWeight(1);

  for (let a = 0; a < gridsize; a++) {

    const off = a * squareSize;

    line(off, 0, off, height);

    line(0, off, width, off);

  }

  noFill();

  circle(width / gridsize,(height / gridsize)*4,10);

  strokeWeight(2);

  squareSize = width / gridsize;

​

  stroke(255,0,0);

  if(lastX !== undefined && lastY !== undefined){

     line(recXToScreen(lastX) ,recYToScreen(lastY),

          recXToScreen(getRecX()) ,recYToScreen(getRecY()));

  }

  stroke(0);

  if (unclicked) return;

  circle(recXToScreen(getRecX()), recYToScreen(getRecY()), 20);

​

  text(`${getRecX()} ${getRecY()}`, 20, 20);

  drawLetter();

}

​

function drawLetter() {

  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 drawRegSeg(x1,y1,x2,y2){

      line(

      recXToScreen(x1),

      recYToScreen(y1),

      recXToScreen(x2),

      recYToScreen(y2)

    );

}

​

​

​

function keyPressed() {

  if (key == "a") {

    lastX = getRecX();

    lastY = getRecY();

  }

  if (key === "d" || key === "s") {

    const x = getRecX();

    const y = getRecY();

    lines.push([lastX, lastY, x, y, key === "s"]);

    lastX = x;

    lastY = y;

  }

  if(key === 'r'){

   console.log(JSON.stringify(lines)); 

    lines = [];

  }

}

​

function getGridpoint(m) {

  //get to the nearest half point

  return round((m / (400 / gridsize)) * 4) / 4;

}

//return round(m / gridsize * 2) / 2 * gridsize;

function getRecX() {

  return getGridpoint(mouseX) - 1;

}

function getRecY(y) {

  return gridsize - getGridpoint(mouseY) - 1;

}

​

function recXToScreen(recx) {

  return (recx + 1) * squareSize;

}

​

function recYToScreen(recy) {

  return height - (recy + 1) * squareSize;

}

​

function mousePressed() {

  unclicked = false;

}

​