Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Generative Landscape Project | Creative Coding Project Showcase
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Generative Art with JavaScript and P5.js

bookGenerative Landscape Project

index.html

index.html

copy

To build a generative landscape, you combine smooth randomness, color gradients, and animation for a dynamic and organic result. Start by setting up the canvas and drawing a sky gradient using lerpColor, which blends two colors vertically to simulate atmospheric depth. This gradient forms the background and sets the mood for your landscape.

Next, use Perlin noise to generate the terrain. Unlike pure randomness, Perlin noise creates smooth, natural-looking variations that mimic rolling hills or mountain ranges. In the sketch, you loop across the canvas width, sampling the noise function at regular intervals. The noise value is mapped to a vertical position, shaping the land contour. By incrementing the noise offset (xoff) each step, you ensure smooth transitions along the x-axis.

To animate the landscape, increment a second offset (yoff) each frame. This makes the terrain appear to move or shift gently, like a living environment. The terrain is drawn as a filled shape, with its base anchored at the bottom of the canvas, and the top defined by the noise-generated points.

Combining these elements—gradient backgrounds, Perlin noise-driven terrain, and slow animation—results in a visually compelling generative landscape that evolves over time.

question mark

Which technique is commonly used to create smooth, natural-looking terrain in generative landscapes?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain how to implement Perlin noise in code?

What tools or libraries are best for creating generative landscapes?

How can I customize the colors and animation speed?

bookGenerative Landscape Project

Stryg for at vise menuen

index.html

index.html

copy

To build a generative landscape, you combine smooth randomness, color gradients, and animation for a dynamic and organic result. Start by setting up the canvas and drawing a sky gradient using lerpColor, which blends two colors vertically to simulate atmospheric depth. This gradient forms the background and sets the mood for your landscape.

Next, use Perlin noise to generate the terrain. Unlike pure randomness, Perlin noise creates smooth, natural-looking variations that mimic rolling hills or mountain ranges. In the sketch, you loop across the canvas width, sampling the noise function at regular intervals. The noise value is mapped to a vertical position, shaping the land contour. By incrementing the noise offset (xoff) each step, you ensure smooth transitions along the x-axis.

To animate the landscape, increment a second offset (yoff) each frame. This makes the terrain appear to move or shift gently, like a living environment. The terrain is drawn as a filled shape, with its base anchored at the bottom of the canvas, and the top defined by the noise-generated points.

Combining these elements—gradient backgrounds, Perlin noise-driven terrain, and slow animation—results in a visually compelling generative landscape that evolves over time.

question mark

Which technique is commonly used to create smooth, natural-looking terrain in generative landscapes?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2
some-alt