Hi.

Tell me, please, how to draw a broken line from point A to point B through the canvas?

Something like this:

I.e. bending after each random number of pixels with alternating side (plus/minus) and a random deviation.

Tried to do a few lines, each time moving the coordinates and adding a random number, but it turns out a broom :(

In math I do not know if it is possible - explain, please, on fingers, or better as an example.

Thank you ♥

Tell me, please, how to draw a broken line from point A to point B through the canvas?

Something like this:

I.e. bending after each random number of pixels with alternating side (plus/minus) and a random deviation.

Tried to do a few lines, each time moving the coordinates and adding a random number, but it turns out a broom :(

In math I do not know if it is possible - explain, please, on fingers, or better as an example.

Thank you ♥

asked March 23rd 20 at 19:32

3 answers

answered on

Solution

Here I wrote a demo for example.

Well, the basic functions

Well, the basic functions

```
/// (start x, start y,end x,end y, the minimum line length,max lines long, minimum deflection angle, max angle deviation) will return an array of points
generateLines function(xStart,yStart,xEnd,yEnd, lenRandMin,lenRandMax,angleDeviationMin, angleDeviationMax ){
var arrayPos = [[xStart,yStart]];
var xCur = xStart;
var yCur = yStart;
angleDeviationMin = (angleDeviationMin * Math.PI)/180;//in radians
angleDeviationMax = (angleDeviationMax * Math.PI)/180;//in radians
var deviationPos = false;
do{
if(getDist(xCur,yCur,xEnd,yEnd) <= lenRandMax){
xCur = xEnd;
yCur = yEnd;
}
else{
var len = rand(lenRandMin,lenRandMax);
var angle = getAngle(xCur,yCur,xEnd,yEnd) + (deviationPos?rand(angleDeviationMin,angleDeviationMax):-rand(angleDeviationMin,angleDeviationMax));
xCur += Math.cos(angle) * len;
yCur += Math.sin(angle) * len;
}
arrayPos.push([xCur,yCur]);
deviationPos = !deviationPos;
}while(!(xCur == xEnd && yCur == yEnd));
return arrayPos;
}
//Get angle between two points
function getAngle(dx,dy,dx1,dy1){
return Math.atan2(dy - dy1,dx - dx1) + Math.PI;
}
///Get the distance between two points
function getDist(x,y,x1,y1){
return Math.sqrt(Math.pow(x1 - x,2)+Math.pow(y1-y,2));
}
//Get random from min to max
function rand(min, max) {
return min + Math.random() * (max - min)
}
```

answered on March 23rd 20 at 19:36

pour broom https://codepen.io, will try :)

In General, I was ashamed of the broom and I deleted :(

And when you try to restore it, suddenly came to the realization that coordinate, too, need to move.

In General, something like that as it turns out, but it's a hat of some sort.

Just randomly how to bind here the coordinates of the start and end points, as well as to prohibit to rise above and move only in the direction - I have no idea commented on March 23rd 20 at 19:39

And when you try to restore it, suddenly came to the realization that coordinate, too, need to move.

In General, something like that as it turns out, but it's a hat of some sort.

Just randomly how to bind here the coordinates of the start and end points, as well as to prohibit to rise above and move only in the direction - I have no idea commented on March 23rd 20 at 19:39

@henriett, took his broom :D

then another of the houses look, but that link is preserved

https://codepen.io/anon/pen/WBqWOw?editors=1010

the idea is to estimate the distance between the endpoint and the "current latest" point, which is already finished, and change the direction of the line is not quite random, but depending on the remaining distance.. but it's not exactly commented on March 23rd 20 at 19:42

then another of the houses look, but that link is preserved

https://codepen.io/anon/pen/WBqWOw?editors=1010

the idea is to estimate the distance between the endpoint and the "current latest" point, which is already finished, and change the direction of the line is not quite random, but depending on the remaining distance.. but it's not exactly commented on March 23rd 20 at 19:42

@Alberto.Lem, and the last line must end at the endpoint.

And how can we limit the possible deviations?

Well, that is, to set a kind of boundary around the normal straight line which can not get out?

**picture**

I understand that's asking a lot, but I just will not work. Kind of like random. and like as not, complex commented on March 23rd 20 at 19:45

And how can we limit the possible deviations?

Well, that is, to set a kind of boundary around the normal straight line which can not get out?

I understand that's asking a lot, but I just will not work. Kind of like random. and like as not, complex commented on March 23rd 20 at 19:45

answered on March 23rd 20 at 19:38

Crooked way, but still:

To go from two points to meet when the distance between the lines reaches a certain threshold, to close these lines. Demo

To go from two points to meet when the distance between the lines reaches a certain threshold, to close these lines. Demo

Find more questions by tags JavaScriptCanvas

I'll try to digest it, thanks - henriett commented on March 23rd 20 at 19:37