Codesphere 및 p5.JS를 사용하여 Javascript에서 카오스 이론 시각화

A mathematical topic that has always fascinated me is Chaos Theory. At a foundational level, Chaos Theory states that even the most random of systems have underlying laws and patterns that can create ordered outcomes. In other words, order can be born out of chaos.

카오스 이론을 엿볼 수 있는 재미있는 게임은 종종 카오스 게임으로 알려진 것입니다. 이 기사에서는 Chaos Game이 어떻게 플레이되는지 설명하고 p5.js 및 Codesphere를 사용하여 Javascript에서 상당히 쉽게 시뮬레이션하는 방법을 보여줍니다.

프로젝트를 미리 보려면 온라인 개발 및 배포 도구인 Codesphere에서 실행할 수 있습니다.

https://codesphere.com/ide/menu/apps/new


이전에 Codesphere를 사용한 적이 없다면 무료 계정을 만들어야 합니다. Codesphere 환경이 생성되면 다음을 실행하여 앱을 배포할 수 있습니다.
npm ci && node server.js
Codesphere에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

https://www.codesphere.com

혼돈의 게임

카오스 게임은 삼각형의 세 모서리와 삼각형의 중심에 있는 점을 그리는 것으로 시작됩니다. 모서리 A, B 및 C에 레이블을 지정합니다.



이제 모서리 중 하나를 무작위로 선택합니다. A를 선택하고 중앙과 A 사이 중간에 추가 점을 그립니다.



이제 프로세스를 다시 반복하여 임의의 모서리(이 경우 C)를 선택하고 C와 가장 최근 점 사이의 중간에 점을 그립니다.



카오스 게임은 이 과정을 계속해서 반복하면 어떻게 되는지에 관심이 있습니다. 전체 삼각형이 채워질까요? 포인트가 가장자리에 집중됩니까? 무작위로 모서리를 선택하기 때문에 패턴이 전혀 없을까요?

시에르핀스키 삼각형이라는 패턴이 나타납니다.



이 프랙탈보다 훨씬 더 흥미로운 것은 시에르핀스키 삼각형이 파스칼의 삼각형(홀수를 모두 채울 때)과 같은 수학의 다른 위치에서 발생한다는 사실입니다.

환경 설정

시작하자! Codesphere를 사용하는 경우 빈 프로젝트를 만듭니다. 그렇지 않은 경우 빈 디렉터리를 만듭니다.
다음으로 npm을 초기화합니다.
npm init
두 개의 파일을 생성할 것입니다. Express 서버를 실행하기 위한 server.js와 웹 페이지를 위한 index.html 파일입니다.
touch server.js index.html
마지막으로 웹 서버 생성을 위한 NodeJS 프레임워크인 ExpressJS를 설치합니다.
npm i express

HTML 페이지 제공

이 프로젝트에서는 Express를 사용하여 관련 코드를 포함할 html 페이지를 제공할 것입니다. 이를 위해 server.js 파일에 다음 코드를 작성합니다.

포트 3000에서 서버를 실행하려면 다음을 실행하면 됩니다.

node server.js

하지만 아직 index.html 파일에 아무 것도 넣지 않았으므로 빈 화면만 표시됩니다.

삼각형을 그래프로 나타내기

다음 단계는 필요한 그래픽 표시를 시작하는 것입니다. 포인트를 표시하기 위해 사용하기 쉬운 자바스크립트 그래픽 라이브러리인 p5.JS를 사용할 것입니다.

https://p5js.org/

다음과 같이 매우 긴 CDN으로 p5js에 액세스할 수 있습니다.

또한 사용자가 게임을 플레이하려는 반복 횟수를 입력할 수 있는 텍스트 필드를 생성할 예정이며 p5.js를 사용하여 만들 수도 있습니다.

코드를 배포하면 다음이 표시됩니다.

그리고 당신은 그것을 가지고 있습니다! 약 50줄의 코드만으로 카오스 게임을 시뮬레이션하고 놀라운 프랙탈을 생성할 수 있습니다!

다음 단계

이제 카오스 게임을 좀 더 가지고 놀고 싶다면 다음 변형 중 일부를 권장합니다.

• 시작점을 변경하면 어떻게 됩니까? 모퉁이 중 하나에서 시작하면 어떻게 됩니까? 삼각형 밖에서 시작한다면?
• 삼각형의 모서리를 변경하면 어떻게 됩니까? 직각삼각형이라면?
• 이 게임은 피라미드가 있는 3D로 플레이할 수 있습니까?