0
290
Viewsp5js - Radial lines of different lengths not drawing correctly
I'm working on a p5js project, and drawing radial lines with different lengths. I'm using this snippet in a loop to map and draw the lines:
var x1 = (this.mapR1)*Math.cos(i*2*Math.PI/this.numberLines);
var y1 = (this.mapR1)*Math.sin(i*2*Math.PI/this.numberLines);
var x2 = (this.mapR1 + this.mapRMinLen + (plot*this.mapRMaxLen*shift))*Math.cos(i*2*Math.PI/this.numberLines + skew);
var y2 = (this.mapR1 + this.mapRMinLen + (plot*this.mapRMaxLen*shift))*Math.sin(i*2*Math.PI/this.numberLines + skew)
p5.line(this.lines[i].x1, this.lines[i].y1, this.lines[i].x2, this.lines[i].y2);;
Plot is a simple bell curve distribution (between 0 and 1) to make the lines smoothly change length and shift is a randomly generated number to randomly scatter the second radius and change the length.
Skew is where things go awry. With skew I'm angling the lines from the center. Without shift, skew works great, but once I scatter the length of the lines, the math to calculate the position of the outer radius gets... well, skewed (image attached).
Here's a link to a codepen where you can see what I mean: https://codepen.io/chazthetic/pen/KKQNKaM. Is there a better way to calculate the second point position where the lines will be lined up?
1 answers
Answer question0
One idea is to base the calculation of x2 and y2 on x1 and y1; sort of use them as the jumping off point for the calculating the end of the line segment.
Meaning:
var x2 = x1 + (rMinLen + (plot*rMaxLen*shift))*Math.cos(theta + skew);
var y2 = y1 + (rMinLen + (plot*rMaxLen*shift))*Math.sin(theta + skew);