graphic demo for ig

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;
+	const totalCFrames = 600; // Number of frames to capture
+	const zip = new JSZip(); // Create a new JSZip instance
+	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,48 @@
 		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();
+    });
+}
+
+// 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) {
+        captureFrames = true
+        console.log('Capture started...');
+      } else {
+        captureFrames = false
+        cFrames = 0; // Reset frame counter
+        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 %}