add()
The add() function in p5.js is used to combine numbers or colors by performing addition. Creative coders use it to manipulate values dynamically, creating interesting visual effects or controlling parameters in real-time. For example, in a generative art piece, you might use add() to gradually increase the size of shapes based on user input, resulting in an evolving design.
📖 p5.js Reference →🧠 See The Whole Picture
Picture a mixing bowl where you pour in various ingredients (your numbers). The add() function stirs them together, creating a single outcome. If you pour in 200 and then add 150, you end up with a full bowl that represents the total sum, which can then be used creatively in your art.
📖 Visual Learner's Guide
The Big Picture:
When you run this code, you'll see text that grows based on the numbers you add together.
Visual Analogy:
Think of adding as pouring different colored paints into a can. Each number changes the final color, just like how different amounts change the overall size of the text.
The Numbers Decoded:
'200' means a base of 200 pixels. Adding '150' is like adding a splash of paint, making it bigger. '80' is another splash, making it even larger.
Connection Map:
The result of the add() function can change other aspects, like text size or shape dimensions, enhancing your creative expression.
Common Gotcha:
Remember that the output is a single number, not a collection of them. It’s easy to think you’ll get multiple results, but you only get one total.
🔄 How It Works
This diagram illustrates how your code flows into the add() function and produces a result that you can use.
📝 Syntax
📖 How to Read This
Read add(v1, v2) as: 'Add the value v1 to the value v2.' The parentheses act like a container where you put the numbers you want to add together.
add(param1, param2, ...)Example: add(200, 150, 80)
🔀 Different Ways to Call It
add(value)
This form is used when you want to add a single value to a base value, effectively increasing it. It's like saying, 'Add this amount to what I already have.'
add(128)
→ This produces a single resulting value, showing how much you've increased the base value.
add(v1, v2, v3)
This form allows you to add multiple values together, creating a single cumulative result. It's like taking multiple ingredients and combining them into one dish.
add(255, 100, 50)
→ This produces a single resulting value, which is the sum of all the inputs.
↩️ What It Returns
Type: Number
The add() function returns a number that is the sum of the parameters provided. Think of it as a calculator that gives you the total of your inputs.
Parameters
value
Number
required
A Number can be any digit, like 100 or 3.14. It's like anything measurable.
This parameter controls the specific numeric values you want to add. Typical values can be any integer or float, and at 0, it represents no addition. The maximum depends on your specific use case.
Range: Any numeric value
0 → This would indicate no addition at all.
128 → A moderate addition, visually representing a middle ground.
255 → The maximum addition, illustrating the upper limit.
💡 How Parameters Work Together
Think of the parameters as ingredients in a recipe. The values you provide to add() interact like different flavors coming together. The more you add, the more complex your final result becomes, just as a dish changes with every ingredient added.
💻 Working Example
// Complete working example with comments
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
let total = add(200, 150, 80);
// Total is now 430, which can be used for further calculations
textSize(total / 20); // Use total to set text size
text('Hello, World!', 10, 200);
}⚙️ How It Works
When you call add(), p5.js takes the parameters you provide, processes them in the order they were given, and returns the sum. This process involves reading the current state of these values, performing addition, and then outputting the new value for further use in your sketches.
🎓 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 add() to create colorful overlapping circles."
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 add() to create a gradient effect. Start simple, then add complexity."
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 add() with specific parameters to create a visual 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 add() example. Then I'll ask you to add: color, animation, interaction."
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:
"Create an interactive sketch that uses add() to change the size of a circle based on mouse position."
💡 Why this is good: This prompt structure encourages incremental learning by focusing on interaction.
📚 What you learn: You learn about user interaction and how it affects numerical values.
// Complete working code with interactivity."Use add() to create a visual effect that layers colors based on user input."
💡 Why this is good: This gives context to the AI on how to approach the visual layering.
📚 What you learn: You learn about blending colors and how to manipulate them with addition.
// complete code demonstrating layers.🔮 Indirect Prompts - Describe What You Want
Don't name the function - see if the AI figures out to use add():
"Describe a visual that combines several numeric inputs without naming add() - let AI figure out which function to use."
💡 Why this is good: This teaches you can describe WHAT you want without knowing the function name.
� What you learn: You learn to communicate visual intent, not just function names.
// Code showing AI chose add()🖼️ See It In Real Sketches
How add() is used in actual gallery sketches:
Dynamic Circle Sizes
In this sketch, add() is used to change the size of circles based on mouse movement, creating a responsive visual experience.
// Relevant code showing the function in context
function draw() {
let size = add(mouseX, mouseY);
ellipse(200, 200, size, size);
}...🔀 Fun Function Combinations
Try asking the AI to combine add() with these:
add() + map()
→ Combining these can create a responsive visual based on varying input ranges.
Try: "Use add() along with map() to create a responsive background that changes based on mouse position."
// 5-10 lines showing the combination
let bgColor = add(map(mouseX, 0, width, 0, 255), 100, 100);
background(bgColor);
⚠️ Common Mistakes & Fixes
❌ Mistake: Trying to add non-numeric values, such as strings.
🤔 Why it's wrong: This causes errors because add() expects numbers.
✅ Fix: Ensure that all parameters passed to add() are numeric values.
🗺️ Learning Path
💡 Project Ideas
- Create a responsive art piece that uses add() to change shapes based on user input.
🤖 Ask xelsed-alpha6 to Explain
"Explain what add() 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 add()
"Create something using add()"
🔧 Ask AI to Help Debug
"My add() isn't working, help me debug"
✨ Creative Combinations with AI
"Combine add() with other functions for interesting effects"
Ready to Try add()?
Open p5js.AI and ask the AI to help you use add() in your own creative project.
Start Coding with AI →