잡음(Noise) 시각화

무작위 값을 얻기 위한 흔한 방법은 random API 사용인데, 실제로 무작위 값을 얻기 위해 많이 사용하는 것은 Noise라는 개념이고 이 Noise를 얻기 위한 몇가지 알고리즘 중 특허에 대한 저작권 침해에 대한 문제가 없고 또 품질면에서 Simplex Noise가 많이 사용됩니다.

아래는 Simplex Noise에 대한 시각화에 대한 결과물로 누군가의 유튜브 채널에 올라온 영상의 내용입니다.

three.js를 이용해 시각화한 경우로 다음과 같은 라이브러리를 사용하고 있습니다.

"devDependencies": {
  "vite": "^4.3.9"
},
"dependencies": {
  "simplex-noise": "^4.0.1",
  "three": "^0.153.0",
  "three-fatline": "^0.6.1"
}

그리고 주요 코드는 다음과 같습니다.

...

const noise2D = createNoise2D()

function createLines() {
  for(let r=-20; r<20; r++) {
    const wnoise = noise2D(0, r*0.125) * 1.0
    const lineWidth = 0.25 + Math.pow(wnoise * 0.5 + 1, 2)

    const dashed = Math.random() > 0.5
    const dashScale = 1
    const dashSize = Math.pow(Math.random(), 2) * 15 + 4
    const gapSize = dashSize * (0.5 + Math.random() * 1)
    
    const material = new LineMaterial({
      color: "rgb(241, 231, 222)",
      linewidth: lineWidth,
      resolution: new Vector2(res, res),
      dashed,
      dashScale,
      dashSize,
      gapSize
    })

    const vertices = []
    for(let i=0; i<100; i++) {
      let height = 0
  
      height += noise2D(i * 0.0189 * 1, r * 0.125) * 2.0
      height += noise2D(i * 0.0189 * 2, r * 0.125) * 1.0
      height += noise2D(i * 0.0189 * 4, r * 0.125) * 0.5
      height += noise2D(i * 0.0189 * 8, r * 0.125) * 0.25
      height += noise2D(i * 0.0189 * 16, r * 0.125) * 0.125
  
      vertices.push(
        -330 + 660 * (i / 100), 
        height * 20 + r * 16, 
        0
      )
    }  

    const geometry = new LineGeometry()
    geometry.setPositions(vertices)
  
    const line = new Line2(geometry, material)
    line.computeLineDistances()
  
    scene.add(line)
  }
}

...

완전한 코드는 앞서 언급해 드린 유튜브 영상을 보시기 바랍니다.