About the Cosine Terrain Generator
The Cosine Terrain Generator is a realtime 3D visualization that uses a mathematical function to procedurally generate an infinite surface of rolling hills.
How Does It Work?
We generate the terrain in a simulated world, defined in three dimensions just like our physical world.
To make a three-dimensional surface, we use a mathematical function to determine the height at any point in our world. We call the left-right direction X, and the direction into and out of your screen Z. You can imagine that these create a flat grid extending into your screen. At each point where lines cross, we apply our mathematical function to calculate the height of that point. We create a 'mesh' of lines using these heights which gives us a three-dimensional surface. The lines you see are the outline of the mesh.
The function we apply by default is y = cos(x) + cos(z). We further modify the function to y = a*cos(ix) + b*cos(jy). It looks worse but is similar. Increasing i or j increases the frequency (causes faster waves) in its respective direction. Increasing a or b increases the size of the waves in that direction.
By continuously calculating these heights and updating the mesh in realtime, we create the smooth, infinite terrain animation you see - all running at 60-120fps in your browser.
Explore More Features & Create Your Own
This project was created from the manta-templates Next.js template. It's part of a new collection of web components and layouts. It's card-based, with grids that actually work, 3D with Three.js, Radix themes, videos, and more.
Intelligence and guidance which enabled the creation of this project was provided by ai-project-guide. Both tools are open source and available on GitHub.
Create your own:
# Pull template instance:
pnpm dlx degit manta-digital/manta-templates/templates/nextjs my-app
# Install dependencies:
cd my-app && pnpm install
# Setup guides:
pnpm run setup-guides