Draw a sine curve between any two points!

Programming Questions

kinglui987

Draw a sine curve between any two points!

in Programming Questions • 1 year ago

Hey everybody,

i'm pretty new to processing. I try to draw a sine curve between two points. That would be the first step. Afterwards i would like to dynamically change frequency and amplitude of the sine curve.

Lets say, i have two Points P(200, 100) and Q(300, 600). How can i connect these two point with a sine curve??
The position of the point will not stay constant. They will change with user interaction.

If anyone can help me, would be really nice. I'm getting crazy with this. I hope the attached image illustrates what im trying to achieve.

Replies(3)

jbum

Re: Draw a sine curve between any two points!

1 year ago

Do you want

a) a curve which is mathematically as close to a sine wave as you can get (or)

b) a curve which resembles a sine wave, but is merely approximate.

if b, there are fairly efficient ways to do this using bezier curves. if a, we can do it by plotting an actual sine wave, but it's

less efficient.

jbum

Re: Draw a sine curve between any two points!

1 year ago

See this sketch. You can move the points, and change the frequency by typing numbers. It supports variable amplitude as well, although I haven't made any UI for controlling it.

PVector p1 = new PVector(10,10);
PVector p2 = new PVector(100,100);
float gFreq = 2; // frequency
float gAmp = 50; // amplitude in pixels
void setup()
{
size(500,500);
smooth();
}
void sineTo(PVector p1, PVector p2, float freq, float amp)
{
float d = PVector.dist(p1,p2);
float a = atan2(p2.y-p1.y,p2.x-p1.x);
noFill();
pushMatrix();
translate(p1.x,p1.y);
rotate(a);
beginShape();
for (float i = 0; i <= d; i += 1) {
vertex(i,sin(i*TWO_PI*freq/d)*amp);
}
endShape();
popMatrix();
}
void draw()
{
background(255);
sineTo(p1,p2,gFreq,gAmp);
fill(255,255,0);
ellipse(p1.x,p1.y,20,20);
ellipse(p2.x,p2.y,20,20);
if (mousePressed) {
if (dist(p1.x,p1.y,pmouseX,pmouseY) < 10) {
p1.x += mouseX - pmouseX;
p1.y += mouseY - pmouseY;
} else if (dist(p2.x,p2.y,pmouseX,pmouseY) < 10) {
p2.x += mouseX - pmouseX;
p2.y += mouseY - pmouseY;
}
}
}
void keyPressed() {
if (key >= '1' && key <= '9') {
gFreq = key - '0';
}
}

kinglui987

Re: Draw a sine curve between any two points!

1 year ago

Great work, thanks a lot! And so easy! Nice!

Top Reply