ミニ画像を使って画像を作る（処理）

Question

私のスケッチでは、入力画像を構成する一連のミニ画像があります。
は、現在、私の入力は手の絵で、私の小さな画像は、次のとおりです。https://imgur.com/a/0Y5s9
（3テストミニ画像が透明なので、imgurからそれらをドラッグして、彼らは現在、黒）
と私の現在の出力は次のようになります。 http://imgur.com/a/sIZuA

なぜこのようにオーバーラップしているのかわかりません。オーバーレイできるように、各ミニイメージの背景を透明にしています。そのため、スケールアウトする方法が必要です。

私が解決したいと思っている主な問題は、自分のミニ画像が手の周りに白い背景ではなく、手だけを構成することを確認する必要があることです。私はミニ画像が手の色合いにのみ割り当てられていれば、白い背景もカウントされないと考えました。

私はそれを行う方法がわかりません。助けて？

CODE：

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

一般的な「どのようにこれを行うのですか」の質問には答えにくいです。スタックオーバーフローは、より具体的に設計されています。「Xを試しましたが、Yは期待されましたが、代わりにZを取得しました」という質問があります。しかし、私は一般的な意味で助けようとします。

大きな画像の特定の部分に小さな画像を表示する方法を尋ねています。

高レベルでは、小さな画像を描画したい大きな画像の座標をループし、各座標のピクセルを取得してチェックし、小さい画像のみを描画しますピクセルはいくつかの基準と一致します。

ネストされた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); 
    } 
    } 
} 

このコードでは、ウィンドウは、大きな画像と同じサイズであることを前提としています。その後、大きな画像の座標をループし（100番目のピクセルごとに見る）、そのピクセルで色を取得します。次に、そのピクセルの赤の値が128より大きいかどうかを確認し、小さい場合はその座標に小さいイメージを描画します。

これは単なる例であるため、ニーズに合わせてアプローチを変更する必要があります。しかし、基本的な考え方は変わりません。画素を繰り返して色を取得し、その色をチェックし、色がいくつかの基準に一致する場合にのみ、より小さな画像を描画します。

これはまた、色付きの文字で投稿した画像がどのように機能し、より小さな画像を描画するのではなく、基礎をなすピクセルの色を使用して文字を描画する方法です。

Answer 2

私はこのウェブサイト上のコードでは、あなたの問題の解決策を提供していと思います。

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

それはドイツのウェブサイト（コードのコメントのいくつかは同様にドイツ語である）ので、何か問題がある場合はお気軽に。