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

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();
}

Answers

  • Same project, different person.

  • Any thoughts as to how to solve the issue?

  • Answer ✓

    You could make a second button named clear

    And load table again

    Make function to reset values triggered by the new button

  • Thanks Chrisir! We'll give it a try.

  • edited December 2017

    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);
    }
    
Sign In or Register to comment.