JavaScript 잡음 기능 문제

나는 잡음을 생성하는 방법을 배우려고 노력해 왔으며 대부분은 이해하고 있지만 스크립트에는 약간의 문제가 있습니다.JavaScript 잡음 기능 문제

this page을 가이드로 사용하여 캔버스에 약간의 노이즈를 생성하는 궁극적 인 목적으로 this script in JavaScript을 작성했습니다.

확실히 뭔가를 만들어 내고 있지만, 왼쪽 끝까지 밀어 넣었습니다. 또한 페이지를 새로 고치는 것은 동일한 패턴을 반복해서 만드는 것처럼 보입니다.

이미지의 "시끄러운"부분이 왼쪽에서 잘리는 것은 무엇을 잘못 했습니까? 흐린 펄린 노이즈처럼 보이게하려면 어떻게해야합니까?
매번 새로운 패턴을 생성하지 않는 이유를 정말로 이해하지 못합니다. 스크립트가 실행될 때마다 임의 패턴을 수신하려면 무엇을 변경해야합니까?

도움 주셔서 감사합니다.

/* NOISE—Tie it all together 
*/ 
function perlin2d(x,y){ 
    var total = 0; 

    var p = persistence; 
    var n = octaves - 1; 

    for(var i = 0; i <= n; i++) { 
     var frequency = Math.pow(2, i); 
     var amplitude = Math.pow(p, i); 

     total = total + interpolatenoise(x * frequency, y * frequency) * amplitude; 
    } 
    return total; 
}

출처

2012-11-27 Vecta

코드에서 임의의 숫자와 같이 알고리즘의 입력을 변경하는 위치가 표시되지 않습니다. 귀하의 알고리즘은 결정 론적입니다. 즉, 동일한 입력이 주어지면 항상 일관된 결과를 제공합니다. 당신의 소음의 "smushy"부분에 대해 확실하지 않습니다. – Matt

은 Matt에 동의합니다. 지속성이 정의되는 곳과 옥타브. 항상 같으면 항상 동일한 결과를 반환합니다. – nycynik

나는 당신의 바이올린 포크와 그것을 작동하게하는 몇 가지 고정했습니다 항상 X의 충분히 큰 값 1을 반환 된, http://jsfiddle.net/KkDVr/2/

주요 문제는 결함이 의사 난수 생성기 "노이즈"였다을 및 y. 나는 정수 좌표 쿼리 임의의 값을 테이블로 대체했습니다

var values = []; 
for(var i = 0; i < height; i++) { 
    values[i] = []; 
    for(var j = 0; j < width; j++) { 
     values[i][j] = Math.random() * 2 - 1; 
    } 
} 
function noise(x, y) { 
    x = parseInt(Math.min(width - 1, Math.max(0, x))); 
    y = parseInt(Math.min(height - 1, Math.max(0, y))); 
    return values[x][y]; 
}

그러나 다음 튜토리얼에서 제공되는 구현은 정말 제대로 최적화 된 단순화 된 알고리즘을 사용합니다. http://scratchapixel.com/lessons/3d-advanced-lessons/noise-part-1에서 우수한 실제 세계 소음 튜토리얼을 제안 해드립니다.

마지막으로, 내 프로젝트에 관심이 있으 셨을 수도 있습니다 : http://lencinhaus.github.com/canvas-noise. html5 캔버스에 perlin 노이즈를 렌더링하고 거의 모든 매개 변수를 시각적으로 조정할 수있는 자바 스크립트 앱입니다. Ken Perlin의 원래 노이즈 알고리즘 구현을 자바 스크립트로 이식 했으므로 유용 할 것입니다. 소스 코드는 https://github.com/lencinhaus/canvas-noise/tree/gh-pages에서 찾을 수 있습니다.

도움이 되길 바랍니다, 안녕!

출처

2013-02-26 17:47:32 lencinhaus

JavaScript 잡음 기능 문제

답변

관련 문제