Processing 1.0 - Processing Discourse - bezierVertex texturing

jaylfk Senior Member Offline Posts: 253	bezierVertex texturing Nov 17^th, 2006, 1:24pm I'd like to apply a texture on some bezierVertex objects. Hi guys, I've tried this, but i only get one color of the texture mapped to the beziervertex object. Quote: PImage a = loadImage("texture.jpg"); textureMode(NORMALIZED); beginShape(); texture(a); Any idea ?

Ira

Re: bezierVertex texturing
Reply #1 - Nov 17^th, 2006, 8:16pm

One thing that sort of works is using bezierPoint() to calculate coordinates along the bezier curve. Then you can use the vertex() function to replot the coordinates in textureMode. The trick is setting the right values for the UV arguments, so the picture isn't completley distorted (unless you want it to be.)

Quote:

float[] px, py, cx, cy, cx2, cy2;
int pts = 4;
float[][]curveCoords;

void setup(){
size(400, 400, P3D);
background(145);
setCurveCoords(pts, 130, 130);
curveCoords = getCurveCoords(10);
plotCurve();
}

void setCurveCoords(int points, float radius, float controlRadius){
// plots an ellipse
pts = points;
px = new float[points];
py = new float[points];
cx = new float[points];
cy = new float[points];
cx2 = new float[points];
cy2 = new float[points];
float rot = radians(360.0/points);
float theta = rot;
float controlAngle1 = theta/3.0;
float controlAngle2 = controlAngle1*2.0;
for ( int i=0; i<points; i++){
px[i] = width/2+cos(theta)*radius;
py[i] = height/2+sin(theta)*radius;
cx[i] = width/2+cos(theta+controlAngle1)*
controlRadius/cos(controlAngle1);
cy[i] = height/2+sin(theta+controlAngle1)*
controlRadius/cos(controlAngle1);
cx2[i] = width/2+cos(theta+controlAngle2)*
controlRadius/cos(controlAngle1);
cy2[i] = height/2+sin(theta+controlAngle2)*
controlRadius/cos(controlAngle1);
theta+=rot;
}
}

float[][] getCurveCoords(int steps){
float x = 0, y = 0;
int counter = 0;
float[][] curveCoords = new float[2][pts*(steps+1)];
for (int i=0; i<pts; i++){
for (int j = 0; j <= steps; j++) {
float t = j / float(steps);
if (i<pts-1) {
x = bezierPoint(px[i], cx[i], cx2[i], px[i+1], t);
y = bezierPoint(py[i], cy[i], cy2[i], py[i+1], t);
curveCoords[0][counter] = x;
curveCoords[1][counter] = y;
counter++;
}
else {
x = bezierPoint(px[i], cx[i], cx2[i], px[0], t);
y = bezierPoint(py[i], cy[i], cy2[i], py[0], t);
curveCoords[0][counter] = x;
curveCoords[1][counter] = y;
counter++;
}
}
}
return curveCoords;
}

void plotCurve(){
PImage img = loadImage("p1.jpg");
textureMode(NORMALIZED);
beginShape();
texture(img);
float seg = 360.0/curveCoords[0].length;
float ang = 90;
for (int i=0; i<curveCoords[0].length; i++){
vertex(curveCoords[0][i], curveCoords[1][i], (cos(radians(ang))+1)/2, (sin(radians(ang))+1)/2);
ang+=seg;
}
endShape(CLOSE);
}

« Last Edit: Nov 17^th, 2006, 10:36pm by Ira »

Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas

jaylfk

Re: bezierVertex texturing
Reply #2 - Nov 18^th, 2006, 2:45pm

Thx Irag for your exemple.

I tried to apply it, but it doesn't work.

Quote:

void tadpole(){
PImage img = loadImage("texture.jpg");
textureMode(NORMALIZED);
float[] pos;
beginShape();
texture(img);
pos = calc( 0f, -1f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( 0.5f, -1f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( 1f, -0.5f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( 1f, 0f, fsize );
bezierVertex( pos[0], pos[1] );

pos = calc( 1f, 1f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( tailPC[0], tailPC[1], fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( tailP[0], tailP[1], fsize );
bezierVertex( pos[0], pos[1] );

pos = calc( tailPC[0], tailPC[1], fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( -1f, 1f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( -21f, 0f, fsize );
bezierVertex( pos[0], pos[1] );

pos = calc( -1f, -0.5f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( -0.5f, -1f, fsize );
bezierVertex( pos[0], pos[1] );
pos = calc( 0f, -1f, fsize );
bezierVertex( pos[0], pos[1] );

endBezier();
endShape(CLOSE);

What i'm doing wrong ?

Any help is welcome Wink

jaylfk Senior Member Offline Posts: 253	Re: bezierVertex texturing Reply #3 - Nov 18^th, 2006, 8:22pm Wow, if i let the previous code example running for 10 sec, it will use all my computer's memory available (2GB). It looks like a memory leak.

Ira

Re: bezierVertex texturing
Reply #4 - Nov 18^th, 2006, 8:28pm

I'm not sure what you're doing wrong. Can you please post all your code.

Notice in my example (which does work)I'm not actually plotting with the bezier/bezierVertex() calls. Rather, I'm calculating the bezier anchor/control point positions and then using the bezierPoint() function to calculate points along the curve. These added points allow me to call straight vertex() calls (approximating the curve) while setting UV coordinates in texture mode. I'm not sure how much coding experience you have, and I realize my example is a bit convoluted, but the implementation should allow you to texture map a curved shape.
Hopefully, if I (or someone else) can see all your code, we might be able to point you in the right direction.
best, ira

Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas

jaylfk Senior Member Offline Posts: 253	Re: bezierVertex texturing Reply #5 - Nov 19^th, 2006, 3:41pm Hi Irag, I'm actually using the pond's code from William Ngan. http://www.metaphorical.net/code/processing/applet/pond.pde I'm trying to learn how to manage texturing on "beziervertex" in processing. I think the above mentioned code is perfect for this purpose.

fry

Re: bezierVertex texturing
Reply #6 - Nov 19^th, 2006, 6:23pm

you'll have memory problems if you use loadImage() while you're drawing (i.e. if that code is called from inside draw) .. this is why the reference says not to use loadImage() inside draw().

as for texturing, use several calls to bezierPoint() with vertex(), instead of bezierVertex(). this will let you calculate points along the bezier and specify how you'd like to interpolate the texture coordinates for the points along the bezier vertex.

the technical explanation is that this isn't done internally, because there isn't a good way to do it accurately (or at least there's no accurate method that has reasonable speed). the problem is that even with bezierPoint(), the values don't give you optically "even" points along the bezier, so the texture will be warped unless you do something like handle subdividing the bezier into segments of a specific size that will allow you to set the interpolation properly. that's the accurate, but slow, way of handling it. and because this is rare, we're not gonna needlessly slow down bezierVertex() with it.

Ira

Re: bezierVertex texturing
Reply #7 - Nov 19^th, 2006, 6:29pm

William's essentially using a similar bezier plotting process as in my example-converting bezier coordinates to straight vertex calls. So the trick still boils down to setting the right UV values. Quickly applying my ellipse UV coords almost works (on the prey), but with some texture jumping. Also, make sure you set the renderer to P3D size(300, 300, P3D).

Here's William's updated bezierVertex2() method:
Quote:

// METHOD: draw cubic bezier curve -- similar to bezierVertex() method in proce55ing
void bezierVertex2( float px, float py ) {
float ang = 0;
float[] pt = {
px, py };
bp[bcount++] = pt;
if (bcount > 3) {
for(int i=0; i<=precision; i++) {
float[] p = bezier( bp, i/(float)precision );
vertex( p[0], p[1], (cos(radians(ang))+1)/2, (sin(radians(ang+=360/precision))+1)/2);
}
bp[0] = bp[3];
bcount = 1;
}
}

Obviously you'll also need to load your image
Code:


img = loadImage("p1.jpg");

and call:
Code:


textureMode(NORMALIZED);

and
Code:


// following beginShape()
texture(img);

Hope this helps.
ira

Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas

jaylfk

Re: bezierVertex texturing
Reply #8 - Nov 19^th, 2006, 10:20pm

If i can't use loadImage() inside draw(), where am i supposed to use it ? Inside void bezierVertex2() { ? }

I also still can't figure out where and how i must use bezierpoint().

Should i have just to draw the bezier points coords and interpolate the texture on it ?

It would be nice if someone could just show me the way with a small example based on the pond's code.

This sounds easy for you guys, but it's a real pain for me :)

thx ;)

[EDIT] @ Irag : i'm testing with your example, it's working but it is really slow :(

The p01.jpg texture size is only 80x60 (<8KB)

Quote:

void bezierVertex2( float px, float py ) {
PImage img = loadImage("p01.jpg");
textureMode(NORMALIZED);
texture(img);
float ang = 0;
float[] pt = {
px, py };
bp[bcount++] = pt;
if (bcount > 3) {
for(int i=0; i<=precision; i++) {
float[] p = bezier( bp, i/(float)precision );
vertex( p[0], p[1], (cos(radians(ang))+1)/2, (sin(radians(ang+=360/precision))+1)/2);
}
bp[0] = bp[3];
bcount = 1;
}
}

how can i optimize it ?

(i'm running it on a 2.33ghz Core 2 Duo with 2GB of RAM and a X1600XT 256MB)

jaylfk Senior Member Offline Posts: 253	Re: bezierVertex texturing Reply #9 - Nov 19^th, 2006, 11:50pm Ok guys, I've finally found it ! Quote: PImage img = loadImage("p01.jpg"); void getfish(){ float[] pos; textureMode(NORMALIZED); beginShape(); texture(img); Thank you so much for your help !