Thumbnail Editor

edit pics

Thumbnail Editor

edit pics

Creating small gems, Thumbnails that capture the eye, Art in tiny form.

A thumbnail editor is a software tool that is designed to create, edit, and modify thumbnail images. Thumbnail images are small images that are used to represent larger images or videos. These images are often used on websites, in video sharing platforms, and in social media platforms.

A thumbnail editor typically allows users to select an image or video file, and then create a thumbnail image from that file. The user can then edit and modify the thumbnail image using a variety of tools, such as resizing, cropping, adding text or graphics, adjusting the colors or contrast, and more.

Keys

  • z, x: Zoom
  • c, v: Rotate - Angle
  • s: save
  • e: use frame numbering
  • r: resize Canvas
  • -: frame -1
  • +: frame +1
  • i: show info
  • å: start painting .. no loop
    • p: paint
    • o: white ellipse

Code snippets

Note, paint not working properly.

function floodFill(x, y, fillColor) {
  loadPixels();
  let targetColor = get(x, y);

  if (!colorsMatch(targetColor, fillColor)) {
    let stack = [];
    stack.push([x, y]);

    while (stack.length > 0) {
      let [px, py] = stack.pop();
      if (px >= 0 && px < width && py >= 0 && py < height) {
        let index = (py * width + px) * 4;
        if (colorsMatch(targetColor, pixels.slice(index, index + 3))) {
          pixels[index] = fillColor[0];
          pixels[index + 1] = fillColor[1];
          pixels[index + 2] = fillColor[2];
          stack.push([px + 1, py]);
          stack.push([px - 1, py]);
          stack.push([px, py + 1]);
          stack.push([px, py - 1]);
        }
      }
    }

    updatePixels();
  }
}
function colorsMatch(color1, color2) {
  //return color1[0] === color2[0] && color1[1] === color2[1] && color1[2] === color2[2];

  return (
    abs(color1[0] - color2[0]) < pte &&
    abs(color1[1] - color2[1]) < pte &&
    abs(color1[2] - color2[2]) < pte
  );
}

Links


Disclaimer

Share: Twitter