P5의 유장 및 노이즈 알고리즘회사 명

잡음 알고리즘

얼마 전에 나는 소음 알고리즘이 어떻게 서로 다른 프로그램 내용 생성 기술에 사용되는지 토론했다.이것은 나로 하여금 P5.js에서 이 기술을 사용할 수 있는 자원을 찾게 했다.프로그램 내용 생성에서 곳곳에서 소음 알고리즘을 사용하지만, n차원에서의 위조 무작위 값 분포에서 선택할 때 필요할 수 있는 모든 종류의 삽입값에도 유용하다.

유장

View Code
위의 예시에서 나는 3차원 베를린 소음을 이용하여 각종 특징을 가시화하여 필요한 분류 효과를 얻었다.여기에는 다음이 포함됩니다.

빨간색, 파란색, 녹색 3D 노이즈 색상장

메쉬 단위당 각도 벡터

각도별 벡터 폭

새로운 연속 입자의 소음 도입

낡은 알갱이의 소음 제거

모든 입자는 속도, 가속도, 위치와 최대 속도를 가진 점의 시뮬레이션에 불과하고 위치 인덱스에 각 벡터를 힘으로 응용하여 벡터장을 사용하여 방향을 따른다.격자에 모든 벡터를 표시함으로써 유장이 시간에 따라 어떻게 방향을 바꾸는지 볼 수 있다.

View Code
내가 양음폭 벡터의 조합을 어떻게 사용하는지 주의해라.폭값 자체는 -5에서 5 사이의 값에 비추는 3차원 소음값으로 계산된다.양수 또는 음수 값으로 변경할 수 있으며 흐름은 주로 한 방향으로 이동합니다.
처리 순환은 줄과 열에서 이동(격자 단위의 크기를 따라 계산)하고 내가 관심 있는 각 특징에 대해 소음 값을 생성하며 각 차원에서 서로 다른 편이를 사용한다.각 노이즈 피쳐는 0과 1 사이의 값을 생성합니다(적어도 P5에서, 다른 라이브러리에서는 -1과 1 사이).해당 값을 지정된 피쳐의 축척에 곱합니다.우리가 2_PI를 곱한 각도의 경우 색상 값의 경우 축척은 255입니다...등등. 대부분의 특징은 x와 y 격자를 따라 교체하여 보다 전역적인 z 오프셋을 시간 인자로 사용하고 3D 소음도에서 특정한 오프셋을 사용한다.X 및 Y 오프셋은 스텝 길이가 증가함에 따라 노이즈 함수를 따라 이동하며 Z는 시간에 따라 드로잉 사이클을 호출할 때마다 증가합니다.나는 하나의 단독 증가 항목에서 증가 폭의 편이량을 증가시켰다. 이 항목은 반드시 같은 z 편이량과 관련이 있는 것은 아니지만, 그것은 시간과 보폭에 따라 작용한다.

var stepSizes = {
    x: 0.1,
    y: 0.1
    z: 0.005,
    m: 0.0005
};
var incStart = 0.005;
var cellSize = 10;
var zoff = 0;
var magOff = 0;
var rows, cols;
var features = {
    r: { scale: 255 },
    g: { scale: 255, offset: 100 },
    b: { scale: 255, offset: 200 },
    angle: { scale: TWO_PI },
    m: { scale: 1 }
};

var numParticles = 1000;
var particles = [];
var flowfield, flowcolorfield;

function setup() {
    createCanvas(800, 350);
    pixelDensity(1);

    cols = floor(width / cellSize);
    rows = floow(height / cellSize);
    flowfield = new Array(rows * cols);
    flowcolorfield = new Array(rows * cols);
    particles = new Array(numParticles);
    for (let i = 0; i < particles.length; i++) {
        particles[i] = new Particle();
    }

    background(0);
}

function calcNoise(k, xoff, yoff, zoff) {
    let f = features[k];
    f.offset = f.offset || 0;
    let n = noise(xoff + f.offset, yoff + f.offset, zoff);
    let amplitude = f.scale || f.amplitude || 1;
    return n * amplitude;
}

function draw() {
    // layering to gradually fade out
    background(color(0, 0, 0, 5));

    // loop over grid to calculate noise
    let yoff = 0;
    for (let y = 0; y < rows; y++) {
        let xoff = 0;
        for (let x = 0; x < cols; x++) {
            let r = calcNoise('r', xoff, yoff, zoff);
            let g = calcNoise('g', xoff, yoff, zoff);
            let b = calcNoise('b', xoff, yoff, zoff);
            let angle = calcNoise('angle', xoff, yoff, zoff);
            let v = p5.Vector.fromAngle(angle);
            let m = map(calcNoise('m', xoff, yoff, magOff), 0, 1, -5, 5);
            v.setMag(m);

            xoff += stepSizes.x;

            let index = x + y * cols;
            flowfield[index] = v;
            flowcolorfield[index] = [r,g,b];
        }
        yoff += stepSizes.y;
    }
    magOff += stepSizes.m;
    zoff += stepSizes.z;

    for (let i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield, flowcolorfield);
        particles[i].update();
        particles[i].edges();
        particles[i].show();
    }
}

특정한 소음 순환에서 모든 소음 특징을 설정하기 위해 이 특정한 실현을 재구성할 수 있다.소음 회로가 특히 재미있다.잡음 함수의 동일한 편이부터 같은 값을 생성하면 완벽한 순환을 만들 수 있습니다.

노이즈 회로

View Code
위의 예에서 나는 소음 순환의 개념을 사용했고 두 개의π에서 주어진 편이량을 통과했다.실제로 내가 점차적으로 같은 값으로 돌아오기만 하면 나는 임의의 값 집합을 선택할 수 있다.하나의 원은 이 점을 실현하기 쉽게 한다.어떤 기능이든 소음 순환이 될 수 있다. 이것은 거의 내가 위치, 색깔, 크기, 알파에 대한 것이다.

function noiseLoop(diameter, min, max, rnd) {
  let cx = random(rnd || 1000);
  let cy = random(rnd || 1000);
  return function (angle) {
    let xoff = map(cos(angle), -1, 1, cx, cx + diameter);
    let yoff = map(sin(angle), -1, 1, cy, cy + diameter);
    let zoff = sin(angle) * 0.001;
    let r = noise(xoff, yoff, zoff);
    return map(r, 0, 1, min, max);
  };
}

function Particle() {
  this.xn = noiseLoop(0.05, -width, width * 2);
  this.yn = noiseLoop(0.05, -height, height * 2);
  this.rn = noiseLoop(0.5, 0, 255);
  this.gn = noiseLoop(0.5, 0, 255);
  this.bn = noiseLoop(0.5, 0, 255);
  this.dn = noiseLoop(0.5, 1, 10);
  this.an = noiseLoop(1, 5, 200);

  this.render = function (a) {
    noStroke();
    fill(this.rn(a), this.gn(a), this.bn(a), this.an(a));
    circle(this.xn(a), this.yn(a), this.dn(a));
  };
}

var particles = new Array(200);
var totalFrames = 240;
var counter = 0;

function setup() {
  createCanvas(800, 350);
  for (let i = 0; i < particles.length; i++) {
    particles[i] = new Particle();
  }
}

function draw() {
  background(0);
  percent = (counter % totalFrames) / totalFrames;
  let a = percent * TWO_PI;
  for (let i = 0; i < particles.length; i++) {
    particles[i].render(a);
  }
  counter++;
}

지형 생성

3차원 시간을 소음 함수로 사용하는 2차원 가시화에 따라 3차원 소음은 지형 생성 알고리즘에서 광범위하게 사용된다.실제적인 시뮬레이션을 만들지 않고 더 유기적인 것을 필요로 할 때 이것은 기본적인 개념이 된다.아래의 예시에서 나는 z편이를 시간 인자로 변조했다. (내가 앞의 예시에서 한 것과 같다.) 갑자기 지형은 물의 애니메이션과 같다.

단순형 잡음

후속 작업으로perlin noise in processingP5.js의 실현은 Ken perlin이 발명한 원시 1983 버전과 같은 알고리즘을 사용한 것을 발견했다.이런 실현은 뚜렷한 방향의 위영을 가지고 있는데 나중에 2001년에 베를린 소음 알고리즘을 개선하여 이러한 위영을 해결했다.Ken Perlin은 또 다른 단순형이라고 불리는 알고리즘을 만들어 일을 더욱 매끄럽고 빠르게 하는 데 도움을 주었다.불행하게도 그는 이 알고리즘을 위해 특허를 신청했다.다행히도 특허 규칙에 속하는 특정 변체를 삭제하기 위해 알고리즘의 일부를 확장한 개원 실현이 있었다.단공은 다음과 같은 장점을 가지고 있다(예: Wiki

계산 복잡도 감소, 곱셈기 감소

O(n*n)가 아닌 더 적은 계산 비용으로 O(n*2^n)를 더 높은 차원으로 확장

뚜렷한 방향 위영이 없음

정의가 양호하고 곳곳에 연속적인 사다리, 저렴한 계산 가능

하드웨어 구현 용이

나는opensimplex의 실현에 사용되는 많은 것을 발견했다.나는javascript의simplex버전을 사용하여 웨이브 쇼에서 고전적인 베를린 소음과 아래의simplex에서 본 차이를 보여 준다.

View Code
단순형 버전은 뚜렷하고 매끄러우며 이전 예시에서 베를린 소음을 사용했을 때와 같은 방향의 위영이 나타나지 않는다는 것을 주의하십시오.물론 이 두 프레젠테이션은 하드웨어의 가속화 하에서 모두 더욱 잘 작동할 수 있다.

결론

이 알고리즘의 실제 밑바닥 실현은 본고에서 논술한 것보다 좀 깊이 있지만 이 분야를 더욱 상세하게 탐색하고 적어도 재미있고 독특한 예술품을 만드는 기술을 접할 수 있어서 기쁩니다.나는 일부 추상들이 비록 밑바닥의 실현 세부 사항을 이해하기 어렵지만 추상은 유용한 도구이기 때문에 추상의 효용을 인식하면 각종 방식으로 그것을 응용할 수 있다는 것을 발견했다.삽입값, 매끄러움, 사다리 등 기본 개념을 이해하고 서로 다른 기하학적 도형을 처리하는 것을 습득하기만 한다면 수학 공식의 세부 사항을 반드시 알아야 하는 것은 아니다.나는 다른 유형의 소음 함수를 탐색하고 싶다. 가장 주의해야 할 것은 cellular noise이다. 왜냐하면 나는 프로그램 내용의 생성을 깊이 연구했기 때문이다.

공구서류

착색기의 책: 소음https://thebookofshaders.com/11/

베를린 소음https://en.wikipedia.org/wiki/Perlin_noise

단순형 노이즈https://en.wikipedia.org/wiki/Simplex_noise

단순형 복호화http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf

벡터장https://en.wikipedia.org/wiki/Vector_field

열차 유장 코드

만약 네가 이 문장을 좋아한다면, 나에게 관심과 사랑을 주어라.제 비슷한 내용도 봐주세요!
건배!🍻