We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › make an image curve / bend
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
make an image curve / bend? (Read 1354 times)
asquare
make an image curve / bend?
Jul 28th, 2006, 4:47pm  
Hello

Trying to take a line from an image on screen and copy it into the form of a full circle (bend an image, curl it) with the aim of ultimately making a rectangular image into a circle / disc (sort of a polar coordinates effect).  

I'm not to sure of the math to calculate the curve (which later will need to increase in radius pixel by pixel).  Seem to remember curves are culated with pi but beyond that I'm not sure where to start?  Any suggestions anyone?

a+
gar
Back to top
 
WWW  
eskimoblood
Re: make an image curve / bend?
Reply #1 - Jul 28th, 2006, 10:26pm  
First the circumference=TWO_PI*radius, so the radius of your circle will be the length of your divided by TWO_PI.
A point on a circle is defined by x=cos(alpha)*radius and y=sin(alpha)*radius.
0<alpha<TWO_PI
Thats al the math behind it
Back to top
 
Andreas Köberle {eskimoblood}
222550793  
asquare
Re: make an image curve / bend?
Reply #2 - Jul 29th, 2006, 4:01pm  
Hello

Thanks for your response.  From your response and looking at cos (which is what I needed to look at) I came up with the following:


int v_width, v_height, v_xoffset, v_yoffset;
float v_x, v_y, v_radius, v_circumference, v_alpha, v_i;
color v_white;

//width and height stored as a variable
v_width = 768;
v_height = 576;

//set stage size
size(v_width, v_height);
//size(v_width, v_height, P3D);

//set background colour
background(0);

//calculate the x and y offset
v_xoffset = v_width / 2;
v_yoffset = v_height / 2;
 
//radius, circumference, alpha?, colour  
v_radius = 100;
v_circumference = TWO_PI / v_radius;
v_alpha = 0.0;
v_white = color(255);
v_i = 0.0;

//loop (how many times?)
while(v_i < TWO_PI)
{
 //calculate x and y position
 v_x = cos(v_alpha) * v_radius;
 v_y = sin(v_alpha) * v_radius;
 
 //set pixel starting from stage centre
 set(v_xoffset + int(v_x), v_yoffset + int(v_y), v_white);
 
 //to test
 //println("x = " + x + ", y = " + y);
 
 //unsure as to how these work?
 v_alpha = v_alpha + 1;
 v_i += PI/v_radius;
}


Not too sure how the v_i < TWO_PI seems to make a full circle and then stop looking but I'll take that as a given for the moment.  The v_alpha obviously controls the spacing along the circumference of the circle how do I get it to make a full unbroken circle?  Thanks in advance.

a+
gar
Back to top
 
WWW  
eskimoblood
Re: make an image curve / bend?
Reply #3 - Jul 29th, 2006, 11:03pm  
I think there will be an easier way to draw a image as an circle. Take a look at texture: http://processing.org/reference/texture_.html. If you cut your image in stripes and use these stripes as texture for triangles in an circle.

Code:

 for(int i=0;i<allSteps;i++){
	float x1=cos((TWO_PI/allSteps)*i)*radius;
	float y1=sin((TWO_PI/allSteps)*i)*radius;
	float x2=cos((TWO_PI/allSteps)*(i+1))*radius;
	float y2=sin((TWO_PI/allSteps)*(i+1))*radius;
	float x3=cos((TWO_PI/allSteps)*(i+1))*radius2;
	float y3=sin((TWO_PI/allSteps)*(i+1))*radius2;
	float x4=cos((TWO_PI/allSteps)*i)*radius2;
	float y4=sin((TWO_PI/allSteps)*i)*radius2;
	//the strip of the pic
	float  xPic1=pic.width/allSteps*i;
	float yPic1=0;
	float xPic2=pic.width/allSteps*(i+1);
	float yPic2=0;
	float xPic3=pic.width/allSteps*(i+1);
	float yPic3=pic.height;
	float xPic4=pic.width/allSteps*i;
	float  yPic4=pic.height;
	beginShape();
	texture(pic);
	vertex(x1,y1,xPic1,yPic1);
	vertex(x2,y2,xPic2,yPic2);
	vertex(x3,y3,xPic3,yPic3);
	vertex(x4,y4,xPic4,yPic4);

	endShape();


This is not tested and maybe i'm be wrong but i think this is the easiest way.
Back to top
« Last Edit: Jul 30th, 2006, 9:21pm by eskimoblood »  
Andreas Köberle {eskimoblood}
222550793  
fry
Re: make an image curve / bend?
Reply #4 - Aug 1st, 2006, 7:53pm  
the best option would be to:

+ use the texture() command to set the image (you'll need to use P3D or OPENGL).

+ use beginShape(TRIANGLE_FAN) or beginShape(POLYGON) and draw a circle.

+ draw a circle using the following:
y = centerY + cos(angle) * radius;
x = centerX + sin(angle) * radius;
where angle goes from 0..TWO_PI

+ as you draw each vertex, you'll need to figure out how you want to map the texture coordinates, and how you want to warp the image. for instance, you might say:

angle = 0 to HALF_PI.. u = (angle/HALF_PI), v = 0
angle = HALF_PI to PI.. u = 1, v = (angle-HALF_PI)/HALF_PI
angle = PI -to 3*PI/2.. u = (angle-PI)/HALF_PI, v = 1
angle = 3*PI/2 to TWO_PI.. u = 0, v = (angle-3*PI/2)/HALF_PI

+ you'll also want to use textureMode() to make sure it's expecting u, v coordinates between 0 and 1.

i haven't tested this so it may need a little tweaking, but this is the basic idea. it may sound complex but shouldn't be more than a few lines of code.
Back to top
 
WWW  
asquare
Re: make an image curve / bend?
Reply #5 - Aug 2nd, 2006, 4:12pm  
Hi

You've lost me on this now.  Pretty sure I interpreted what you wrote correctly down as far as the first two lines in the while loop but not sure how the angle is calculated.  What are the u and v variables, are these for a vertex() command?

a+
gar


int v_width, v_height, v_xoffset, v_yoffset;
float v_x, v_y, v_radius, v_circumference, v_angle, v_i;
color v_white;

//width and height stored as a variable
v_width = 768;
v_height = 576;

//set stage size
//size(v_width, v_height);
size(v_width, v_height, P3D);

//set background colour
background(0);

//calculate the x and y offset
v_xoffset = v_width / 2;
v_yoffset = v_height / 2;
 
//radius, circumference, alpha?, colour  
v_radius = 100;
v_angle = 0.0;
v_white = color(255);
v_i = 0.0;


noStroke();
PImage a = loadImage("dog.jpg");
beginShape(TRIANGLE_FAN);
texture(a);

//loop (how many times?)
while(v_i <= TWO_PI)
{
 //calculate x and y position
 v_y = v_xoffset + cos(v_angle) * v_radius;  
 v_x = v_yoffset + sin(v_angle) * v_radius;
 
 //set pixel starting from stage centre
 set(int(v_x), int(v_y), v_white);
 
//v_angle = 0 to HALF_PI..u = (v_angle/HALF_PI); v = 0;
//v_angle = HALF_PI to PI.. u = 1, v = (v_angle-HALF_PI)/HALF_PI;
//v_angle = PI -to 3*PI/2.. u = (v_angle-PI)/HALF_PI, v = 1;
//v_angle = 3*PI/2 to TWO_PI.. u = 0, v = (v_angle-3*PI/2)/HALF_PI;


 //to test
 //println("x = " + x + ", y = " + y);
 
 //unsure as to how these work?
 v_i += PI/v_radius;
}


endShape();
Back to top
 
WWW  
davbol
Re: make an image curve / bend?
Reply #6 - Aug 2nd, 2006, 6:55pm  
>> how do I get it to make a full unbroken circle

Suggest that you flip the problem around.  Rather than thinking: for each texture pixel where do you put it in the output?  instead think: for each output pixel which texture pixel should you get?

In rough psueodocode (to leave you room to learn):

for each output y
 for each output x
   get angle atan2(y,x)
   get radius sqrt(x*x+y*y)
   normalize and scale angle by texture width to get "u" coord
   normalize and scale radius by texture height to get "v" coord
   output[xy] = texture[uv]

Once you understand it and have it working you could then precalculate most of the "hard stuff" into a lookup table, then your loop becomes:

for each output y
 for each output x
   output[xy] = texture[uvlookup[xy]]

By modifying the exact calcs for radius,angle and scaling you can achieve different effects.  Simple stuff like where the 0 angle seam ends up on screen, or fancy stuff like perspective "tunnels".
Back to top
 
WWW  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›