[카테고리:] 미분류

웹 UI 라이브러리인 GWC에서 제공하는 ValueRangesColorMatcher 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#matcher {
    width: 30em;
    height: 15em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const data = [ 165, 120, 160, 200, 135, 115, 100, 125, 135, 190, 156, 130 ]
    const rangeColors = [
        { ranges: [100, 120], color: '#00ff00'},
        { ranges: [120, 141], color: '#88ff00'},
        { ranges: [141, 160], color: '#ffff00'},
        { ranges: [160, 180], color: '#ff8800'},
        { ranges: [180, 200], color: '#ff0000'}
    ]

    matcher.defineData(data, rangeColors)

    document.querySelector(".btn-get").addEventListener("click", () => {
        alert(JSON.stringify(matcher.valueRangeColors, null, 4))
    })

    GeoServiceWebComponentManager.instance.update();
};

실행 결과는 다음과 같습니다.

소수점을 설정할 수 있으며 속성은 toFixed 입니다.

무작위 값을 얻기 위한 흔한 방법은 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)
  }
}

...

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

작년에 3D 인터렉티브 웹 개발에 대한 내용으로 한국메타버스산업협회를 통해 교육을 진행했고, 올해도 교육을 진행합니다. 작년에는 바닐라 JS로 three.js 라이브러리를 살펴보았다면, 이번에는 React로 three.js를, 정확히는 React three fiber 라이브러리(R3F)를 살펴보는 내용으로 구성됩니다. R3F는 더 적은 코드로 더 높은 품질의 3D 웹 페이지를 개발할 수 있습니다. 교육기간의 경우 작년에는 3일간이였지만 이번에는 4일간의 교육으로 진행하며, 마지막 날에 실습을 통해 만들 코드 결과는 다음과 같습니다.

교육에 대한 참여 신청은 아래의 교육 소개 이미지를 클릭하시면 됩니다.

웹브라우저의 기능 중 Ctrl + Plus나 Ctrl + Minus를 누르면 화면이 커지거나 작아집니다. 즉 화면의 확대, 축소 기능인데요. 이 Zoom 값을 얻는 JS 코드입니다.

const zoom = (window.outerWidth / window.innerWidth);

위의 zoom 값은 비율이고 % 값을 원한다면 100을 곱해주면 됩니다. 마우스로 어떤 UI를 드래그 해서 이동 시킬때 꼭 반영해 줘야 할 Zoom 값입니다.