Compare commits

...

2 Commits

Author SHA1 Message Date
Cailean Finn ad6b22e43d graphics 3 months ago
Cailean Finn 03772d1a67 graphic demo for ig 3 months ago
  1. 1
      public/css/styles.css
  2. 0
      public/js/capture.js
  3. 57
      public/js/main.js
  4. 3
      templates/grph.html

1
public/css/styles.css

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

0
public/js/capture.js

57
public/js/main.js

@ -13,6 +13,12 @@
let composer
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()

3
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 %}
Loading…
Cancel
Save