Loading...
Logo
Processing Forum
Programming Questions
kinglui987
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
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
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.

Copy code
  2. PVector p1 = new PVector(10,10);
  3. PVector p2 = new PVector(100,100);

  5. float gFreq = 2; // frequency
  6. float gAmp = 50; // amplitude in pixels

  8. void setup()
  9. {
  10.   size(500,500);
  11.   smooth();
  12. }

  14. void sineTo(PVector p1, PVector p2, float freq, float amp)
  15. {
  16.   float d = PVector.dist(p1,p2);
  17.   float a = atan2(p2.y-p1.y,p2.x-p1.x);
  18.   noFill();
  19.   pushMatrix();
  20.     translate(p1.x,p1.y);
  21.     rotate(a);
  22.     beginShape();
  23.       for (float i = 0; i <= d; i += 1) {
  24.         vertex(i,sin(i*TWO_PI*freq/d)*amp);
  25.       }
  26.     endShape();
  27.   popMatrix();
  28. }

  30. void draw()
  31. {
  32.   background(255);
  33.   sineTo(p1,p2,gFreq,gAmp);
  34.   fill(255,255,0);
  35.   ellipse(p1.x,p1.y,20,20);
  36.   ellipse(p2.x,p2.y,20,20);

  38.   if (mousePressed) {
  39.       if (dist(p1.x,p1.y,pmouseX,pmouseY) < 10) {
  40.         p1.x += mouseX - pmouseX;
  41.         p1.y += mouseY - pmouseY;
  42.       }  else if (dist(p2.x,p2.y,pmouseX,pmouseY) < 10) {
  43.         p2.x += mouseX - pmouseX;
  44.         p2.y += mouseY - pmouseY;
  45.       }
  46.   }
  47. }

  49. void keyPressed() {
  50.   if (key >= '1' && key <= '9') {
  51.     gFreq = key - '0';
  52.   }
  53. }

kinglui987
kinglui987

Re: Draw a sine curve between any two points!

1 year ago
Great work, thanks a lot! And so easy! Nice!
Top Reply

Statistics

  • 3 Replies
  • 1058  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts