The add() method of p5.NumberDict in p5.js adds the given value to the value at the given key and stores the updated value at the same key. A key-value pair is a set of two values that are mapped to each other. These values can be accessed by querying this dictionary using the key portion of the pair. A number dictionary can store multiple key-value pairs that can be accessed using the methods of the dictionary.
Syntax:Â
add( Key, Number )
Parameters:Â This function has two parameters as shown above and discussed below:
- Key: This is a number that denotes the key from where the value would be added.
- Number: This is a number that denotes the value that is to be added.
The example below illustrates the add() method in p5.js:
Example:
Javascript
let y = 0;   function setup() {   createCanvas(550, 500);   textSize(16);     text("Click on the button to create a new " +        "dictionary and add the given value",        20, 20);     text("Key:", 20, 260);   text("Value:", 160, 260);     key_input = createInput();   key_input.position(70, 250);   key_input.size(40);     val_input = createInput();   val_input.position(220, 250);   val_input.size(40);     setBtn =     createButton("Create random dictionary");   setBtn.position(30, 40);   setBtn.mouseClicked(createNewDict);     addBtn =     createButton("Add given value to key");   addBtn.position(30, 300);   addBtn.mouseClicked(addVal); }   function createNewDict() {   clear();     // Create an object with random values   let obj = {};   for (let i = 0; i < 6; i++) {     let rk = ceil(Math.random() * 100);     let rn = floor(Math.random() * 100);     obj[rk] = rn;       text("Key: " + rk + " : Value: " +          rn, 40, 120 + 20 * i);   }     // Create a number dict using the above values   numDict = createNumberDict(obj);     text("New Dictionary created with values",        20, 80);     text("Click on the button to create a new " +        "dictionary and add the given value",        20, 20);     text("Key:", 20, 260);   text("Value:", 160, 260); }   function addVal() {   // Get the key and value to be updated   let keyToChange = int(key_input.value());   let valToAdd = int(val_input.value());     // Get the previous value in the dictionary   let prevVal = numDict.get(keyToChange);     // If the key exists in the dictionary   if (prevVal) {     numDict.add(keyToChange, valToAdd);       // Get the updated value     let updatedVal = numDict.get(keyToChange);         text("The value at key: " + keyToChange +          " was: " + prevVal, 20, 360 + y * 40);     text("The updated value at key: " +          keyToChange + " is: " + updatedVal,          20, 380 + y * 40);   }   else {     text("Please enter a proper key",          20, 380 + y * 40);   }     y = y + 1;     text("Click on the button to create a new " +        "dictionary and add the given value",        20, 20); } |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.NumberDict/add
