p5.js. input clearing issue

garystil · December 2017

Using the p5.js web editor, I have a problem clearing previously selected row values of an uploaded table. Each time I input a new row number, the sketch applies data from the newly selected row as well as from the previously selected row(s). A steady alert tone also occasionally sounds but I can't identify its source.

I've tried inserting clear(0, background() and redraw() at various spots but without any affect. Would be most grateful if somebody could take a look at the code I posted below and point me in the right direction. Thanks in advance.

var table;

function preload() {
  table = loadTable("data.csv", "csv");

  // the "data.csv" file has 4 rows and 5 columns 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', '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() {
 var R = input.value();
 for (var i = 0; i <= 4; i++) {
    ellipse(table.getNum(R, i), 0.5 * height, 10, 10);
  }
}

dekevin · January 2018

Background should work! However you have to clear the screen at the appropriate place. Since draw2() is only called once after the button is pressed, adding background(255) into draw() would overwrite the ellipses. Instead add background(255) to draw2() as follows:

var table;

function preload() {
  table = loadTable("data.csv", "csv");

  // the "data.csv" file has 4 rows and 5 columns 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', '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() {
  background(255);
 var R = input.value();
 for (var i = 0; i <= 4; i++) {
    ellipse(table.getNum(R, i), 0.5 * height, 10, 10);
  }
}

garystil · January 2018

Thanks dekevin!

Also, we now understand how a double posting of a question on the Forum is inappropriate and will avoid it in the future.

Howdy, Stranger!

Categories

In this Discussion

p5.js. input clearing issue

Best Answer

Answers