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

**URL:** <https://discourse.processing.org/t/custom-halftone-grids-for-images-using-multiple-svg-files-solved/44540>\
**Category:** Coding Questions\
**Created:** [June 5, 2024, 7:34pm UTC](https://discourse.processing.org/t/custom-halftone-grids-for-images-using-multiple-svg-files-solved/44540 "2024-06-05T19:34:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![devski](https://avatars.discourse-cdn.com/v4/letter/d/958977/32.png) [@devski](https://discourse.processing.org/u/devski)\
**Post date:** [June 5, 2024, 7:34pm UTC](https://discourse.processing.org/t/custom-halftone-grids-for-images-using-multiple-svg-files-solved/44540/1 "2024-06-05T19:34:28Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/4/b49249b0104419543a147b879282a5676f879e88.jpeg)

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:

```auto
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);

}
 }
}

```

---

<div class="post-metadata">

**Author:** ![devski](https://avatars.discourse-cdn.com/v4/letter/d/958977/32.png) [@devski](https://discourse.processing.org/u/devski)\
**Post date:** [June 5, 2024, 8:57pm UTC](https://discourse.processing.org/t/custom-halftone-grids-for-images-using-multiple-svg-files-solved/44540/2 "2024-06-05T20:57:13Z")

</div>

Solved it.

 ![Screenshot 2024-06-05 at 21.56.15](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/1/81b1fdfc53cbdaafbab942eddc11f38a47c20bd0.jpeg)

I used an if else if else statement

here is the code now:

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

```