Gentle jiggle with sine wave


#1

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:

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:

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!


#2

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

well, i think you need COLOR


#3

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.


#4

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

draw(){
background(0):
// draw lines from array
}

and there you can modify the position at each frame
by sin( farmerate) or ± random XY


#5

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.


#6

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