P5 transparent image problem

p5.js Coding Questions
6

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.

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

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