Adds geometry to downloadable obj files functionality

[diyaayay]

Resolves #6769
Changes:
1- Added obj file support to save().
2- Created a method called geometryToObj() in p5.Geometry.js .

Screenshots of the change:
Sketch used:

let particles;
let button;

function setup() {
  createCanvas(400, 400, WEBGL); // Increase canvas size
  button = createButton('New');
  button.mousePressed(makeParticles);
  makeParticles();
  particles.geometryToObj();
}

function makeParticles() {
  if (particles) freeGeometry(particles);

  particles = buildGeometry(() => {
    for (let i = 0; i < 2; i++) {
      push();
      // Adjust translation values to fit within the canvas
      translate(
        randomGaussian(-50, 50),
        randomGaussian(-50, 50),
        randomGaussian(-50, 50)
      );
      sphere(5);
      pop();
    }
  });
}

Downloaded Obj File:

Sketch to check the downloaded obj file:

let octa;
function preload() {
 octa = loadModel('model.obj');
}
function setup() {
    createCanvas(400, 400, WEBGL);
}

function draw() {
 background(200);
   model(octa);
   }

Downloaded obj file on canvas:

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[diyaayay]

@davepagurek Please take a look and let me know if this works and if further changes are needed, maybe unit tests, examples, or even how I've implemented this. Thanks.

[davepagurek]

It's looking good so far! Some user-facing documentation would be great.

For unit tests, some of our tests use this method to test downloads, maybe we can try using it too?

p5.js/test/js/p5_helpers.js

Line 27 in ef4647f

function testWithDownload(name, fn, asyncFn = false) {

an example of its usage:

p5.js/test/unit/io/saveTable.js

Lines 99 to 112 in ef4647f

	testWithDownload(
	'should download a file with expected contents (tsv)',
	async function(blobContainer) {
	myp5.saveTable(myTable, 'filename', 'tsv');
	let myBlob = blobContainer.blob;
	let text = await myBlob.text();
	let myTableStr = myTable.columns.join('\t') + '\n';
	for (let i = 0; i < myTable.rows.length; i++) {
	myTableStr += myTable.rows[i].arr.join('\t') + '\n';
	}
	assert.strictEqual(text, myTableStr);
	},
	true
	);

[davepagurek]

Nice work on this method, nice and concise!

[davepagurek]

save() is a user-facing function, so if this method uses it, users could also technically use it, but they would have to know to pass an obj string through here. Maybe instead we could use the internal downloadFile method?

p5.js/src/image/image.js

Line 227 in 37d3324

p5.prototype.downloadFile(blob, filename, extension);

[davepagurek]

Maybe we can call this saveObj so users would call it like geom.saveObj() instead of geom.geometryToObj(), which feels a tad redundant?

[diyaayay]

saveObj sounds much better :)

[diyaayay]

@davepagurek made some changes, let me know if these work.Thanks.

[davepagurek]

Great work on the writing for the documentation! I just have a few things left for the example.

I also thought of one more thing for the exporter itself about handling cases where we don't have either normals or texture coordinates.

[davepagurek]

Can we do this on button click maybe? I think going to the reference page and immediately having the file immediately download might be a bit jarring.

[davepagurek]

Do you think we can make the canvas 100x100 (and scale accordingly in draw)? Right now it squishes the code:

[davepagurek]

If we have normals and texture coordinates, I think we might have to use f 1/1/1 2/2/2 3/3/3 to specify that the face does in fact have vertices and faces? We read it out from the slashes here:

p5.js/src/webgl/loading.js

Line 252 in 37d3324

const vertParts = vertString.split('/');

It might take a few if statements to do e.g. f 1//1 2//2 3//3 if we have normals but no texture coordinates.