graphics

public/css/styles.css

@@ -83,6 +83,7 @@ hr {
 	bottom: 20px;
 	overflow: hidden;
 	right: 20px;
+	display: none;
 }
 
 #access-tab img {

public/js/main.js

@@ -14,6 +14,12 @@
 	let pixelSize = 8
 	let container_element = document.getElementById('container-index')
 
+	let cFrames = 0;
+	let isCapturing = false;
+	let frame_array = []
+	const totalCFrames = 1200; // Number of frames to capture
+	let captureFrames = false;
+	
 	let containerW = container_element.offsetWidth
 	let containerH = container_element.offsetHeight
 
@@ -28,7 +34,7 @@
 		SetupRenderer()
 		scene = new THREE.Scene()
 		SetupCamera()
-		//SetupControls()
+		SetupControls()
 
 		composer = new EffectComposer( renderer );
 		if (window.innerWidth <= 1024)
@@ -116,6 +122,9 @@
 		//texture.offset.x += 0.001;
 		composer.render()
 		//renderer.render(scene, camera)
+		if (captureFrames && cFrames < totalCFrames) {
+			captureFrame();
+		}
 	}
 
 	function getContainerDimensions(){
@@ -135,6 +144,52 @@
 		renderer.setSize(containerW, containerH)
 	})
 
+	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
+document.addEventListener('keydown', (event) => {
+    if (event.code === 'Space') { // Check if spacebar is pressed
+      isCapturing = !isCapturing; // Toggle capturing
+
+      if (isCapturing) {
+		cFrames = 0; // Reset frame counter
+        captureFrames = true
+        console.log('Capture started...');
+      } else {
+        captureFrames = false
+        console.log('Capture paused...');
+      }
+    }
+});
+
 
 	init()
 

templates/grph.html

@@ -7,5 +7,8 @@
 		<div id="container-index">
 		</div>
 	</div>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
 	<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
+	<script type="module" src="{{ url_for('static', filename='js/capture.js') }}"></script>
+	<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
 {% endblock content %}