Can not clear previously input values without re-clicking the play button.

angelique

p5.js web editor on MacOS v. 10.12.6

Each time I input a value and click the submit button the canvas displays data from the previously selected row(s) as well as the newly selected row. Tried inserting clear(0, background() and redraw() at various places within the draw2() function but without any affect.

Is it possible to clear previously input values without re-clicking the play button? (Note: the "Input and Button" example within p5 Reference does not attempt to do this.) Thnx.

var table;

function preload() {
  table = loadTable("data.csv", "csv");
  // the data.csv file has 4 rows and 5 column as follows:
  // 0,100,200,300,400,
  // 25,125,225,325,425,
  // 50,150,250,350,450,
  // 75,175,275,375,475,
}

function setup() {
  createCanvas(500, 300);
  background(255);

  input = createInput();
  input.position(20, 340);
  button = createButton('submit');
  button.position(input.x + input.width + 5, 340);
  greeting = createElement('b4', 'please input row number (0, 1, 2 or 3) then click submit');
  greeting.position(20, 370);
  button.mousePressed(draw2);
}

function draw() {
  line(0, 0.5 * height, width, 0.5 * height);
}

function draw2() {
  for (var i = 0; i <= 5; i++) {
    var R = input.value();
    ellipse(table.getNum(R, i), 0.5 * height, 10, 10);
  }
//clear();
//background();
//redraw();
}

GoToLoop

Same person? :-/ https://Forum.Processing.org/two/discussion/25713/p5-js-input-clearing-issue

angelique

Same project, different person.

angelique

Any thoughts as to how to solve the issue?

Chrisir

You could make a second button named clear

And load table again

Make function to reset values triggered by the new button

angelique

Thanks Chrisir! We'll give it a try.

angelique

Hi Chrisir. We followed your suggestion and it performed successfully. Then we touched it up a bit and we were able to clear the canvas of previous user input without a second button. We redrew the line in the called function after clearing and added a noLoop() to the draw function which silenced the alert sound. Thanks for your support!

var table;

function preload() {
  table = loadTable("data.csv", "csv");
  // the data.csv file has 4 rows and 5 column as follows:
  // 0,100,200,300,400,
  // 25,125,225,325,425,
  // 50,150,250,350,450,
  // 75,175,275,375,475,
}

function setup() {
  createCanvas(500, 300);
  background(255);

  input = createInput();
  input.position(20, 340);
  button = createButton('submit');
  button.position(input.x + input.width + 5, 340);
  greeting = createElement('b4', 'please input row number
  (0, 1, 2 or 3) then click submit');
  greeting.position(20, 370);
  button.mousePressed(draw2);

}
function draw() {
  line(0, 0.5 * height, width, 0.5 * height);
  noLoop();
}

function draw2() {
  clear();
  for (var i = 0; i <= 4; i++) { // 5 columns
    var R = input.value(); // 4 rows
    ellipse(table.get(R, i), 0.5 * height, 10, 10);
  }
   line(0, 0.5 * height, width, 0.5 * height);
}