Create
shape|p5_color|p5_math|p5_transform|p5_event|p5_image|p5_typography|p5_io 🌿 Intermediate

noise()

The noise() function generates smooth, continuous random values over a specified range. Unlike the built-in random() function, which produces unpredictable values, noise() provides a more natural randomness that can be used to create organic motion, textures, and patterns. For example, you might use noise() to simulate the gentle ebb and flow of ocean waves or to create a natural-looking landscape in a generative art piece.

📖 p5.js Reference →

🧠 See The Whole Picture

Imagine a 3D terrain map where each point has an elevation value. When you use noise(), you are effectively querying that map at various (x, y) points to get smooth elevation changes that resemble hills and valleys, rather than jagged cliffs.

📖 Visual Learner's Guide

The Big Picture:

If you run this code, you would see a series of circles smoothly moving across the canvas, creating a flowing visual effect.

Visual Analogy:

Think of noise() like a gentle breeze moving through a field of tall grass - it creates waves and patterns that are natural and smooth.

The Numbers Decoded:

In the code, noise(frameCount * 0.01) means you're using the current frame as a moving coordinate, which helps the output values change over time. The multiplication by width and height scales the output to fit your canvas size.

Connection Map:

The positions calculated by noise() are used directly to place ellipses, creating dynamic, flowing visuals. The fill() color would set the color of the circles drawn based on your artistic choice.

Common Gotcha:

Remember, noise() produces values between 0 and 1, so you'll often need to multiply by your canvas dimensions to see the results in a meaningful way.

🔄 How It Works

This diagram represents the flow of execution from your code to the noise function, which then generates values used to create visuals on the canvas.

📝 Syntax

📖 How to Read This

Read noise(x, y) as: Generate a smooth random value based on the coordinates x and y. The parameters provide the function with the necessary information to calculate the noise value at that specific point in space.

noise(param1, param2, ...)

Example: noise(200, 150, 80)

🔀 Different Ways to Call It

noise(value)

Use this form when you want a single random value based on one dimension.

noise(128) → This produces a smooth random value between 0 and 1.
noise(v1, v2, v3)

Use this form for multi-dimensional noise, allowing for more complex and interesting results.

noise(255, 100, 50) → This generates a smooth random value that varies according to the specified 3D coordinates.

↩️ What It Returns

Type: Number

The noise() function returns a number between 0 and 1, representing a smooth random value based on the input parameters. Think of it as giving the function a set of coordinates and it returns a height value, creating a terrain-like effect on your canvas.

🎛️ Mode-Dependent Behavior

The noise() function works best in normal mode, producing values between 0 and 1 regardless of the color or angle modes.

📥 What Goes In

You give noise() a number (or numbers) that act as coordinates in a multidimensional space. Each coordinate influences the output, like selecting a specific location on a map to find the corresponding height of a mountain.

📤 What Happens

The noise() function takes your input coordinates and returns a smooth random value. It’s like asking for the weather at a specific location and receiving a detailed forecast based on that spot.

Parameters

actualParameterName Number required

Number represents any digit such as 0.5, 1.0, or 10. Consider it as coordinates on a graph.

These parameters control the input space for the noise function. The values can be any floating-point number, and their typical range is from 0 to positive infinity.

Range: 0 to positive infinity

Examples: 0 → Produces a starting point in the noise space. 1 → Represents a low point in the noise function. 10 → Illustrates a higher value in the noise space, resulting in varied outputs.

💡 How Parameters Work Together

The parameters interact like GPS coordinates: the first number determines the x-axis position, while the second influences the y-axis. Using more parameters introduces depth, creating a richer and more complex noise landscape.

💻 Working Example

// Complete working example with comments
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let x = noise(frameCount * 0.01) * width;
  let y = noise(frameCount * 0.01 + 100) * height;
  ellipse(x, y, 20, 20); // Draw an ellipse at the noise-generated position
}
Try This Code →

⚙️ How It Works

When p5.js encounters the noise() function, it first reads the input parameters. It then computes a smooth value based on the Perlin noise algorithm, which generates a value that changes gradually with small changes in input. This value is then returned, ready to be used for drawing or animation.

🎓 Learn Prompt Patterns

These patterns help you write better prompts for ANY function:

🎭 Persona Pattern

Tell the AI to act as a specific type of creator

"Act as a creative coder making generative art. Use noise() to create an organic landscape."

Why it works: Giving the AI a persona helps it understand the CONTEXT and style you want.

📋 Recipe Pattern

Ask for step-by-step instructions

"Give me step-by-step code to use noise() to create a moving cloud effect."

Why it works: Breaking down into steps helps you understand each part and learn incrementally.

📝 Template Pattern

Provide a structure for the AI to fill in

"Use this template: setup creates canvas, draw uses noise() with moving parameters to make a flowing river effect."

Why it works: Templates give the AI clear constraints, resulting in more predictable output.

🔄 Refinement Pattern

Start simple and iterate

"Start with a basic noise() example. Then I'll ask you to add: color, animation, and interactivity."

Why it works: Building up gradually helps you understand each addition and not get overwhelmed.

🎯 Direct Prompts - Name the Function

Tell the AI exactly which function to use:

Direct

"Use noise() to create a flowing river effect on the canvas."

💡 Why this is good: This prompt defines a clear visual goal, guiding the AI to use noise() in a specific way.

📚 What you learn: Understanding of how to apply noise() for fluid visuals.

📝 Sample Output: 
// Complete code that creates a flowing river effect using noise()
Direct

"Create an abstract landscape using noise() with vibrant colors."

💡 Why this is good: It encourages exploration of color in combination with noise().

📚 What you learn: Integration of noise() with color dynamics.

📝 Sample Output: 
// Complete code creating an abstract landscape with noise() and colors.

🔮 Indirect Prompts - Describe What You Want

Don't name the function - see if the AI figures out to use noise():

Indirect

"Describe a visual that resembles a moving cloud formation."

💡 Why this is good:

� What you learn: Communication of visual intent without specific function names.

📝 Sample Output: 
// Code showing AI chose noise() to create cloud formations.

🖼️ See It In Real Sketches

How noise() is used in actual gallery sketches:

AI Weather Symphony

In this sketch, noise() is used to create dynamic soundscapes influenced by user interaction simulating weather patterns.

function drawAurora() {
  noStroke();
  const t = frameCount * 0.01;
  const bands = 3;
  for (let b = 0; b < bands; b++) {
    const alpha = 70 - b *...
View Sketch →

Voice Canvas - AI Art Director

The noise() function is applied to generate particle movements based on voice commands, creating visual art that reacts to the user's emotions.

let x = (noise(i * 0.01, frameCount * 0.005 * visualParams.speed) * width);
let y = (noise(i * 0.01, frameCount * 0.005 * visualParams.speed) * height...
View Sketch →

🔀 Fun Function Combinations

Try asking the AI to combine noise() with these:

noise() + lerpColor()

→ Creates smooth color transitions based on noise values, resulting in a visually appealing gradient effect.

Try: "Use noise() to generate colors that transition smoothly across the canvas."

// 5-10 lines showing the combination
function draw() {
  let n = noise(frameCount * 0.01);
  let c = lerpColor(color(0, 0, 255), color(255, 0, 0), n);
  background(c);
}

⚠️ Common Mistakes & Fixes

❌ Mistake: Using noise() with integer inputs instead of floating-point numbers.

🤔 Why it's wrong: Integer inputs can lead to unexpected results as noise() is designed for continuous values.

✅ Fix: Use floating-point numbers for smoother transitions.

🗺️ Learning Path

💡 Project Ideas

  • Create a generative landscape
  • Simulate flowing water
  • Design an interactive art piece that reacts to user input

🤖 Ask xelsed-alpha6 to Explain

Your prompt:

"Explain what noise() does in p5.js"

Try this prompt in p5js.AI to see how the AI explains it!

Try in p5js.AI →

💡 Prompt AI to Write Code Using noise()

Example prompt:

"Create something using noise()"

🔧 Ask AI to Help Debug

When stuck, try:

"My noise() isn't working, help me debug"

✨ Creative Combinations with AI

Ask AI to combine functions:

"Combine noise() with other functions for interesting effects"

Ready to Try noise()?

Open p5js.AI and ask the AI to help you use noise() in your own creative project.

Start Coding with AI →