使用迷你图像组成图像（处理）

Question

在我的草图中，您有一堆迷你图像将构成输入图片。
目前我的输入是一张手的图片，我的小图片是：https://imgur.com/a/0Y5s9
（3张测试小图是透明的，所以从imgur中拖出来，目前是黑色的）
我当前的输出如下所示： http://imgur.com/a/sIZuA

我不确定为什么它们会像这样重叠，我已经将每个迷你图像的背景设为透明以便它们可以重叠，所以我需要一种方法来缩小它们。

我想解决的主要问题是我需要确保我的迷你图像只构成手，而不是手周围的白色背景。我想如果小图只分配给手的阴影，那么白色背景甚至都不算数。

我不知道该怎么做。帮助？

代码：

final int len=25;
final float thresh=170;

boolean newDesign=false;
PImage pic;

ArrayList<PImage> imgContainer;
int n=3;

void setup() {  
  size(800, 800, P2D);
  colorMode(RGB, 255);
  background(250, 250, 250);
  rectMode(CENTER);
  //imageMode(CENTER);

  pic=loadImage("hand.jpg");
  pic.resize(width, height);

  color c1 = color(200,25,25);
  color c2 = color(25, 255, 200);  

  imgContainer=new ArrayList<PImage>();
PImage pimg1=loadImage("test0.png");
pimg1.resize(50, 50);
imgContainer.add(pimg1);
PImage pimg2=loadImage("test1.png");
pimg2.resize(50, 50);
imgContainer.add(pimg2);
PImage pimg3=loadImage("test2.png");
pimg1.resize(50, 50);
imgContainer.add(pimg3);
  noLoop();
  noStroke();
}

void draw() {
  if (newDesign==false) {
    return;
  }

  pic.loadPixels();

  for (int y = 0; y < height; y+=18) {
    for (int x = 0; x < width; x+=18) {
      // Get the color stored in the pixel
      int index=y*width+x;
      color pixelValue = pic.pixels[index];
      // Determine the brightness of the pixel
      float pixelBrightness = brightness(pixelValue);

      float imgPicked=constrain(pixelBrightness/thresh, 0, n-1);
      image(imgContainer.get((int)imgPicked),x,y);

    }
  }
}

void mouseReleased() {
  newDesign=!newDesign;
  redraw();

    }

Answer 1

我认为本网站上的代码为您的问题提供了解决方案。

https://lernprocessing.wordpress.com/2010/01/16/projekt-bild-aus-text/

这是一个德文网站（部分代码注释也是德文的），有什么问题可以尽管问。

Answer 2

很难回答一般 "how do I do this" 类型的问题。 Stack Overflow 专为更具体的 "I tried X, expected Y, but got Z instead" 类型问题而设计。但我会尽力提供一般意义上的帮助。

您问的是如何只在大图的特定部分显示小图。

在高层次上，你想要做的是在你想要绘制小图像的大图像中循环坐标，然后获取每个坐标处的像素，检查它，并只绘制一个小图像如果像素符合某些标准。

您可以使用嵌套的 for 循环遍历坐标（您已经完成了这一部分），并且您可以使用 get() 函数获取该坐标的像素颜色（您排序-这样做）。然后您可以使用 if 语句来检查该颜色，并且仅在符合某些条件时才绘制小图像。

可以在 the reference 中找到更多信息，但有一个非常基本的示例：

for (int y = 0; y < height; y+= 100) {
  for (int x = 0; x < width; x+= 100) {

    color pixelValue = largeImage.get(x, y);

    if(red(pixelValue) > 128){
      image(smallImage, x, y);
    }
  }
}

此代码假定 window 与大图像的大小相同。然后它遍历大图像中的坐标（仅查看每第 100 个像素），并获取该像素的颜色。然后检查该像素的红色值是否大于 128，如果是，则在该坐标处绘制小图像。

这只是一个示例，因此您将不得不修改方法以满足您的需要。但基本思想仍然存在：遍历像素、获取颜色、检查该颜色，并且仅在颜色符合某些条件时才绘制较小的图像。

这也是您发布的带有彩色字母的图像的工作原理，只是他们没有绘制较小的图像，而是使用底层像素的颜色绘制字符。

使用迷你图像组成图像（处理）

Using mini-images to make up an image (processing)

processing