# How to add texture (with an image) to a line?

**URL:** <https://discourse.processing.org/t/how-to-add-texture-with-an-image-to-a-line/22048>\
**Category:** Coding Questions\
**Created:** [June 22, 2020, 12:43am UTC](https://discourse.processing.org/t/how-to-add-texture-with-an-image-to-a-line/22048 "2020-06-22T00:43:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vickydcl](https://avatars.discourse-cdn.com/v4/letter/v/f14d63/32.png) [@Vickydcl](https://discourse.processing.org/u/Vickydcl)\
**Post date:** [June 22, 2020, 12:43am UTC](https://discourse.processing.org/t/how-to-add-texture-with-an-image-to-a-line/22048/1 "2020-06-22T00:43:41Z")

</div>

```
So i have this code (its a function that creates a line in a line object):

```

```auto
void dibujarLinea() //draw color line
{
    pushMatrix();
    pushStyle();
    strokeCap(PROJECT);
    strokeWeight( grosor );
    translate( x , y );
    rotate( angulo ); //angle
    
    for ( int i=0; i<cantidad; i++ ) {
      float x1 = i*tam; //tam=size
      float x2 = (i+1)*tam; //tam=size
      stroke( colores[i] ); //color
      line( x1, 0, x2, 0 );
      //add a texture here//
    }
    popStyle();
    popMatrix(); }

```

and I want to add a texture everytime a line is created, how could I do it?  
Here is an example of what my sketch generates (I want to add a texture in every color of my line).

 ![KathyCantwell_1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f5dc23ec78943f37bab863c8ba4945f84c4b507b.jpeg)

Thanks!  
PS: I do not want to use vertex

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 22, 2020, 1:01am UTC](https://discourse.processing.org/t/how-to-add-texture-with-an-image-to-a-line/22048/2 "2020-06-22T01:01:45Z")

</div>

Assuming you have the center of each segment and its width and height, you can do this:

-Set imageMode to CENTER: [https://processing.org/reference/imageMode\_.html](https://processing.org/reference/imageMode_.html)

- Load your rectangular texture in a PImage object
- Use translate/rotate. Translate is used to set the center of the sketch at the center of the line segment. You do a rotate and then you draw the image
- Use push/pop. Push/pop allows to set and reset your sketch coordinate system. This comes handy when you are ready to set your next segment

In your code above, the translate/rotate and push/pop would be inside the for loop. You will need to have a PImage array that you can get the textures from while interacting with each line segment.

By the way, iamgeMode CENTER is just a recommendation. You can use any image mode you want but I find that CENTER works better in these situations.

Kf