프로그램 생성은 수동으로 데이터를 생성하는 것이 아니라 동적으로 데이터를 생성하는 방법으로 우리로 하여금 무한해 보이는 세계를 만들 수 있게 한다.너는 암흑파괴신 같은 게임에서 프로그램 생성을 본 적이 있을 것이다. 네가 들어간 모든 지하 감옥은 이전과 다르다. 괴물과 물품은 프로그램 생성을 통해 계산된 것이다.《무인의 하늘》은 프로그램이 생성한 또 다른 훌륭한 예로 모든 행성, 생물, 비행선은 프로그램에 따라 만들어진 것이다. 게임은 매우 간단하다. 끊임없이 약 18개의 500만 개의 행성이 탐색을 필요로 한다.

무한한 우주를 창조하다

이 블로그에서 우리는 탐색 프로그램을 생성하고 자신을 위해 작은 우주를 만들어 탐색할 것이다.

저희가 인코딩을 해볼게요.

제 예시에서 저는 p5js Editor을 사용할 것입니다. 따라서 언제든지 곤경에 빠지면 제가 제공할 수 있습니다link to the code.이 실현은 p5js 프레임워크가 필요하지 않습니다. 왜냐하면 이api를 거의 사용하지 않기 때문입니다. 그러나 편의를 위해 사용할 것입니다.p5js에 대한 더 많은 정보를 알고 싶으면 제introductory blog to p5js를 보십시오.
다음 부트 코드는 빈 우주를 제공합니다.

function setup() {
  createCanvas(1280, 720);
}

function draw() {
  background(0);
}

이렇게 해야 한다:

위조 임의성

Pseudorandomness는 우리가 만들 우주의 주간이다. 본질적으로 씨앗이라고 불리는 값을 제공할 수 있고 씨앗이 같으면 항상 같은 랜덤수를 되돌려준다.무작위 값을 감안하면, 우리는 그것으로 우리의 우주를 생성하거나, 적어도 우주의 일부분을 생성할 수 있다.자바스크립트에서 random () 함수에 피드를 제공할 수 없습니다. 따라서 라이브러리를 가져와서 index.html 에 다음 내용을 추가해야 합니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js">
</script> 

따라서 다음 목표에 피드를 제공할 때:

let rng = new Math.seedrandom(`i am a seed`);
console.log(rng()) // 0.9143626543607534

항상 동일한 값을 제공하며 후속 호출 시 다음과 같은 새로운 임의 값이 생성됩니다.

  let rng = new Math.seedrandom(`i am a seed`);
  console.log(rng()) // 0.9143626543607534
  console.log(rng()) // 0.24035517260087458
  console.log(rng()) // 0.8950846823124523

우리는 그것을 이용하여 우주의 일부 속성을 확정할 수 있다.우주는 많은 성계로 구성되어 있으며, 우리로 하여금 성계류를 창건하게 한다.

은하계

다음 내용을 색인에 추가합니다.html

<script src="Galaxy.js"></script>

갤럭시라는 새 파일을 만듭니다.js.

class Galaxy {
  constructor(x, y) {
    this.rng = new Math.seedrandom(`${x} ${y}`);
    this.numberOfPlanets = Math.floor(this.rng() * 8);
  }
}

갤럭시류의 구조 함수가 x와 y값을 어떻게 얻는지 주의하십시오. 이것은 우리의 피드입니다.그리고 내가 어떻게 생성기를 사용하여 우리 성계에 얼마나 많은 행성이 있는지 확인하는지 주의해 주십시오. 그래서 이 장면에서 우리 성계는 최대 7개의 행성이 있을 수 있습니다. 나는 작은 성계라는 것을 알고 있습니다😉 태양계라고 할 만하다.
우리의 초도에서 우리가 우주에 있는 위치의 x와 y값을 통해 은하계 물체를 만듭니다.js.

let x = 0; // our starting position
let y = 0;

let galaxy; 
function setup() {
  createCanvas(1280, 720);
  galaxy = new Galaxy(x, y);
}

function draw() {
  background(0);
}

몇몇 행성을 창조하다

행성을 만듭니다. rng () 를 사용하여 행성의 속성에 피드 랜덤 값을 생성합니다.나는 이미 이 때문에 목표를 하나 설정했다.속성, 두 가지 새로운 방법createPlanets()와 draw()가 추가되었습니다.

class Galaxy {
  constructor(x, y) {
    this.rng = new Math.seedrandom(`${x} ${y}`);
    this.numberOfPlanets = Math.floor(this.rng() * 8); // max 8 planets 
    this.planets = this.createPlanets();
  }

  createPlanets() {
    let planets = [];
    for (let i = 0; i < this.numberOfPlanets; i++) {
      let x = this.rng() * width;  // anywhere within the width of the screen
      let y = this.rng() * height; // anywhere within the height of the screen
      let r = this.rng() * 300;    // some arbitrary radius
      planets.push({x,y,r});
    }
    return planets;
  }

  draw() {
    for (let planet of this.planets) {
      ellipse(planet.x, planet.y, planet.r, planet.r);
    }
  }
}

우리는 초도에 추첨에 참가합시다.js

let x = 0; // our starting position
let y = 0;

let galaxy; 
function setup() {
  createCanvas(1280, 720);
  galaxy = new Galaxy(x, y);
}

function draw() {
  background(0);
  galaxy.draw(); // add this
}

이것이 바로 우리의 첫 번째 성계이다

은하계에서 내비게이션을 할 수 있도록 코드를 추가합니다. 그래서 이 설정에서 화살표 키로 이동하기만 하면 됩니다. 그래서 오른쪽 키를 누르면 오른쪽 은하계로 이동하고 위로 버튼을 누르면 위의 은하계로 이동합니다. 등등.

let x = 0; // our starting position
let y = 0;

let galaxy; 
function setup() {
  createCanvas(1280, 720);
  setupGalaxy();
}

function draw() {
  background(0);
  galaxy.draw();
}

function keyPressed() {
  if (keyCode == UP_ARROW) {
    y += height;
  } else if (keyCode == DOWN_ARROW) {
    y -= height;
  } else if (keyCode == LEFT_ARROW) {
    x -= width;
  } else if (keyCode == RIGHT_ARROW) {
    x += width;
  }

  setupGalaxy();
}

function setupGalaxy() {
    galaxy = new Galaxy(x, y);
}

이제 오른쪽 화살표 키를 누르면 다음 성계를 볼 수 있습니다.

왼쪽 화살표 키를 누르면 우리의 첫 번째 성계를 볼 수 있습니다.

일을 좋게 할 때가 됐어요.

이 물건을 우주처럼 보일 수 있도록 자산을 추가하자.

당신은 p5js sketch에서 자산을 얻을 수 있습니다.
이미지를 불러오고'자산'이라는 그룹을 설정합니다. 새로 만들 때 갤럭시 대상에 전달합니다!

let assets = [];
function preload() {
  for (let i = 1; i <= 20; i++) {
    assets.push(loadImage(`assets/${i}.png`))
  }
  console.log(assets);
}
... 
function setupGalaxy() {
    galaxy = new Galaxy(x, y, assets); // add assets as a constructor argument
}

갤럭시 클래스에서는 자산을 속성으로 설정한 다음 행성 개체를 만들 때 어떤 종류의 행성-어떤 자산을 선택할지 결정하는 새로운 유형 변수를 도입합니다.

class Galaxy {
  constructor(x, y, assets) {
    this.assets = assets;
    this.rng = new Math.seedrandom(`${x} ${y}`);
    this.numberOfPlanets = Math.floor(this.rng() * 8); // max 8 planets 
    this.planets = this.createPlanets();
  }

  createPlanets() {
    let planets = [];
    for (let i = 0; i < this.numberOfPlanets; i++) {
      let x = this.rng() * width;  // anywhere within the width of the screen
      let y = this.rng() * height; // anywhere within the height of the screen
      let r = this.rng() * 300;    // some arbitrary radius
      let type = Math.floor(this.rng() * 20);
      console.log(type);
      planets.push({x,y,r,type});
    }
    return planets;
  }

  draw() {
    for (let planet of this.planets) {
      image(this.assets[planet.type], planet.x, planet.y, planet.r, planet.r);
    }
  }
}

엉엉!이제 우리는 프로그램이 생성한 우주가 생겼다!

결론

나는 너희들이 이 세대 프로그램의 소개를 좋아하길 바란다. 나는 당연히 그것을 이해하는 것을 좋아한다.나는 이것이 너희들에게 더욱 깊이 탐색하는 동력을 주었고 프로그램 생성의 잠재력을 인식해 주기를 바란다.우리 우주에서 우리가 할 수 있는 것은 아직 매우 많다. 여기에 몇 가지 생각이 있다. 나는 너희들이 무엇을 생각해 낼 수 있는지 매우 보고 싶다!

우주가 우주선으로 항해할 수 있도록 하기 때문에 한 번에 한 개의 성계를 이동하지 않고 그것들을 하나의 성계로 합쳐 보일 수 있다.너는 이곳의 생각을 이용해서 이 점을 해낼 수 있다!

사람을 흥분시키는 행성을 더 많이 소개합니다. 심지어 항성일 수도 있습니다!

행성에 무작위로 피드 이름을 설정하고 클릭 가능

운동을 늘리고 심지어 중력

일 수도 있다.
고맙습니다. 만약 당신이 나의 끝없는 것을 좋아한다면, 나의 개인 블로그 사이트를 방문하십시오. https://codeheir.com/