Assignment 2: Terrain Generation with Perlin Noise

Objectives

Implement a voxel-based terrain generator (similar to Minecraft) using Perlin Noise.

Description

Noise produces a naturally ordered (“smooth”) sequence of pseudo-random numbers. It can be used to generate various effects with natural qualities, such as clouds, landscapes, and patterned textures like marble. In this assignment, you will use Perlin Noise to generate voxel-based worlds similar to Minecraft. The animation below shows an example of how the output of your assignment should look like.

Example of how a 128x32x128 world with cube size equal to 32 should look like if you use only one type of cube (grass). This example uses a very simple view frustum culling  technique (check if cube is in the line of sight) to optimize the performance. A 32x32x32 world should run smoothly without any optimization.

A voxel-based world consists of 3D grid of height h, width w and depth d, where h, w and d are integer numbers representing amount of fixed-size cubes (e.g. size 16).  

1. Create a new Processing (P5.js) sketch in a directory called "asg2" with at least three files: "index.html",  "sketch.js" and "world-generator.js".
2. Write (in "world-generator.js")  a "WorldGenerator" class with the necessary properties and methods to instantiate a voxel-based world with a given seed as well as width, height and depth representing number of unit cubes.
   • For each cell on the x-z plane of your world, generate a random number between 0 and 1 with the noise(x, z) function.
   • Map this random number to an integer y representing the cube height. 
   • Map this cube height to a cube type (e.g. deep water, shallow water, sand, grass, mountain, etc). 
   • Each cube type has to be textured with one or more textures.
   • If the same seed is given is input, the same world should be generated. 
3. Instantiate (in "asg2.js") a a world generator and generate a world of size at least equal to w = 32, h = 32 and d = 32.
4.  Using the the p5.js built-in p5.Camera class, implement a simple first person camera that can be moved with keyboard (w, a, s and d) and rotated with mouse. You don't need to implement any type of collision detection, i.e. the camera can move through cubes in the world.
   • Implement the mouseDragged() function to capture moues drag events.
   • Inside mouseDragged(), use p5.Camera pan() function to pan the camera and the function tilt() to tilt the camera. You can use event.movementX and event.movementY to access the amount of movement of mouse during the drag event.

Resources

• Making maps with noise functions.
• 3D scenes in p5.js
  • Cubes
  • p5.Camera
  • Textures

Submission

Host your source code on Github and upload the following on Canvas:

1. A zip file with the final version of your code.
2. A link (as a comment to your submission) to this assignment's github page. This page should have examples (.png or .gif) of outputs of your world generator with a brief explanation (1 paragraph) of what (and how) the noise was used to generate the world.