Hi, everyone.
I have problem. My problem is: I want to load an transparent image to my p5 sketch.
I used texture and rect to do that.
But I couldn’t get right effect.
I wanted to get this effect:
I get this one(not fully developed):
I am loading transparent images…
Here is my code link.
Can anyone help ?
I appreciate any help. Thanks !
Have you tried texture with shape instead of rect?
Hello, try this:
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
No, I haven’t tried. Can u help me with that ?
Thank you for your try, but it is not what i want…
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);
}