Draw ASCII art version of image on canvas using canvas-sketch (Javascript)

Question

The idea was for the code to draw an ASCII art version of an image and my initial code was drawing the glyphs on the background and not the profile of the person.

profile of Pastor Gospel

I played around a bit and found out that the profile wasn't being drawn because the resolution of that part is low so I included these 2 lines of code: if (v < 40) return "."; if (v < 50) return "/";.

And it looks pretty decent but the thing is I can't see the eyes, nose and whatnots because it's not clear. So my question is how can I made them visible?

This is my code:

const canvasSketch = require("canvas-sketch");
const random = require("canvas-sketch-util/random");

const settings = {
  dimensions: [1080, 1080],
};

let manager, image;

let text = "C";
let fontSize = 1200;
let fontFamily = "serif";

const typeCanvas = document.createElement("canvas");
const typeContext = typeCanvas.getContext("2d");

const sketch = ({ context, width, height }) => {
  const cell = 20;
  const cols = Math.floor(width / cell);
  const rows = Math.floor(width / cell);
  const numCells = cols * rows;

  typeCanvas.width = cols;
  typeCanvas.height = rows;

  return ({ context, width, height }) => {
    typeContext.fillStyle = "black";
    typeContext.fillRect(0, 0, cols, rows);

    typeContext.save();
    typeContext.drawImage(image, 0, 0, cols, rows);
    typeContext.restore();

    const typeData = typeContext.getImageData(0, 0, cols, rows).data;

    context.fillStyle = "black";
    context.fillRect(0, 0, width, height);

    for (let i = 0; i < numCells; i++) {
      const col = i % cols;
      const row = Math.floor(i / cols);

      const x = col * cell + random.range(-cell, cell) * 0.5;
      const y = row * cell + random.range(-cell, cell) * 0.5;

      const r = typeData[i * 4 + 0];
      const g = typeData[i * 4 + 1];
      const b = typeData[i * 4 + 2];
      const a = typeData[i * 4 + 3];

      const glyph = getGlyph(r);

      context.font = `${cell * 2}px ${fontFamily}`;
      if (Math.random() < 0.1) context.font = `${cell * 6}px ${fontFamily}`;

      context.fillStyle = `rgb(${r}, ${g}, ${b})`;
      //context.fillStyle = "black";

      context.save();
      context.translate(x, y);
      context.translate(cell * 0.5, cell * 0.5);

      //context.fillRect(0, 0, cell, cell);

      //context.fillStyle = "white";
      context.fillText(glyph, 0, 0);

      context.restore();
    }
    context.drawImage(typeCanvas, 0, 0);
  };
};
const getGlyph = (v) => {
  if (v < 40) return ".";
  if (v < 50) return "/";
  if (v < 100) return ".";
  if (v < 150) return "-";
  if (v < 200) return "+";

  const glyphs = "_= /".split("");

  return random.pick(glyphs);
};

const loadMeSomeImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject();
    img.src = url;
  });
};

const start = async () => {
  const url = "./headshot-pstG.jpeg";
  image = await loadMeSomeImage(url);
  typeCanvas.width = image.width;
  typeCanvas.height = image.height;
  manager = await canvasSketch(sketch, settings);
};

start();

Draw ASCII art version of image on canvas using canvas-sketch (Javascript)

0 Answers0