p5.js Table setString()用法及代碼示例

p5.js中p5.Table的setString()方法用於將給定的String值存儲到表的給定行和列。可以通過行ID指定行，並且可以通過其列ID或列名指定列。

用法:

setString( row, column, value )

參數：此函數接受上述和以下所述的三個參數：

row:它是一個數字，表示該行的行ID。
column:它是一個字符串或數字，表示列的名稱或列的ID。
value:它是一個字符串，它指定必須存儲的值。

以下示例說明了p5.js中的setString()方法：

範例1：

function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  text("Click the button to modify" + 
       " the table", 20, 20); 
  
  setBtn = 
    createButton("Change Status"); 
  setBtn.position(30, 60); 
  setBtn.mouseClicked(modifyTableData); 
  
  // Create the table 
  table = new p5.Table(); 
  
  // Add the columns and rows 
  table.addColumn("flight"); 
  table.addColumn("status"); 
  
  let row = table.addRow(); 
  row.setString("flight", "American Air"); 
  row.setString("status", "On Time"); 
  
  row = table.addRow(); 
  row.setString("flight", "Lufthansa"); 
  row.setString("status", "On Time"); 
  
  row = table.addRow(); 
  row.setString("flight", "United Air"); 
  row.setString("status", "Delayed"); 
  
  showTable(); 
} 
  
function modifyTableData() { 
  
  // Loop through all the rows 
  // in the table 
  for (let r = 0; r < table.getRowCount(); r++) { 
  
    // Change the string of the status column 
    if (table.getString(r, "status") == "On Time")  
      table.setString(r, "status", "Delayed"); 
    else table.setString(r, "status", "On Time"); 
  } 
  
  showTable(); 
} 
  
function showTable() { 
  clear(); 
  text("The value is modified using the" + 
       " setString() method", 20, 20); 
  
  // Show all the columns present 
  for (let c = 0; c < 2; c++) { 
    text(table.columns, 
         20 + 160 * c, 110); 
  } 
  
  // Show all the rows currently 
  // present in the table 
  for (let r = 0; r < 3; r++) { 
    for (let c = 0; c < 2; c++) { 
      text(table.getString(r, c), 
           20 + 160 * c, 
           140 + 20 * r); 
    } 
  } 
}

輸出：
setString-ex1

範例2：

function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  setBtn = createButton("Toggle Strings"); 
  setBtn.position(30, 40); 
  setBtn.mouseClicked(modifyTableData); 
  
  // Create the table 
  table = new p5.Table(); 
  
  for (let i = 0; i < 10; i++) { 
    table.addColumn(); 
    table.addRow(); 
  } 
  
  createTable(); 
} 
  
function createTable() { 
  
  // Loop through all the rows and columns 
  // in the table and set their initial 
  // string values 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < table.getColumnCount(); c++) { 
      if ((r + c) % 2 == 0)  
        table.setString(r, c, "X"); 
      else table.setString(r, c, "O"); 
    } 
  } 
  
  showTable(); 
} 
  
function modifyTableData() { 
  
  // Loop through all the rows and columns 
  // in the table and change their values 
  // depending on the previous string 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < table.getColumnCount(); c++) { 
      if (table.getString(r, c) == "X")  
        table.setString(r, c, "O"); 
      else table.setString(r, c, "X"); 
    } 
  } 
  
  showTable(); 
} 
  
function showTable() { 
  clear(); 
  text("The value is modified using the" +  
       " setString() method", 20, 20); 
  
  // Show all the rows currently 
  // present in the table 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < table.getColumnCount(); c++) { 
      text(table.getString(r, c),  
           20 + 40 * c,  
           80 + 20 * r); 
    } 
  } 
}

輸出：
setString-ex2

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5.Table/setString

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.Table setString() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。