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; bottom: 20px;
overflow: hidden; overflow: hidden;
right: 20px; right: 20px;
display: none;
} }
#access-tab img { #access-tab img {

0
public/js/capture.js

57
public/js/main.js

@ -13,6 +13,12 @@
let composer let composer
let pixelSize = 8 let pixelSize = 8
let container_element = document.getElementById('container-index') 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 containerW = container_element.offsetWidth
let containerH = container_element.offsetHeight let containerH = container_element.offsetHeight
@ -28,7 +34,7 @@
SetupRenderer() SetupRenderer()
scene = new THREE.Scene() scene = new THREE.Scene()
SetupCamera() SetupCamera()
//SetupControls() SetupControls()
composer = new EffectComposer( renderer ); composer = new EffectComposer( renderer );
if (window.innerWidth <= 1024) if (window.innerWidth <= 1024)
@ -116,6 +122,9 @@
//texture.offset.x += 0.001; //texture.offset.x += 0.001;
composer.render() composer.render()
//renderer.render(scene, camera) //renderer.render(scene, camera)
if (captureFrames && cFrames < totalCFrames) {
captureFrame();
}
} }
function getContainerDimensions(){ function getContainerDimensions(){
@ -135,6 +144,52 @@
renderer.setSize(containerW, containerH) 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() init()

3
templates/grph.html

@ -7,5 +7,8 @@
<div id="container-index"> <div id="container-index">
</div> </div>
</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/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 %} {% endblock content %}
Loading…
Cancel
Save