JuliusHerrmann/simulation_react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

everyting but gif is missing 1 frame

Browse Source
This commit is contained in:
JuliusHerrmann 2022-01-07 02:00:50 +01:00
parent bf6f99e87c
commit 4042f232ff
2 changed files with 64 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Simulation/visualizations/GIFGenerator.jsx
View File

@ -21,7 +21,8 @@ class GIFGenerator extends React.Component {
return; return;
} }
this.setState({rendering: true}); this.setState({rendering: true});
this.setState({duration: Math.abs(this.state.duration)}); this.setState({duration: Number(Math.abs(this.state.duration))},
() => {
var gif = new GIF( { var gif = new GIF( {
workers: 2, workers: 2,
quality: 10, quality: 10,
@ -50,28 +51,31 @@ class GIFGenerator extends React.Component {
clearInterval(this.animationId); clearInterval(this.animationId);
this.props.setState({step: 0}, () => { this.props.setState({step: 0}, () => {
this.stepTime = 1; this.animationId = setInterval(this.grabImageAndNextStep.bind(null, gif, stepBefore,this.state.duration * 1000 / this.props.animationLength), 1);
//this.animationId = setInterval(this.visualizeOneStep, this.stepTime);
this.animationId = setInterval(this.grabImageAndNextStep.bind(null, gif, stepBefore), this.stepTime);
this.props.setState({playing: true}); this.props.setState({playing: true});
}); });
});
} }
grabImageAndNextStep = (gif, stepBefore) => { grabImageAndNextStep = (gif, stepBefore, delay) => {
//check if we are at the end //check if we are at the end
if (this.props.state.step > this.props.animationLength) { if (this.props.state.step >= this.props.animationLength) {
//add last frame and finish
this.props.visualizeOneStep();
clearInterval(this.animationId);
gif.addFrame(document.querySelectorAll("canvas")[2],
{copy: true, delay: delay});
//reset animation
this.props.setState({playing: false});
this.props.setState({step: stepBefore}); this.props.setState({step: stepBefore});
this.props.visualizeOneStep(false); this.props.visualizeOneStep(false);
clearInterval(this.animationId);
gif.render(); gif.render();
this.props.setState({playing: false});
return; return;
} }
this.props.visualizeOneStep(); this.props.visualizeOneStep();
//select the canvas (this is a bit hacky but ey it works) //select the canvas (this is a bit hacky but ey it works)
gif.addFrame(document.querySelectorAll("canvas")[2], gif.addFrame(document.querySelectorAll("canvas")[2],
// there is probably a minimum cap.... I'm not sure {copy: true, delay: delay});
{copy: true, delay: this.state.duration / this.props.animationLength});
} }
getButtonText = () => { getButtonText = () => {

1
src/Simulation/visualizations/Graph.jsx
View File

@ -124,7 +124,6 @@ class Graph extends React.Component {
this.setState({playing: true}); this.setState({playing: true});
return; return;
} }
console.log("here")
this.neverPlayed = false; this.neverPlayed = false;
//check if we pause the animation //check if we pause the animation
clearInterval(this.animationId); clearInterval(this.animationId);