From ad6b22e43d58e2274d300572b3671d4a31436c73 Mon Sep 17 00:00:00 2001
From: Cailean Finn <Caileannn@gmail.com>
Date: Tue, 24 Sep 2024 17:50:32 +0100
Subject: [PATCH] graphics

---
 public/js/main.js | 60 +++++++++++++++++++++++++----------------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index 31bb4b1..a943152 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -16,8 +16,8 @@
 
 	let cFrames = 0;
 	let isCapturing = false;
-	const totalCFrames = 600; // Number of frames to capture
-	const zip = new JSZip(); // Create a new JSZip instance
+	let frame_array = []
+	const totalCFrames = 1200; // Number of frames to capture
 	let captureFrames = false;
 	
 	let containerW = container_element.offsetWidth
@@ -144,30 +144,34 @@
 		renderer.setSize(containerW, containerH)
 	})
 
-// Function to capture the canvas and save it as PNG data in the zip
-function captureFrame() {
-const canvas = renderer.domElement;
-canvas.toBlob((blob) => {
-        // Add the blob to the ZIP archive
-        zip.file(`frame-${cFrames}.png`, blob);
-        cFrames++;
-
-        // If all frames are captured, zip and download
-        if (cFrames >= totalCFrames) {
-            zipAndDownload();
-        }
-    }, 'image/png');
-}
-
-// Function to zip and download the frames
-function zipAndDownload() {
-    zip.generateAsync({ type: 'blob' }).then(function (content) {
-        // Create a download link for the zip file
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(content);
-        link.download = 'frames.zip';
-        link.click();
-    });
+	function captureFrame() {
+		renderer.domElement.toDataURL('image/png').replace("image/png", "image/octet-stream");
+		let imgData = renderer.domElement.toDataURL("image/png");
+		frame_array.push(imgData);
+		cFrames++;
+	
+		// If last frame, prepare the download
+		if (cFrames === totalCFrames) {
+			prepareDownload();
+		}
+	}
+	
+function prepareDownload() {
+	let zip = new JSZip();
+	console.log('zipping..')
+	frame_array.forEach((dataUrl, index) => {
+		let imgData = dataUrl.split(',')[1]; // Get base64 data part
+		zip.file(`frame_${index.toString().padStart(4, '0')}.png`, imgData, {base64: true});
+	});
+	console.log('zipped!')
+	zip.generateAsync({type: "blob"})
+	.then(function(content) {
+		const a = document.createElement("a");
+		a.href = URL.createObjectURL(content);
+		a.download = "frames.zip";
+		console.log('zip dl ready!')
+		a.click();
+	});
 }
 
 // Event listener for the spacebar key press
@@ -176,15 +180,15 @@ document.addEventListener('keydown', (event) => {
       isCapturing = !isCapturing; // Toggle capturing
 
       if (isCapturing) {
+		cFrames = 0; // Reset frame counter
         captureFrames = true
         console.log('Capture started...');
       } else {
         captureFrames = false
-        cFrames = 0; // Reset frame counter
         console.log('Capture paused...');
       }
     }
-  });
+});
 
 
 	init()