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:
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.
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
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.
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 )?
