무작위로 생성 된 부드러운 선 만들기

나는이 예제를 here에 따라 점마다 부드럽게 랜덤하게 생성 된 선을 만들기 위해 노력했습니다. 거의 그것의 필요가 무엇을 수행무작위로 생성 된 부드러운 선 만들기

var ptheta = 50; 
var theta = 50; 
var px = 0; 
var py = 0; 
var x = 50; 
var y = 50; 
var a = 0.3; 

var rand = 0; 
var angleVar = 0; 


function animate(){ 
    rand = Math.random() * (10.0 - 1.0) * 1.0; 
    angleVar = ((2*rand-1) * a * Math.PI); 
    theta = ptheta + angleVar; 
    px = x; 
    py = y; 
    r = rand//Math.random() * (10.0 - 1.0) * 1.0; 
    x = (px + r * Math.cos(ptheta)); 
    y = (py + r * Math.sin(ptheta)); 
    ptheta = theta; 

    //draw 
    ctx.lineWidth = 3 //make this random 
    ctx.beginPath() 
    ctx.moveTo(this.px, this.py) 
    ctx.strokeStyle = this.color 
    ctx.lineTo(this.x, this.y) 
    ctx.lineCap = "round" 
    ctx.stroke() 
}

그것은 코드처럼 보이는 : 여기

내 코드의 조각이다. 실제로 무작위로 생성 된 선을 생성하지만 두 가지 문제가 발생합니다.

생성 된 선이 너무 작습니다. 알고리즘을 조금만 변경하면 라인이 너무 커지게됩니다. 나는 이것이 왜 일어나는 지에 관해서는 이해할 수 없다.
라인이 제공된 링크에 명시된 규칙을 따르는 것만 큼 정확한 것 같지 않습니다. 제공된 링크의 허용 된 대답으로 인해 피해야한다고 지시하는 방향으로 인해 여전히 불만이있는 것으로 보입니다.

나는 아래의 코드와 위에 제공된 예제를 사용하여 html 캔버스와 드로잉 스트로크를 사용하여이 작업을 수행하려고합니다.

도움이 될 것입니다.

편집 : Here's a link to a codepen example

출처

2017-11-19 Cristian C.

문제의 해결 방법에 대한 링크를 추가 할 수 있습니까? jsbin 또는 codepen과 같습니다. 줄이 너무 작 으면 길거나 짧음을 의미합니까? –

codepen 프로젝트에 대한 링크가 추가되었습니다. 선의 두께는 쉽게 편집 할 수 있습니다. 알고리즘을 기반으로하는 선의 길이는 내 머리를 감쌀 수 없습니다. 줄이 너무 짧다고 말하고 싶습니다. 또는 선의 최대 길이가 너무 짧습니다. –

이 라인 : ' 랜드 = 인 Math.random() * (10.0 - 1.0) * 1.0 '는 상기와 동일하다 :;' 인 Math.random 랜드 '= 인 Math.random() * 9()는 0-1 사이의 값을 반환합니다. 즉, rand는 0과 9 사이의 값이됩니다. 더 큰 단계를 수행하려면 9보다 큰 숫자를 곱하면됩니다. –

펜의 I created a fork이와 만든 일부 수정 : 당신이 너무 날카로운 회전을한다 생각하기 때문에

, 새로운 각도를 설정하는 데 사용됩니다 랜드에 대해 하나 개의 임의의 값을 가지고 rand = Math.random();을 사용하면 0-9 대신 0-1의 값을 갖습니다.
스텝 길이를 제어하는 데 사용되는 r에 대해 별도의 임의 값을 갖습니다. 예 : r = Math.random() * 20;
원할 경우 시작 지점을 화면 중앙에 배치하십시오.

var x = window.innerWidth/2; var y = window.innerHeight/2;

출처

2017-11-20 19:39:11

무작위로 생성 된 부드러운 선 만들기

답변

관련 문제