# P5 transparent image problem

**URL:** <https://discourse.processing.org/t/p5-transparent-image-problem/23891>\
**Category:** Coding Questions\
**Created:** [September 16, 2020, 2:49pm UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891 "2020-09-16T14:49:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 16, 2020, 2:49pm UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891/1 "2020-09-16T14:49:14Z")

</div>

Hi, everyone.

I have problem. My problem is: I want to load an transparent image to my p5 sketch.  
I used [texture](https://p5js.org/reference/#/p5/texture) and [rect](https://p5js.org/reference/#/p5/rect) to do that.  
But I couldn’t get right effect.  
I wanted to get this effect:

 ![Screen Shot 2020-09-16 at 11.05.21](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8b75ceafb6124053c6b32afff675982628ec43da.jpeg)

I get this one(not fully developed):

 ![Screenshot (168)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c9577fa3bf635ff848437c21a7f9ef52e927b61d.jpeg) .

I am loading transparent images…

Here is my code [link](https://editor.p5js.org/yhlaskerimov02/sketches/SDIzlQU6U).

Can anyone help ?  
I appreciate any help. Thanks !

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 18, 2020, 10:14am UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891/2 "2020-09-18T10:14:42Z")

</div>

Have you tried texture with shape instead of rect?

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 18, 2020, 12:20pm UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891/3 "2020-09-18T12:20:08Z")

</div>

Hello, try this:

> **[p5.js Web Editor](https://editor.p5js.org/Hyperion65/sketches/IPZ2SWso7)**

Some observations:  
in the default renderer using an image with transparent parts (.png) works. but not textures.

if you want to use a texture you apparently have to use WEBGL, for me that works too…

gl

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 18, 2020, 1:47pm UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891/4 "2020-09-18T13:47:58Z")

</div>

No, I haven’t tried. Can u help me with that ?

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 18, 2020, 1:48pm UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891/5 "2020-09-18T13:48:36Z")

</div>

Thank you for your try, but it is not what i want…

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 18, 2020, 8:06pm UTC](https://discourse.processing.org/t/p5-transparent-image-problem/23891/6 "2020-09-18T20:06:05Z")

</div>

Well unfortunately texture is only excepted in vertex coordinates. With curves or beziers, we could make much smoother corners. But it is doable. The first code below will draw the image. Now you have to press the mouse (only) in the curves with points nicely ordered close to each other. when you have finished all around, you press the spacebar. Now you can copy the shape code in the console and past it in the second code to test. The second code already has a pasted shape, but you certainly will want to redo it.

```auto
PImage img;
PShape shp;
ArrayList<PVector> shape_vectors = new ArrayList<PVector>();

void setup() {
  size(1000, 1000);
  background(255);
  img = loadImage("Dana_1.png");
  strokeWeight(8);
}

void draw() {
  image(img, 20, 20);
}

void mousePressed () {
  PVector pv = new PVector(mouseX, mouseY);
  shape_vectors.add(pv);
  point(mouseX, mouseY);
}

void keyPressed() {
  if (keyCode == 0x20) { // Space
    println("shp = createShape();");
    println("shp.beginShape();");
    println("shp.texture(img);");
    for (int i = 0; i < shape_vectors.size(); i++) {
      float x1 = shape_vectors.get(i).x;      
      float y1 = shape_vectors.get(i).y; 
      println("shp.vertex("+x1+" ,"+y1+" ,"+x1+" ,"+y1+");");
    }  
    println("shp.endShape();");
    exit();
  }
}

```

Second test code

```auto
PShape shp; 
PImage img;

void setup() {
  size(600, 600, P3D);
  noStroke();
  img = loadImage("Dana_1.png");
  shp = createShape();
  shp.beginShape();
  shp.texture(img);
  shp.vertex(184.0, 65.0, 184.0, 65.0);
  shp.vertex(189.0, 53.0, 189.0, 53.0);
  shp.vertex(200.0, 42.0, 200.0, 42.0);
  shp.vertex(212.0, 35.0, 212.0, 35.0);
  shp.vertex(223.0, 28.0, 223.0, 28.0);
  shp.vertex(237.0, 24.0, 237.0, 24.0);
  shp.vertex(247.0, 24.0, 247.0, 24.0);
  shp.vertex(731.0, 25.0, 731.0, 25.0);
  shp.vertex(744.0, 25.0, 744.0, 25.0);
  shp.vertex(758.0, 28.0, 758.0, 28.0);
  shp.vertex(768.0, 33.0, 768.0, 33.0);
  shp.vertex(777.0, 39.0, 777.0, 39.0);
  shp.vertex(785.0, 46.0, 785.0, 46.0);
  shp.vertex(790.0, 52.0, 790.0, 52.0);
  shp.vertex(795.0, 59.0, 795.0, 59.0);
  shp.vertex(799.0, 65.0, 799.0, 65.0);
  shp.vertex(952.0, 530.0, 952.0, 530.0);
  shp.vertex(952.0, 542.0, 952.0, 542.0);
  shp.vertex(955.0, 553.0, 955.0, 553.0);
  shp.vertex(954.0, 560.0, 954.0, 560.0);
  shp.vertex(953.0, 565.0, 953.0, 565.0);
  shp.vertex(952.0, 576.0, 952.0, 576.0);
  shp.vertex(948.0, 582.0, 948.0, 582.0);
  shp.vertex(944.0, 590.0, 944.0, 590.0);
  shp.vertex(943.0, 595.0, 943.0, 595.0);
  shp.vertex(938.0, 600.0, 938.0, 600.0);
  shp.vertex(932.0, 611.0, 932.0, 611.0);
  shp.vertex(543.0, 893.0, 543.0, 893.0);
  shp.vertex(538.0, 900.0, 538.0, 900.0);
  shp.vertex(526.0, 904.0, 526.0, 904.0);
  shp.vertex(519.0, 909.0, 519.0, 909.0);
  shp.vertex(505.0, 914.0, 505.0, 914.0);
  shp.vertex(489.0, 913.0, 489.0, 913.0);
  shp.vertex(471.0, 912.0, 471.0, 912.0);
  shp.vertex(458.0, 911.0, 458.0, 911.0);
  shp.vertex(441.0, 899.0, 441.0, 899.0);
  shp.vertex(54.0, 618.0, 54.0, 618.0);
  shp.vertex(46.0, 610.0, 46.0, 610.0);
  shp.vertex(38.0, 602.0, 38.0, 602.0);
  shp.vertex(31.0, 591.0, 31.0, 591.0);
  shp.vertex(27.0, 581.0, 27.0, 581.0);
  shp.vertex(24.0, 570.0, 24.0, 570.0);
  shp.vertex(24.0, 562.0, 24.0, 562.0);
  shp.vertex(22.0, 549.0, 22.0, 549.0);
  shp.endShape();
  shapeMode(CENTER);
}

void draw() {
  background(255);
  translate(width / 2, height/2);
  rotateY(map(mouseX, 0, width, -PI, PI));
  scale(.5);
  shape(shp, 20, 20);
}

```