Skip to content
Related Articles

Related Articles

p5.js NumberDict add() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Nov, 2020
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!