# Gentle jiggle with sine wave
**URL:** https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291
**Category:** Coding Questions
**Created:** [November 7, 2018, 4:27am UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291 "2018-11-07T04:27:37Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@yangs](https://discourse.processing.org/u/yangs)
#### Post date: [November 7, 2018, 4:27am UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291/1 "2018-11-07T04:27:37Z")
Hi all! I’m hoping someone could point me in the right direction. I’m attempting to create a function that allows the user to draw lines, but the lines will gently wiggle, like if they are being blown in the wind. For the sake of getting started, I’ve been just playing with the sin() function, even though that might not be the most wind “realistic”.
This:
```auto
function setup() {
createCanvas(400, 400);
}
function draw() {
background(50);
stroke(255);
strokeWeight(8);
line(200, 200, 100+sin(frameCount), 100);
}
```
works fine, for an iterative approach.
However, this:
```auto
let lastClickX = -1
let lastClickY = -1
function setup() {
createCanvas(500, 500);
background(0);
}
function draw() {
if (mouseIsPressed) {
stroke(255);
strokeWeight(0.5);
}
if (lastClickX >= 0 && lastClickY >= 0)
line(mouseX, mouseY, lastClickX+sin(frameCount), lastClickY);
lastClickX = mouseX;
lastClickY = mouseY;
}
```
is just still. It has the draw functionality, which is great, but does anyone mind pointing out where I might be going wrong? Even doing:
`line(mouseX, mouseY, 100+sin(frameCount), lastClickY);`
for testing sake just gives bizarre and very still results.
Thank you so much!
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 7, 2018, 5:42am UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291/2 "2018-11-07T05:42:55Z")
i understand you want not draw connected lines,
only lines from mouse position to direction and length
defined by wind.
like this?
[https://editor.p5js.org/kll/sketches/Sk07rle6Q](https://editor.p5js.org/kll/sketches/Sk07rle6Q)
well, i think you need COLOR
---
### Author:  [@yangs](https://discourse.processing.org/u/yangs)
#### Post date: [November 7, 2018, 1:18pm UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291/3 "2018-11-07T13:18:13Z")
Thanks for the demo!
I actually do want connected lines – the behavior in the second bit of code is actually what I wanted. My issue is that it is still and doesn’t seem to be affected by the sin() function at all. In your demo, the sine function doesn’t seem to impact the lines drawn either, which is a huge part of my confusion with my issue.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 7, 2018, 1:34pm UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291/4 "2018-11-07T13:34:56Z")
> doesn’t seem to be affected by the sin() function at all
the sin cos of wind direction works
but produce a static picture
ahm, do you expect that the lines ( or endpoints of it ) continuously move/jitter?
then need a complete different concept,
actually more like in your first code.
but for drawing need to
-a- store the points in a array
-b- use a
```auto
draw(){
background(0):
// draw lines from array
}
```
and there you can modify the position at each frame
by sin( farmerate) or ± random XY
---
### Author:  [@yangs](https://discourse.processing.org/u/yangs)
#### Post date: [November 7, 2018, 5:12pm UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291/5 "2018-11-07T17:12:37Z")
Interesting… are you saying that I should store all instances of every line created in an array? How would the array enable the sinewave function? I thought I was replicating the structure of the first bit of code, with the sin() added to the third parameter of line().
And I didn’t use background in the draw() function just beacuse it would then erase the lines every single time – other than that, no discernable differences, at least from what I can tell.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 7, 2018, 11:15pm UTC](https://discourse.processing.org/t/gentle-jiggle-with-sine-wave/5291/6 "2018-11-07T23:15:42Z")
i see 3 steps:
- edit function
each time you click with the mouse you ADD a line segment to the Pvector array
Xn+1, Yn+1
- draw function
make a loop over the array and draw line segments with
line((X1,Y1,X2,Y2);
( that would be static picture again)
- wind function
it is actually not easy,
-
- you could move each point independently (means the line segments are rubber bands )
-
- in a rope ( 3D flag ) concept the line segment distances are fix ( but not the position ) so if you move one point you move also each following
there can be 2 ways to store and draw it
-
-
- store {0,0}{ x1,y1}{x2,y2 } and draw
line(0,0,x1jitter,y1jitter);
line(x1jitter,y1jitter,x1jitter+(x2-x1),y1jitter+(x2-x1));
-
-
- store {0,0}{dx1,dy1}{dx2,dy2} and draw
line(0,0,dx1jitter,dy1jitter);
line(dx1jitter,dy1jitter,dx1jitter+dx2,dy1jitter+dy2);
-
- but finally need the
function jitter(xn,yn)
where you use the sin function like you did in your first code or a random thing
a sin could have 3 factors,
-
-
- after {0,0} the wave must start from 0 to biggest amplitude and along the “rope” the amplitude gets smaller
-
-
- that big wave ( starting at fixpoint 0 ) moves along the line over time
using a phase shift like sin(w+k\*shift)
-
-
- a general winddirection could be adjusted like with a rotation
( flag on a pole ( 2D only ))
i wonder if there is a real model of a FLAG in the wind ( and less wind + gravity the flag hangs downward )?
sounds very challenging
here? [https://forum.processing.org/two/discussion/17872/waving-a-flag](https://forum.processing.org/two/discussion/17872/waving-a-flag)