0
288
Visualizaçõesp5js: las líneas radiales de diferentes longitudes no se dibujan correctamente
Estoy trabajando en un proyecto p5js y dibujo líneas radiales con diferentes longitudes. Estoy usando este fragmento en un bucle para mapear y dibujar las líneas:
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 es una distribución de curva de campana simple (entre 0 y 1) para hacer que las líneas cambien de longitud suavemente y shift es un número generado aleatoriamente para dispersar aleatoriamente el segundo radio y cambiar la longitud.
Sesgar es donde las cosas van mal. Con sesgo estoy inclinando las líneas desde el centro. Sin cambio, el sesgo funciona muy bien, pero una vez que disperso la longitud de las líneas, las matemáticas para calcular la posición del radio exterior se vuelven... bueno, sesgadas (imagen adjunta).
Aquí hay un enlace a un codepen donde puedes ver lo que quiero decir: https://codepen.io/chazthetic/pen/KKQNKaM . ¿Hay una mejor manera de calcular la posición del segundo punto donde se alinearán las líneas? 
1 Respostas
Responde à pergunta0
Una idea es basar el cálculo de x2 e y2 en x1 e y1; utilícelos como punto de partida para calcular el final del segmento de línea.
Sentido:
var x2 = x1 + (rMinLen + (plot*rMaxLen*shift))*Math.cos(theta + skew); var y2 = y1 + (rMinLen + (plot*rMaxLen*shift))*Math.sin(theta + skew);