Utilisation de mini-images pour constituer une image (traitement)

Question

Dans mon dessin, vous disposez d'un groupe de mini-images qui constitueront une image d'entrée.
Actuellement, mon entrée est une image d'une main et mes petites images sont: https://imgur.com/a/0Y5s9
(les 3 tests mini images sont transparentes, donc faites-les glisser de Imgur, ils sont actuellement en noir)
et ma sortie actuelle ressemble à ceci: Je ne suis pas sûr de savoir pourquoi ils se chevauchent comme ça, j'ai rendu l'arrière-plan de chaque mini-image transparente afin qu'ils puissent se chevaucher, donc j'ai besoin d'un moyen de les redimensionner.

Mon problème principal que je voudrais résoudre est que je dois m'assurer que mes mini-images ne constituent que la main, et non le fond blanc autour de la main. Je me suis dit que si les mini-images étaient seulement assignées aux nuances de la main, alors le fond blanc ne compterait même pas.

Je ne sais pas comment faire cela. Aidez-moi?

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

Il est difficile de répondre à des questions de type "Comment faire?". Stack Overflow est conçu pour des questions de type "J'ai essayé X, attendu Y, mais j'ai obtenu Z". Mais je vais essayer d'aider dans un sens général.

Vous demandez comment afficher uniquement vos petites images sur une partie spécifique de votre image agrandie. A un niveau élevé, vous devez faire un looping sur les coordonnées de la grande image où vous voulez dessiner vos petites images, puis obtenir le pixel à chaque coordonnée, le vérifier, et ne dessiner qu'une petite image si le pixel correspond à certains critères.

Vous pouvez boucler les coordonnées avec une boucle for imbriquée (vous avez déjà cette partie), et vous pouvez obtenir la couleur de pixel de cette coordonnée en utilisant la fonction get() (vous le faites en quelque sorte). Vous pouvez ensuite utiliser une instruction if pour vérifier cette couleur et dessiner uniquement la petite image si elle correspond à certains critères.

Plus d'informations peuvent être trouvées dans the reference, mais il y a un exemple très simple:

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); 
    } 
    } 
} 

Ce code suppose que la fenêtre est la même taille que la grande image. Il boucle ensuite sur les coordonnées de la grande image (en ne regardant que tous les 100 pixels) et obtient la couleur de ce pixel. Il vérifie ensuite si ce pixel a une valeur rouge supérieure à 128, et si c'est le cas, il dessine la petite image à cette coordonnée.

Ceci est juste un exemple, donc vous allez devoir modifier l'approche pour répondre à vos besoins. Mais l'idée de base demeure: itérer sur les pixels, obtenir la couleur, vérifier cette couleur, et ne dessiner que l'image plus petite si la couleur correspond à certains critères.

C'est également ainsi que fonctionne l'image que vous avez affichée avec les lettres colorées. Au lieu de dessiner une image plus petite, elles dessinent un caractère en utilisant la couleur du pixel sous-jacent.

Answer 2

Je pense que le code sur ce site offre une solution à votre problème.

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

Il est un site allemand (quelques-uns des commentaires de code sont en allemand aussi), donc ne hésitez pas à demander si vous avez des problèmes.