무작위 2D 오목면 폴리곤 가로 만들기

Question

JavaScript에서 간단한 달 착륙자 복제본 (http://www.isogenicengine.com/demos/1.1.0/lander/)을 작성 중이며 고저가있는 기본 가로보기 대신에 무작위 동굴 모양의 알고리즘을 생성하고 싶습니다 공백 [0, 0, 1920, 1200]으로 작업 할 직사각형 영역이 주어지면 알고리즘은 아래 이미지와 같은 것을 생성 할 수 있어야합니다. 이상적으로 동굴 지역의 어떤 "입구"도 착륙장이 "내부"로 들어갈 수 있도록 폭을 설정해야합니다.

나는 이것이 가능하지 않을 수도 있음을 내가 대신 위의 같은 이미지의 무리를 그리고 거친 폴리곤 데이터로 픽셀 데이터를 변환, 그러나에 방법 쿨러 될 수있을 것으로 예상했습니다 무작위로 레벨을 생성했습니다!

슈퍼 하드 코어 보너스 포인트의 경우 동굴 모양의 구조가 몇 개나 있는지 지정할 수있는 기능이 훨씬 우수합니다.

알고리즘의 출력은 점의 배열이 될 것이고, 각 점은 현재 점과 다음 점 사이에 선을 순차적으로 그릴 때 x 및 y 속성 {x : val, y : val} 다각형을 구성합니다.

다른 사람이 비슷한 도움이되는 비슷한 JavaScript 구현을 사용하고 있다면!

Answer 1

버블 다이어그램이 아키텍처에서 사용되는 것과 동일합니다. 이것은 공간의 토폴로지 다이어그램입니다. 공간을 나타내는 거품과 통로를 나타내는 선이 있습니다. 나는 하나의 위대한 웹 페이지를 빨리 찾지는 못했지만 이미지 검색을하면 많은 예제를 얻을 수 있습니다.

거품 다이어그램은 버블이 정점 인 그래프로 볼 수 있습니다. 귀하의 예제에서 꼭대기를 포함하는 얼룩 (blob)을 정점으로 모델링하십시오. 동굴은 다른 정점이고 입구는 가장자리입니다. 이 관점에서 원하는만큼 동굴과 같은 복잡성을 쉽게 생성 할 수 있습니다.

다음 트릭은 기하학으로 바꾸고 있습니다. 본질적으로 그래프의 골격을 밀어 내고 플레이어가 탐색 할 수있는 보이드를 만들고 싶습니다. 동시에,이 보이드이 너무 멀리 밖으로 밀려 나오지 않도록하고 벽을 없애거나 없애기를 원합니다. 따라서 솔리드 영역을 모델링해야합니다.이 작업은 dual graph으로 완료됩니다. 이중 그래프는 원래의 "밑"으로갑니다. 즉, 횡단면이 충돌을 나타내므로 솔리드에 비해 무효가됩니다.

요약 : (1) 원하는 기능으로 토폴로지 그래프를 만드십시오. (2) 각 정점에 위치를 지정하고 각 모서리에 대한 경로를 지정하여 그래프의 지오메트리를 생성합니다. (3) 이중 그래프를 구성하고 그 지오메트리를 지정합니다. (4) 각 그래프와 관련된 공간을 바깥쪽으로 확대하여 막음보다 통로를 선호하여 갈등을 해결합니다.

벽의 한 손으로 미로를 걷는 것처럼 그래프의 반 가장자리를 가로 지르면 최종 지오메트리의 경계 목록을 생성 할 수 있습니다.

Answer 2

마칭 스퀘어 (Maying Squares)를 사용하면 스칼라 값 (아마 Perlin 또는 Simplex Noise에서 얻음)의 2D 필드를 가장자리 선 세트로 변환 할 수 있습니다. 물론, 어떻게 보일지는 2D 필드 스칼라 값 (Perlin 또는 Simplex Noise를 조작하는 방법)을 정확히 얻는 방법에 달려 있습니다.

This은 세부 정보를 잘 살펴볼 수있는 최고의 사이트입니다.(Marching Cubes, 3D 쌍둥이로 잘 설명되어 있지 않습니다.)

사실 Wiki 페이지가 꽤 좋습니다.