Procedural Generation

Endless Possibilities 🎲

Have you ever noticed how every world in Minecraft is different? Or how dungeons in Hades change every time you play? That’s Procedural Generation (or ProcGen)! 🗺️

Instead of a human drawing every tree, we write rules and let the computer build the world for us. It’s like teaching a robot to be creative! Let's try it.

How Does It Work? 🤔

The simplest way to understand ProcGen is to imagine the computer has "magic boxes" full of words. It just grabs one from each box and sticks them together! You just played with a treasure generator right now.

The 'Magic Boxes' used simple lists we gave it. But what if a computer could come up with its own ideas for the lists? That's AI! Let's talk to an Imagination Machine. 🤖

🛠️ Let's Build a Loot Generator!

Now let's use a more powerful tool. An AI can mix and match ideas that are way more creative than just picking words from a list. Tell our AI Assistant what kind of game you're making, and it will procedurally generate a loot table for you!

async function getAiLoot(userPrompt) {
  const response = await fetch("https://api.tomorrowhub.ai/generate", {
    method: "POST",
    body: JSON.stringify({
      prompt: userPrompt
    })
  });
  const lootData = await response.json();
  return lootData;
}
                            

🚀 Level Up: Explore No-Code Generators

See how the AI mixed and matched ideas? You can build your OWN generator that does the exact same thing, no AI needed! The Perchance.org tool below uses the same 'magic box' idea we saw earlier. Let's try it.

// This is our recipe's name!
loot
  [adjective.titleCase] [material.titleCase] [item.titleCase]

// These are our ingredient boxes!
adjective
  flaming
  spooky
  gigantic

material
  iron
  slime
  diamond

item
  sword
  helmet
  banana

🚀 Advanced Mission: Code Your Own Generator in JavaScript

Ready to go beyond other tools? Your mission is to build the "magic boxes" generator yourself using JavaScript! Programmers build small 'helper' scripts like this all the time to quickly generate placeholder data or test ideas without needing a complex tool. It's a fundamental coding skill.

Your Mission: Below is the empty shell of a function. Copy it, fill in the blanks, and then update the button's `onclick` to call your new function: `runMyGenerator()`.

function runMyGenerator() {
  // TODO: Get the text from the 'js-box1' textarea and split it into a list
  const list1 = document.getElementById('js-box1').value.trim().split('\n');
  // TODO: Get the text from the other two boxes
  const list2 = document.getElementById('js-box2').value.trim().split('\n');
  const list3 = document.getElementById('js-box3').value.trim().split('\n');

  // TODO: Pick one random item from each list
  const word1 = list1[Math.floor(Math.random() * list1.length)];
  const word2 = list2[Math.floor(Math.random() * list2.length)];
  const word3 = list3[Math.floor(Math.random() * list3.length)];

  // TODO: Display the result in the 'js-output' paragraph
  document.getElementById('js-output').textContent = `${word1} ${word2} ${word3}`;
}
        

Your creation will appear here...

const rarityPool = [
  'Common', 'Common', 'Common', 'Common', 'Common', // 5 chances
  'Rare', 'Rare', // 2 chances
  'Epic' // 1 chance
];
const chosenRarity = rarityPool[Math.floor(Math.random() * rarityPool.length)];
// Now use chosenRarity to set the color!
            

🚀 Boss Level: Summon a Pokémon with JavaScript

You've seen how to use an API with Hoppscotch. Now let's do it with real code! Your final mission is to use the `fetch()` command to get data from the PokeAPI right here in your browser.

Open your browser's developer console (usually by pressing F12 or Right-Click → Inspect), paste this code in, and press Enter. What happens?

// Your Mission: Get the name of a Pokémon and log it to the console!
async function getPokemon(name) {
  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
  const data = await response.json();
  console.log("You summoned:", data.name);
  // Now, can you figure out how to log its primary type?
  // Hint: Look at the data object you get back in the console!
}

getPokemon('pikachu');
        

This is a direct bridge from our lesson to a fundamental, real-world web development skill. It's the perfect final challenge that lets you build something you can actually show off.