MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-09-27 20:48:56 +02:00
Code Issues Projects Releases Wiki Activity

actual code for time travel

Browse source
This commit is contained in:
Alex Tsernoh 2022-04-05 19:17:39 +01:00
parent 3c490c0be6
commit 34bb67665c
No known key found for this signature in database
GPG key ID: 5A0BA13F0012A4BA
2 changed files with 44 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
web/_js/time.js Normal file
View file

@ -0,0 +1,40 @@
const timeConfig = [
{
timestamp: 16000000,
url: "/_img/place-indexed-4.png",
image: null
},
{
timestamp: 16000030,
url: "/_img/place-indexed-5.png",
image: null
},
{
timestamp: 16000060,
url: "/_img/place-indexed.png",
image: null
},
];
let slider = document.getElementById("timeControlsSlider");
let image = document.getElementById("image");
// SETUP
slider.max = timeConfig.length;
slider.value = timeConfig.length;
updateTime(timeConfig.length)
slider.oninput = (event) => {
updateTime(parseInt(event.target.value))
};
async function updateTime(index) {
let configObject = timeConfig[index-1];
if (!configObject.image) {
console.log("fetching");
let fetchResult = await fetch(configObject.url);
let imageBlob = await fetchResult.blob();
configObject.image = URL.createObjectURL(imageBlob);
}
image.src = configObject.image;
}

6
web/index.html
View file

@ -99,7 +99,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<canvas id="linesCanvas"></canvas>
<div id="innerContainer">
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
<img id="image" src="./_img/place-indexed-final-place.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
<img id="image" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
</div>
</div>
@ -144,7 +145,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<button title="Zoom Out" id="zoomOutButton"></button>
</div>
<div id="timeControls">
<input type="range" min="1" max="10" value="10" class="slider" id="timeControlsSlider">
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
</div>
<div id="author">
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
@ -240,6 +241,7 @@ <h2>Donation Links</h2>
Code forked by <a href="https://place-atlas.stefanocoding.me/" target="_blank" rel="author">Stefano Haagmans</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
</div>
</div>
<script type="text/javascript" src="./_js/time.js?version=1.0.3"></script>
<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>