When I first played Minecraft back in Sept. 2010 (I have an old receipt for €9.95!), I was blown away. The idea of generating a new world everytime you start a game. Every time you start a new adventure it’s a completely fresh experience. This is when “roguelike” games started to take over my life. Binding of Isaac, FTL to Rogue Legacy. I was all in.

I had some experience with Math.random() before. Back in the flash days I was creating small games for Ads that used to litter webpages. From having to throw a football inside a target for DrPepper or balancing a container of apple sauce for Motts. This was pure joy for me to make. I loved the idea of code making things move without manually adding keyframes to a timeline. It felt badass. I remember one of the Ads had a rock band and we needed to have the crowd move in a convincing manner. Except there was like 100s of people in the crowd. I had to do it in code! So I started having each character move up and down using basic random(). I showed my finished prototype to the team but everyone stated something didn’t look right.

How can I make this better? Can I just add layers of random on top of random? Of course I researched and stumbled upon the biggest game changer in my life: Perlin noise.

This led me into so many rabbit holes. The art of code seemed like a real thing. I was starting to look at the world completely differently. A̴̺͓̐͛r̷̝̍͝e̸̛̻ ̶̲͚̄́ẅ̵̼́ę̷̗̿́ ̶͈̜̈́̒ḯ̸̞̔n̷͎͠͝ ̵̢̘̿̿ä̵̝́͗ ̸̧͐s̴̮͗̅i̶̡̒͗m̸̭͘ͅu̴̲̇͝l̸͕̺͂a̶͓̤̋͑ẗ̴͓́͘ì̷̞o̶̼̫͌̆n̸̺͝?̶͈́ We may never know but what I do know is how cool is it to have an experience unlike anybody else? This is what I think about a lot for the user experience.

In the intro of my website, the shards are generated randomly. Check that out the prototype here. Each polygon generated from drawing a circle with a radius but with only 3 or 4 points. Pretty simple and glass shard like.

for (let i = 0; i < numPoints; i++) {
  const angle = 2 * Math.PI * (i / numPoints);
  const radius = 0.5 + Math.random() * 0.25;
  const x = Math.cos(angle) * radius;
  const y = Math.sin(angle) * radius;
  points.push(new THREE.Vector2(x, y));
}

I then extrude everything out and apply random rotations. The stars are my first time writing shaders. This was heavily inspired by the starfield screensaver the blew my mind for windows 3.1

So start thinking more random. You never know where it’ll take you!