I need two songs to sound after the other

Hi community,

I would like my code to play a sound, stop for 5 secs and play another sound.
There will be 7 sounds that have to combine randomly with each other (that makes 42 combinations).

Following the p5.js example, do you have any suggestions for a beginner like me?

Thanks heaps.

var song;

function setup() {
  song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
  createCanvas(720, 200);
  background(255,0,0);
}

function mousePressed() {
  if ( song.isPlaying() ) { // .isPlaying() returns a boolean
    song.stop();
    background(255,0,0);
  } else {
    song.play();
    background(0,255,0);
  }
}

https://p5js.org/examples/sound-load-and-play-sound.html

This is a rough idea of my code

var volumeS, volume;
var numSongs = 24;


function preload() {
  createCanvas(windowWidth, windowHeight);
  background(255);

  keyList = ['W', 'A', 'S', 'D', 'F', 'G', 'E', 'R', 'T', 'Y', 'H', 'U', UP_ARROW, DOWN_ARROW];

  //LIST OF STRINGS
  samplePresets = [{
    name: '1bsn',
    filename: 'dn_bsn*.wav'
  }, {
    name: '2can',
    filename: 'dn_can*.wav'
  }, {
    name: '3cnt',
    filename: 'dn_cnt*.wav'
  }, {
    name: '4gtn',
    filename: 'dn_gtn*.wav'
  }, {
    name: '5gtr',
    filename: 'dn_gtr*.wav'
  }, {
    name: '6hcd',
    filename: 'dn_hcd*.wav'
  }, {
    name: '7hrn',
    filename: 'dn_hrn*.wav'
  }, {
    name: '8hrp',
    filename: 'dn_hrp*.wav'
  }, {
    name: '9obc',
    filename: 'dn_obc*.wav'
  }, {
    name: '10obo',
    filename: 'dn_obo.wav'
  }, {
    name: '11ols',
    filename: 'dn_ols*.wav'
  }, {
    name: '12pno',
    filename: 'dn_pno*.wav'
  }, {
    name: '13pob',
    filename: 'dn_pob.wav'
  }, {
    name: '14sno',
    filename: 'dn_sno*.wav'
  }, {
    name: '15spo',
    filename: 'dn_spo.wav'
  }, {
    name: '16stg',
    filename: 'dn_stg*.wav'
  }, {
    name: '17tbn',
    filename: 'dn_tbn*.wav'
  }, {
    name: '18tpr',
    filename: 'dn_tpr*.wav'
  }, {
    name: '19tpt',
    filename: 'dn_tpt*.wav'
  }, {
    name: '20vbn',
    filename: 'dn_vbn*.wav'
  }, {
    name: '21vbs',
    filename: 'dn_vbs*.wav'
  }, ];


  //LIST OF AUDIO
  samplePresetAudio = [];
  for (var i = 0; i < samplePresets.length; i++) {
    samplePresetAudio[i] = loadSound('Assets/' + samplePresets[i].filename); // + load silence + loadSecondSound
  }

  //RANDOMISE SIZE





  //RECTANGLE
  var side = windowWidth / 6;
  var topLeft = windowWidth / 2 - side / 2;
  var topRight = windowHeight / 2 - side / 2;
  fill(255, 255, 0);
  rect(topLeft, topRight, side, side);
  fill(0);
  textSize(windowHeight / 20);
  textFont("Helvetica");
  textAlign(CENTER);
  text("PLAY", topLeft + side / 2, topRight + side / 1.8);

  // SLIDER
  var sliderOld = createSlider(0, 4, 1);
  sliderOld.style('width', '500px');
  sliderOld.position(windowWidth / 3, windowHeight / 1.2);

  //NUMBERS
  var posNumbers = windowWidth / 3 + 10;
  var inc = 121;
  var posNumbersY = windowHeight / 1.22;
  fill(100);
  textSize(windowHeight / 25);
  textFont("Helvetica");
  textAlign(CENTER);
  text("1", posNumbers, posNumbersY);
  text("2", posNumbers + inc, posNumbersY);
  text("3", posNumbers + 2 * inc, posNumbersY);
  text("4", posNumbers + 3 * inc, posNumbersY);
  text("5", posNumbers + 4 * inc, posNumbersY);
}

function draw() {}



function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

  //RECTANGLE
  var side = windowWidth / 6;
  var topLeft = windowWidth / 2 - side / 2;
  var topRight = windowHeight / 2 - side / 2;
  fill(255, 255, 0);
  rect(topLeft, topRight, side, side);
  fill(0);
  textSize(windowHeight / 20);
  textFont("Helvetica");
  textAlign(CENTER);
  text("PLAY", topLeft + side / 2, topRight + side / 1.8);

}

function keypressed() {
  if (keyIsPressed && key == 'e')
    print(sliderOld);
}


function mousePressed() {
  var side = windowWidth / 6;
  var topLeft = windowWidth / 2 - side / 2;
  var topRight = windowHeight / 2 - side / 2;
  for (var x = 0; x < numSongs / 2; x++) {
    for (var y = 1; y < 3; y++) {
      if (mouseX > topLeft && mouseX < topLeft + side && mouseY > topRight && mouseY < topRight + side) {
        if (samplePresetAudio[x + (y - 1) * 12].isPlaying()) { // .isPlaying() returns a boolean
          samplePresetAudio[x + (y - 1) * 12].pause();
          fill(255, 255, 0);
          rect(topLeft, topRight, side, side);
          fill(255, 0, 0);
          textSize(windowHeight / 20);
          textFont("Helvetica");
          textAlign(CENTER);
          text("PLAY", topLeft + side / 2, topRight + side / 1.8);
        } else {
          samplePresetAudio[x + (y - 1) * 12].play();
          samplePresetAudio[x + (y - 1) * 12].amplitude = volume
          fill(255, 255, 0);
          rect(topLeft, topRight, side, side);
          fill(255, 0, 0);
          textSize(windowHeight / 20);
          textFont("Helvetica");
          textAlign(CENTER);
          text("PLAY", topLeft + side / 2, topRight + side / 1.8);
        }
      }
    }
  }
}

here are a few things to look into as you try to work it out!

firstly I’d get one thing working and then add a bit more on slowly rather than trying to add too much too fast. This is a common mistake beginners make and it makes debugging really hard. Just do one thing at a time (a small thing) and make sure its working.

So here is a list of things I’d try to work out (in order)

  1. a schema to organize your files (you’re already on this from the code above)
  2. a way to get and play a random file
    – you might investigate the random() and int() &/or floor() functions to get a random number and pull a random filename out of your json.
    – Speaking of pulling filenames out, you might want to preload() them all and store them in an array, this would change how you pull the audio data since you might pull it out of the array instead of loading the file right then when you need it (for performance!) (happy to provide an example of this if you want it!)
  3. now that you have a random player working, its time to sort out the timing issue. build a timer using console.log() or print() just to work out what you are trying to accomplish and how to get there.
    – to build a timer there are many options including a setInterval() function, but I might encourage you to investigate the seconds(), millis(), frameCount and modulo % operator to create a timer withing your p5 draw loop instead of starting an entirely different timing scheme outside of p5 with a setInterval()
  4. now that you’ve got timing down, its time to start combing the timing system and playback system together.
    – one thing you’re likely going to need for this is to know when the audio finished playing. checkout the p5.dom’s documentation on currentTime() and onended()
  5. maybe you’re done? :clap:

so you can see that this has been taken in steps or phases to complete one idea at a time. it can be difficult to get it all going so start small and build from there. don’t be afraid to get a small piece done at a time just work out that idea and then keep moving forward.

You might also check out the p5.score and p5.part functionality of the p5.sound library, it’s all about sequencing audio files. Someone else might be able to speak to it better than I can, but it’s also really in line with that you’re trying to do.

Good Luck & Happy Coding!

2 Likes

Thanks a lot for your prompt and well explained response.
I’ll start working on this and let you know.

Cheers,

1 Like

Hi bmoren,

I could get done all the points that you suggested (thanks heaps for your help).
To finish the code now I just need three things and I was wondering if you could help me:

  1. When I resize the window, slider and submit button don’t apply changes as other elements do. I guess they have some sort of inheritance that doesn’t allow to do this as I do with the numbers and the NEXT button. Any suggestions?
  2. On the list of songs, if I’ve got A,B,C,D… I need to combine the pairs of songs without repetition (A-B, A-C, A-D, B-C, B-D, C-D) and delete the ones that have already been played from the list. Any ideas?
  3. When I press submit I would like to save that info somewhere (I guess it would ideally be a .csv so every pair of sounds (row) have the different similarity ratings (columns) to analyse the information later comparing to the spectral analysis of the sounds.

Thanks a lot for your help!

check out the windowResized() function, you can then write a piece in there to capture the slider status with something like

var val = slider.value();

or anything else you want to do when the window gets resized, this should get you there!

are you using random number generator? if so you could look at this example to generate a non-repeating number.

but the easiest might be to duplicate / build an array, shuffle it (many options here) and then pop each piece of the array off one by one.

there are a few options for this, and it depends on how you’ve saved your data.

you might look into
https://p5js.org/reference/#/p5/save
https://p5js.org/reference/#/p5/saveTable
https://p5js.org/reference/#/p5/createWriter

good luck!

Hi bmoren,

Hope you are doing well.
I’ve been trying to solve this by myself for ages but unfortunately I need some help. I want to save a csv or tsv with the information gathered by the program, but I’m unable to saveTable in any other place than at the beginning. What I need is a table that collects the inputs made by users and saves a table in csv at the very end. I’m going nuts :S

Here is an example of my problem and below is my master code:

var table;
var buttonB;
var newRow;

function setup() {
	table = new p5.Table();
	table.addColumn('number');
	table.addColumn('name');
	
	newRow = table.addRow();
	
	buttonID = createButton('SUBMIT');
	buttonID.style('width', '100px', '300px');
	buttonID.position(windowWidth / 2 + 20, windowHeight / 1.8);
	buttonID.mousePressed(addBicho);
	
	printTable();

}

function draw() {

}

function addBicho() {
	for (i = 0; i < 10; i++) {
		table.addColumn(i);
	}
	newRow.setString(1, 'sabandija');
	print(table);
	printTable();
}

function printTable() {
	saveTable(table, 'bichos.csv');
}

When I first see the csv everything looks fine but when you click on submit to add info I get this:
∫w^~)fi


Here is the full code where I need to implement it (just in case it helps). I thought it would be easier to send you a short example (above) to illustrate it much simpler. Please forbid the messy code (proper of a beginner like me):

var index = 0;
var index2 = 0;
var buttonOld;
var buttonNew;
var listAudioCombs1;
var listAudioCombs2;
var posRect = [];
var clicks = 1;
var value;
var valueOld;
var transp = [10, 10, 10, 10, 10, 10];
var answers = [];
var table;
var finish = false;
var newRow;
var play = false;
var buttons = false;
var change = false;
var inputName;
var inputAge;
var inputSex;
var inputInsPlaying;
var inputIns;
var inputYearsPlaying;
var tableArray;
var N;
var A;
var S;
var IP;
var I;
var IY;
var myInt;
var points;
var completed = false;
var file;


function preload() {
	createCanvas(windowWidth, windowHeight);
	background(255);

	keyList = ['W', 'A', 'S', 'D', 'F', 'G', 'E', 'R', 'T', 'Y', 'H', 'U', UP_ARROW, DOWN_ARROW];

	//LIST OF STRINGS
	samplePresets = [{
		name: '1cnt',
		filename: 'dn_cnt*.wav'
	}, {
		name: '2gtr',
		filename: 'dn_gtr*.wav'
	}, {
		name: '3vbs',
		filename: 'dn_vbs*.wav'
	}, {
		name: '4stg',
		filename: 'dn_stg*.wav'
	}, {
		name: '5gtn',
		filename: 'dn_gtn*.wav'
	}, {
		name: '6obc',
		filename: 'dn_obc*.wav'
	}, {
		name: '7vbn',
		filename: 'dn_vbn*.wav'
	}, ];

	// LIST of ANSWERS (table)
	table = new p5.Table();
	table.addColumn('Name');
	table.addColumn('Age');
	table.addColumn('Sex');
	table.addColumn('Instrument');
	table.addColumn('Ins');
	table.addColumn('Years');
	table.addColumn('Pair_number');
	table.addColumn('Audio1');
	table.addColumn('Audio2');
	table.addColumn('Answer');
	//save(table, "init.csv")


	//LIST OF AUDIO
	samplePresetAudio = [];
	for (var i = 0; i < samplePresets.length; i++) {
		samplePresetAudio[i] = loadSound('Assets/' + samplePresets[i].filename);
	}

	// Create list of all possible combinations
	listAudioCombs1 = []
	listAudioCombs2 = []
	var regenerate = false;
	var j = 0;
	while (j < 10) { // decide here how many pairs of sounds
		index = int(random(samplePresetAudio.length));
		index2 = int(random(samplePresetAudio.length));
		while (index == index2) {
			index2 = int(random(samplePresetAudio.length));
		}
		// check that the pair doesnt exist
		for (var k = 0; k < listAudioCombs1.length; k++) {
			if (listAudioCombs1[k] == index && listAudioCombs2[k] == index2) {
				regenerate = true
			}
			if (listAudioCombs2[k] == index && listAudioCombs1[k] == index2) {
				regenerate = true
			}
		}
		// if it didnt exist, regenerate will still be false, so add pair of values to listAudioCombs
		if (regenerate === false) {
			listAudioCombs1[j] = index;
			listAudioCombs2[j] = index2;
			j++;
		}
		regenerate = false;
	}
	inputName = createInput();
	inputAge = createInput();
	inputSex = createInput();
	inputInsPlaying = createInput();
	inputIns = createInput();
	inputYearsPlaying = createInput();

	buttonID = createButton('SUBMIT PERSONAL INFORMATION');
	buttonID.style('width', '100px', '300px');
	buttonID.position(windowWidth / 2 + 20, windowHeight / 1.8);
	buttonID.mousePressed(changeMode);

	points = int(random(1000, 10000));

}


function draw() {
	createCanvas(windowWidth, windowHeight);

	if (change === false) {
		background(250, 0, 0, 30);
		//INPUTS
		posInputY = [];
		posInputX = windowWidth / 2;

		for (i = 0; i < 6; i++) {
			posInputY[i] = windowHeight / 4 + i * windowHeight / 20;
			//print(posInputY[i])
		}
		inputName.position(posInputX, posInputY[0]);
		inputAge.position(posInputX, posInputY[1]);
		inputSex.position(posInputX, posInputY[2]);
		inputInsPlaying.position(posInputX, posInputY[3]);
		inputIns.position(posInputX, posInputY[4]);
		inputYearsPlaying.position(posInputX, posInputY[5]);



		posText = posInputX - windowWidth / 60;
		textSize(windowWidth / 70);
		textFont("Courier");
		textAlign(CENTER, TOP);
		text("Hi! Before starting, please provide the following information:", posText, posInputY[0] - windowHeight / 10);

		textSize(windowWidth / 100);
		textAlign(RIGHT, TOP);


		text("name", posText, posInputY[0]);
		text("age", posText, posInputY[1]);
		text("sex (male, female)", posText, posInputY[2]);
		text("do you play an instrument? (yes or no)", posText, posInputY[3]);
		text("what instrument?", posText, posInputY[4]);
		text("if yes, how many years have you been playing for?", posText, posInputY[5]);
	} else {
		if (clicks === 22) {
			background(0, 255, 0, 50);
			var eraseButtonFin = buttonOld.remove();

			fill(0);
			textSize(windowWidth / 40);
			textFont("Courier");
			textAlign(CENTER, TOP);
			text("Well done! That was amazing. You got ", windowWidth / 2, windowHeight / 2);

			var finalText = points + " points";
			text(finalText, windowWidth / 2, windowHeight / 1.5);

		} else {
			background(255);
			display(clicks);
			//EXPLANATION
			var posText = windowWidth / 4;
			var posTextI = windowWidth / 2;
			var posTextY = windowHeight / 10;
			var posTextZ = posTextY + windowHeight / 10;

			fill(100);
			textSize(windowHeight / 30);
			textFont("Courier");
			textAlign(CENTER);
			text("INSTRUCTIONS", posTextI, posTextY);

			textSize(windowHeight / 45);
			textAlign(LEFT);
			text("1. Click on PLAY SOUNDS and listen to the pair of sounds - they can be repeated.\n2. Click on one of the NUMBERS to rate the degree of similitude \n   between both sounds 1 very different and 5 very similar.\n3. Click on SUBMIT YOUR ANSWER. ", posText, posTextZ);

			//PLAY BUTTON
			sideX = windowWidth / 5;
			sideY = windowHeight / 5;
			co = 2.55;
			topLeft = windowWidth / co;
			topRight = windowHeight / co - sideY / co;
			fill(255, 255, 0, 50);
			rect(topLeft, topRight, sideX, sideY, 40);
			fill(0);
			textSize(windowHeight / 25);
			textFont("Courier");
			textAlign(CENTER, CENTER);
			text("PLAY\nSOUNDS", topLeft + sideX / 2, topRight + sideY / 1.85);

			//NUMBERS TO RATE
			sideNumbers = windowHeight / 7;
			var co3 = 1.4;
			var topLeftNumbers = windowWidth / co3 - sideNumbers / co3;
			var posNumbersY = windowHeight / 1.4;
			var posRectY = windowHeight / 1.56;
			var nor = 1.8;
			for (i = 1; i < 6; i++) {
				posRect[i] = i * (windowWidth / 3.7) / nor;
				fill(0, 250, 0, transp[i]);
				rect(posRect[i], posRectY, sideNumbers, sideNumbers, 20);
				fill(0);
				textSize(windowHeight / 20);
				textFont("Courier");
				textAlign(CENTER);
				text(i, posRect[i] + sideNumbers / 2, posNumbersY);
			}
			var textY = posNumbersY * 1.15;
			var textInd1 = "very different";
			var textInd5 = "very similar";
			textSize(windowHeight / 40);
			text(textInd1, posRect[1] + sideNumbers / 2, textY);
			text(textInd5, posRect[5] + sideNumbers / 2, textY);
		}
	}
}

function display() {
	var stringText = "Pair number ";
	var stringNumber = stringText + clicks;
	fill(50);
	textAlign(RIGHT, CENTER);
	textSize(windowWidth / 90);
	text(stringNumber, windowWidth - 50, windowHeight / 2.5);
}

function delay(ms) {
	var cur_d = new Date();
	var cur_ticks = cur_d.getTime();
	var ms_passed = 0;
	while (ms_passed < ms) {
		var d = new Date(); // Possible memory leak?
		var ticks = d.getTime();
		ms_passed = ticks - cur_ticks;
		// d = null; // Prevent memory leak?
	}

}




//RANDOMISE
function mousePressed() {
	sideX = windowWidth / 5;
	sideY = windowHeight / 5;
	co = 2.5;
	topLeft = windowWidth / co;
	topRight = windowHeight / co - sideY / co;

	if (change === true && mouseX > topLeft && mouseX < topLeft + sideX && mouseY > topRight && mouseY < topRight + sideY) {
		//print(index);
		samplePresetAudio[index].play();
		//print(index2);
		delay(2000);
		samplePresetAudio[index2].play();

		play = true;
	}

	sideNumbers = windowHeight / 7;
	var co3 = 1.4;
	var topLeftNumbers = windowWidth / co3 - sideNumbers / co3;
	var posNumbersY = windowHeight / 1.4;
	var posRectY = windowHeight / 1.56;
	var nor = 1.8;
	posRect[i] = i * (windowWidth / 3.7) / nor;

	for (i = 1; i < 6; i++) {
		posRect[i] = i * (windowWidth / 3.7) / nor;
		if (play === true && mouseX > posRect[i] && mouseX < posRect[i] + sideNumbers && mouseY > posRectY && mouseY < posRectY + sideNumbers) {
			//print(posRect[i]);
			value = i;
			//print(value);
			transp[1] = 10
			transp[2] = 10;
			transp[3] = 10;
			transp[4] = 10;
			transp[5] = 10;
			transp[i] = 150;
			buttons = true;
		}
	}
}

function saveAndNext() {

	if (change === true && buttons === true) {
		//need to write to save in a CSV
		newRow = table.addRow();
		newRow.setString('Name', N); // change this for name of student
		newRow.setString('Age', A);
		newRow.setString('Sex', S);
		newRow.setString('Instrument', IP);
		newRow.setString('Ins', I);
		newRow.setNum('Years', IY);

		newRow.setString('Pair_number', clicks);
		newRow.setString('Audio1', index);
		newRow.setString('Audio2', index2);
		newRow.setNum('Answer', value);

		// Check table
		tableArray = table.getArray();
		for (var i = 0; i < tableArray.length; i++) {
			//print(tableArray[i]);
		}

		randomNum = int(random(listAudioCombs1.length));
		index = listAudioCombs1[randomNum];
		index2 = listAudioCombs2[randomNum];

		transp[1] = 10;
		transp[2] = 10;
		transp[3] = 10;
		transp[4] = 10;
		transp[5] = 10;

		if (clicks == 2) {
			//save(tableArray, 'my.txt');
			//save(table, 'final.csv');
			file = new File('kk5', '.txt');
			file.open('w');
			file.write(table);
			file.close();
		}

		clicks = clicks + 1;
	}
	play = false;
	buttons = false;
	completed = false;
}

function windowResized() {
	//SUBMIT BUTTON
	if (change === true) {
		var eraseButton = buttonOld.remove();
		var posRectY = windowHeight / 1.45;
		var nor = 1.8;
		posRectX = 3 * (windowWidth / 3.7) / nor;
		buttonNew = createButton('SUBMIT YOUR ANSWER');
		buttonNew.style('width', '100px', '100px');
		buttonNew.position(posRectX, posRectY + windowHeight / 5);
		buttonNew.mousePressed(saveAndNext);
		buttonOld = buttonNew;
	} else {
		var eraseButton2 = buttonID.remove();
		posInputY = [];
		posInputX = windowWidth / 2;
		buttonIDNew = createButton('SUBMIT PERSONAL INFORMATION');
		buttonIDNew.style('width', '100px', '300px');
		buttonIDNew.position(posInputX + 20, windowHeight / 1.8);
		buttonIDNew.mousePressed(changeMode);
		buttonID = buttonIDNew;
	}

}

function exportcsv() { 
	saveTable(table, nameFile);
}

function changeMode() {

	N = inputName.value();
	A = inputAge.value();
	S = inputSex.value();
	IP = inputInsPlaying.value();
	I = inputIns.value();
	IY = inputYearsPlaying.value();

	if (N !== '' && A !== '' && S !== '' && IP !== '' && I !== '' && IY !== '') {
		change = true;

		nameFile = A + N;

		newRow = table.addRow();
		newRow.setString('Name', N.toLowerCase()); // change this for name of student
		newRow.setNum('Age', A.toString());
		newRow.setString('Sex', S.toLowerCase());
		newRow.setString('Instrument', IP.toLowerCase());
		newRow.setString('Ins', I.toLowerCase());
		newRow.setNum('Years', IY.toString());

		exportcsv();
		//print(table);

		tableArray = table.getArray();
		for (var i = 0; i < tableArray.length; i++) {
			print(tableArray[i]);
		}

		//ERASE BUTTON AND INPUTS
		var eraseButtonID = buttonID.remove();
		var eraseName = inputName.remove();
		var eraseAge = inputAge.remove();
		var eraseSex = inputSex.remove();
		var eraseInstrument = inputInsPlaying.remove();
		var eraseIns = inputIns.remove();
		var eraseYears = inputYearsPlaying.remove();

		//SUBMIT BUTTON
		var posRectY = windowHeight / 1.45;
		var nor = 1.8;
		posRectX = 3 * (windowWidth / 3.7) / nor;

		buttonOld = createButton('SUBMIT YOUR ANSWER');
		buttonOld.style('width', '100px', '100px');
		buttonOld.position(posRectX, posRectY + windowHeight / 5);
		buttonOld.mousePressed(saveAndNext);

		//CLICKS
		display(clicks);
	}


}

Thanks heaps in advance!
Pablo.

Pablo, from your previous example, you need to check the reference and check that you are using the calls properly. You have a table with two columns: number and name. However, in addBicho() you are adding columns (?). You might want to do this instead:

for (i = 0; i < 10; i++) {
                table.set(i,"number",i*10);
                table.set(i,"name","username_"+i0);
        }

I did not test this code as I am not setup in js and I have to load p5.dom as well. For the time being, just work in this small code and make it work before you move to your bigger source code. Keep the reference close by: https://p5js.org/reference/#/p5.Table and try understanding their examples.

Kf

Hi Kf,

Thanks a lot for your help. I’ve added your piece of code but it is still not saving the table (last function), which is the main issue. Any thoughts?

Thanks a lot,
P.

var table;
var buttonB;
var newRow;

function setup() {
	table = new p5.Table();
	table.addColumn('number');
	table.addColumn('name');


	buttonID = createButton('SUBMIT');
	buttonID.style('width', '100px', '300px');
	buttonID.position(windowWidth / 2 + 20, windowHeight / 1.8);
	buttonID.mousePressed(addBicho);

	//printTable();

}

function draw() {

}

function addBicho() {

	var newRow = table.addRow();
	for (i = 0; i < 10; i++) {
		newRow.set("number", i * 10);
		newRow.set("name", "username_" + 10);
	}
	
	printTable();
}

function printTable() {
	saveTable(table, 'bichos.csv');
}

https://p5js.org/reference/#/p5/saveTable

Check this code here. I removed any dependence on the DOM for this test. Click on the canvas, it will print the table in the standard output (Open you dev tools >> console in your fav browser) . It should also ask you if you want to save the file as well. Tested on firefox.

Kf

var table;
var newRow;


function setup() {
  createCanvas(300, 500);
  table = new p5.Table();
  table.addColumn('number');
  table.addColumn('name');
}
function draw() {
}



function mousePressed() {    
  console.log("addbicho");

  for (i = 0; i < 10; i++) {
    var newRow = table.addRow();
    newRow.set("number", i * 10);
    newRow.set("name", "username_" + 10);
  }

  printTable();
}
function printTable() {


  //print the results

  for (r = 0; r < table.getRowCount(); r++)
    for (var c = 0; c < table.getColumnCount(); c++) {
      print(table.getString(r, c));
    }


  saveTable(table, 'bichos.csv');
}

1 Like