0

I'm attempting to display tiny pixel images on a website for a client.
Although I achieved a working result now, it's not the reliable solution I was aiming for.
I'm wondering if there might be a better or rather comfortable approach that you know for the drawing process with pure JavaScript or even CSS.
I already had one concept in my head and this idea appears like the most comfortable solution for my task, but after some attemps I'm still quite unsure how to handle it properly:
Would it be possible to draw the pixels by reading the drawing information - position and color-
from a number of symbols(similar to the symbol map in the yellow box below) and referencing the color values in '#rrggbbaa' with each symbol & control the position on the canvas with an extra symbol like a point or comma?

//~ 1 ................  
//~ 2 ................  
//~ 3 ....B€2€M€2€....  
//~ 4 ..JJJJeeeennnn..  
//~ 5 .fff§§§§iiii333.  
//~ 6 ..xkxk....ikik..


let pp = ((s = '.dcanvas', A = document.querySelector(s), ctx =  A.getContext('2d'),  
id = ctx.createImageData(1, 1)) => (x, y, r, g, b, a)   => (id.data.set([r, g, b, a]),  
ctx.putImageData(id, x, y), A))()

//create points at y3, start at x5
pp(5, 3, 86, 212, 157, 250)   //~ B #45D38C
pp(6, 3, 255, 111, 1, 250)    //~ € #FF6F00
pp(7, 3, 75, 184, 136, 250)   //~ 2 #4BB888
pp(8, 3, 255, 111, 1, 250)    //~ € #FF6F00
pp(9, 3, 67, 164, 122, 250)   //~ M #43A47A
pp(10, 3, 255, 111, 1, 250)   //~ € #FF6F00
pp(11, 3, 75, 184, 136, 250)  //~ 2 #4BB888
pp(12, 3, 255, 111, 1, 250)   //~ € #FF6F00

//create points at y4, start at x3
pp(3, 4, 195, 69, 149, 250)   //~ J #C34595
pp(4, 4, 195, 69, 149, 250)   //~ J #C34595
pp(5, 4, 195, 69, 149, 250)   //~ J #C34595
pp(6, 4, 195, 69, 149, 250)   //~ J #C34595
pp(7, 4, 205, 88, 162, 250)   //~ e #CD58A2
pp(8, 4, 205, 88, 162, 250)   //~ e #CD58A2
pp(9, 4, 205, 88, 162, 250)   //~ e #CD58A2
pp(10, 4, 205, 88, 162, 250)  //~ e #CD58A2
pp(11, 4, 232, 104, 185, 250) //~ n #E868B9
pp(12, 4, 232, 104, 185, 250) //~ n #E868B9
pp(13, 4, 232, 104, 185, 250) //~ n #E868B9
pp(14, 4, 232, 104, 185, 250) //~ n #E868B9

//create points at y5, start at x2
pp(2, 5, 88, 222, 217, 250)   //~ f #58DED9
pp(3, 5, 88, 222, 217, 250)   //~ f #58DED9
pp(4, 5, 88, 222, 217, 250)   //~ f #58DED9
pp(5, 5, 170, 170, 170, 250)  //~ § #AAAAAA
pp(6, 5, 170, 170, 170, 250)  //~ § #AAAAAA
pp(7, 5, 170, 170, 170, 250)  //~ § #AAAAAA
pp(8, 5, 170, 170, 170, 250)  //~ § #AAAAAA
pp(9, 5, 165, 222, 133, 250)  //~ i #A5DE85
pp(10, 5, 165, 222, 133, 250) //~ i #A5DE85
pp(11, 5, 165, 222, 133, 250) //~ i #A5DE85
pp(12, 5, 165, 222, 133, 250) //~ i #A5DE85
pp(13, 5, 95, 181, 181, 250)  //~ 3 #5FB5B5
pp(14, 5, 95, 181, 181, 250)  //~ 3 #5FB5B5
pp(15, 5, 95, 181, 181, 250)  //~ 3 #5FB5B5

//create points at y6, start at x3
pp(3, 6, 11, 122, 229, 250)   // ~ x #0B7AE5
pp(4, 6, 232, 199, 17, 250)   // ~ k #E8C711
pp(5, 6, 11, 122, 229, 250)   // ~ x #0B7AE5
pp(6, 6, 232, 199, 17, 250)   // ~ k #E8C711
                              // ~ .
                              // ~ .
                              // ~ .
                              // ~ .
pp(11, 6, 165, 222, 133, 250) // ~ i #A5DE85
pp(12, 6, 232, 199, 17, 250)  // ~ k #E8C711
pp(13, 6, 165, 222, 133, 250) // ~ i #A5DE85
pp(14, 6, 232, 199, 17, 250)  // ~ k #E8C711

//color reader
let A = rp(50, 80);
<canvas class="dcanvas" width=48 height=48 style="background: #383838">
G1N
  • 154
  • 3
  • 13
taraz
  • 117
  • 2
  • 8

1 Answers1

1

There are lots of possible solutions, but here's one. Create an array of your pixel data, and a map of your colors. Then iterate through your pixels and output them one by one.

const pixels = [
  '................',
  '................',
  '....B€2€M€2€....',
  '..JJJJeeeennnn..',
  '.fff§§§§iiii333.',
  '..xkxk....ikik..',
];

const colors = new Map([
  ['B', '#45D38C'],
  ['€', '#FF6F00'],
  ['2', '#4BB888'],
  ['M', '#43A47A'],
  ['J', '#C34595'],
  ['e', '#CD58A2'],
  ['n', '#E868B9'],
  ['f', '#58DED9'],
  ['§', '#AAAAAA'],
  ['i', '#A5DE85'],
  ['3', '#5FB5B5'],
  ['x', '#0B7AE5'],
  ['k', '#E8C711'],
  ['i', '#A5DE85'],
]);

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

pixels.forEach((row, y) => {
  row.split('').forEach((pixel, x) => {
    if (colors.has(pixel)) {
      ctx.fillStyle = colors.get(pixel);
      ctx.fillRect(x, y, 1, 1);
    }
  });
});
<canvas id="canvas" width=48 height=48 style="background: #383838">

A Faster Alternative:

As you may have guessed, you'll want to use an ImageData object if you have lots of pixels to draw. (It'll be faster than the simplistic fillRect() method.) You'll also need to convert your hex values to RGB. Here's how you might do that:

const pixels = [
  '................',
  '................',
  '....B€2€M€2€....',
  '..JJJJeeeennnn..',
  '.fff§§§§iiii333.',
  '..xkxk....ikik..',
];

const colors = new Map([
  ['B', '#45D38C'],
  ['€', '#FF6F00'],
  ['2', '#4BB888'],
  ['M', '#43A47A'],
  ['J', '#C34595'],
  ['e', '#CD58A2'],
  ['n', '#E868B9'],
  ['f', '#58DED9'],
  ['§', '#AAAAAA'],
  ['i', '#A5DE85'],
  ['3', '#5FB5B5'],
  ['x', '#0B7AE5'],
  ['k', '#E8C711'],
  ['i', '#A5DE85'],
]);

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(canvas.width, canvas.height);

pixels.forEach((row, y) => {
  row.split('').forEach((pixel, x) => {
    const hex = colors.get(pixel);

    if (hex) {
      const px = x * 4;
      const py = y * canvas.width * 4;
      const rgb = hexToRgb(hex);

      imageData.data[py + px + 0] = rgb[0]; // R value
      imageData.data[py + px + 1] = rgb[1]; // G value
      imageData.data[py + px + 2] = rgb[2]; // B value
      imageData.data[py + px + 3] = 255;    // A value
    }
  });
});

ctx.putImageData(imageData, 0, 0);

function hexToRgb(hex) {
  hex = hex.replace('#', '');
  const bigint = parseInt(hex, 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return [r, g, b];
}
<canvas id="canvas" width=48 height=48 style="background: #383838">
mfluehr
  • 2,832
  • 2
  • 23
  • 31