# Map texture onto PATH shape

**URL:** <https://discourse.processing.org/t/map-texture-onto-path-shape/29891>\
**Category:** Coding Questions\
**Created:** [May 5, 2021, 2:59pm UTC](https://discourse.processing.org/t/map-texture-onto-path-shape/29891 "2021-05-05T14:59:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Frinkel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/frinkel/32/13051_2.png) [@Frinkel](https://discourse.processing.org/u/Frinkel)\
**Post date:** [May 5, 2021, 2:59pm UTC](https://discourse.processing.org/t/map-texture-onto-path-shape/29891/1 "2021-05-05T14:59:11Z")

</div>

Hello,  
I have a shape, which has a texture applied to it, but I would like the shape to be of type PATH, since this will allow the use of the contains(x,y) method. The problem is, if I change the shape type to PATH, no texture is shown. Is it possible to have a texture on a PATH shape?

Code:

```auto
public class View extends PApplet {
     PImage img;
     PShape myShape;

     public void setup() {
         img = loadImage("assets\\images\\test.jpg");

         myShape = createShape(PShape.PATH);
         textureMode(NORMAL);
         myShape.beginShape();
         myShape.texture(img);
         myShape.vertex(0, 0, 0, 0);
         myShape.vertex(100, 0, 1, 0);
         myShape.vertex(100, 100, 1, 1);
         myShape.vertex(0, 100, 0, 1);
         myShape.endShape(CLOSE);
     }

     public void settings() {
        size(displayHeight*3>>2, displayHeight*3>>2, P3D);
     }

     public void draw() {
         background(255);
         shape(myShape);
     }
 }

```

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [May 5, 2021, 4:17pm UTC](https://discourse.processing.org/t/map-texture-onto-path-shape/29891/2 "2021-05-05T16:17:58Z")

</div>

Hi @Frinkel ,

Please link to the previous thread for context (and the image file).

> [@Map image onto shape](https://discourse.processing.org/t/map-image-onto-shape/29879):
>
> Hi I’m working with the processing library for Java, and are having some issues giving my shapes a texture, right now, the texture isn’t showing. I hope some of you guys might have an idea, of what I’m doing wrong. IDE is eclipse. Heres my code: public class View extends PApplet { PImage img; PShape myShape; public void setup() { img = loadImage("assets\\images\\test.jpg"); } public void settings() { size(displayHeight\*3\>\>2, displayHeight\*3\>\>2); …

It depends on which graphics renderer you’re committing to. If you use the default `JAVA2D` you can use underlying AWT classes and methods to accomplish what you’ve described, both for contains and the mask.

![cap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7d19b8b42d4021a1598c1ee56f445e3b5fcc5390.jpeg)

```java
import processing.awt.PGraphicsJava2D;
import java.awt.geom.Path2D;
import java.awt.Image;
import java.awt.image.BufferedImage;
import java.awt.Point;

PGraphicsJava2D graphics;
Image img;
Path2D.Float path = new Path2D.Float();

void settings() {
  size(400, 400, JAVA2D);
}

void setup() {
  graphics = (PGraphicsJava2D)getGraphics();

  float whalf = graphics.width / 2;
  float hhalf = graphics.height / 2;
  float s = 175.0f;
  float t = s * 0.552125f;

  path.moveTo(whalf + s, hhalf);
  path.curveTo(whalf + s, hhalf + t, whalf + t, hhalf + s, whalf, hhalf + s);
  path.curveTo(whalf - t, hhalf + s, whalf - s, hhalf + t, whalf - s, hhalf);
  path.curveTo(whalf - s, hhalf - t, whalf - t, hhalf - s, whalf, hhalf - s);
  path.curveTo(whalf + t, hhalf - s, whalf + s, hhalf - t, whalf + s, hhalf);
  path.closePath();

  // In case file test.jpeg is misplaced.
  //PImage pimg = createImage(512, 512, ARGB);
  //checker(0xff7f00ff, 0xff007fff, 8, 8, pimg);
  
  PImage pimg = loadImage("test.jpeg");
  pimg.resize(pimg.width/2, pimg.height/2);
  img = convertPImageToNative(pimg);
}

void draw() {
  blendMode(BLEND);
  background(0xff202020);
  graphics.g2.setClip(path);
  graphics.g2.drawImage(img, 0, 0, null);
  graphics.g2.setClip(null);

  Point point = new Point(mouseX, mouseY);
  boolean inside = path.contains(point);
  if (inside) {
    stroke(0xffffff00);
    strokeWeight(20);
    point(mouseX, mouseY);
  }
}

public static Image convertPImageToNative(PImage pimg) {

  int pw = pimg.pixelWidth;
  int ph = pimg.pixelHeight;
  pimg.loadPixels();
  BufferedImage imgNtv = new BufferedImage(pw, ph, pimg.format
    == PConstants.RGB ? BufferedImage.TYPE_INT_RGB
    : BufferedImage.TYPE_INT_ARGB);
  imgNtv.getRaster().setDataElements(0, 0, pw, ph, pimg.pixels);
  return imgNtv;
}

public static PImage checker(int a, int b, int cols,
  int rows, PImage target ) {

  target.loadPixels();

  int w = target.pixelWidth;
  int h = target.pixelHeight;
  int pd = target.pixelDensity;

  int limit = 2 * pd;
  int vcols = cols < 2 ? 2 : cols > w / limit ? w / limit : cols;
  int vrows = rows < 2 ? 2 : rows > h / limit ? h / limit : rows;

  int[] px = target.pixels;
  int len = px.length;

  int wch = w / vcols;
  int hchw = w * h / vrows;

  for ( int i = 0; i < len; ++i ) {
    px[i] = ( i % w / wch + i / hchw ) % 2 == 0 ? a : b;
  }

  target.format = PConstants.ARGB;
  target.updatePixels();
  return target;
}

```

For P2D, you could try reverse engineering the contains method

> <https://github.com/processing/processing/blob/a6e0e227a948e7e2dc042c04504d6f5b8cf0c1a6/core/src/processing/core/PShape.java#L2964>

and then write a fragment shader to get a mask.

Best,  
Jeremy