Custom halftone grids for images using multiple .svg files [Solved]

Processing Coding Questions
1

Hello,

I am new to processing and I would like to use it to generate custom halftone effects using SVG files. I have managed to create something like this so far.

1
11920×1920 478 KB

For my next step I am trying to figure out how to make different ranges of brightness values in the image use a different SVG but I can’t figure out how to do it.

This is my code so far:

PImage img;
PShape shape;


void setup() {
  size (900,900);
 
  img = loadImage("img.png");
  img.resize(0,900);
  
  shape = loadShape("shape1.svg"); 
  
}

void draw() {
  background(#000000);
  
  float tiles =90;
  float tileSize =width/tiles;
 
 translate(tileSize/2,tileSize/2);
 
 for (int x = 0; x < tiles; x++) {
   for (int y = 0; y < tiles; y++) {
    
     
     color c = img.get(int(x*tileSize),int(y*tileSize));
     float size = map(brightness(c),0,255,0,tileSize);
     
 shape(shape,x*tileSize,y*tileSize,size,size);

}
 }
}
2

Solved it.

Screenshot 2024-06-05 at 21.56.15
Screenshot 2024-06-05 at 21.56.151792×1792 309 KB

I used an if else if else statement

here is the code now:

PImage img;
PShape shape;
PShape shape2;
PShape shape3;


void setup() {
  size (900,900);
 
  img = loadImage("img.png");
  img.resize(0,900);
  
  shape = loadShape("shape1.svg"); 
  shape2 = loadShape("shape2.svg"); 
  shape3 = loadShape("shape3.svg"); 
  
}

void draw() {
  background(#000000);
  
  float tiles =80;
  float tileSize =width/tiles;
 
 translate(tileSize/2,tileSize/2);
 
 for (int x = 0; x < tiles; x++) {
   for (int y = 0; y < tiles; y++) {
    
     
     color c = img.get(int(x*tileSize),int(y*tileSize));
     float size = map(brightness(c),0,255,0,tileSize);
     
     if(size>tileSize-(tileSize/3)/2){
 shape(shape2,x*tileSize,y*tileSize,size,size);
     } else if(size<tileSize-(tileSize/3)){
 shape(shape3,x*tileSize,y*tileSize,size,size);
     } else { shape(shape,x*tileSize,y*tileSize,size,size); }
     
}
 }
}
2 Likes