mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 20:48:56 +02:00
actual code for time travel
This commit is contained in:
parent
3c490c0be6
commit
34bb67665c
2 changed files with 44 additions and 2 deletions
40
web/_js/time.js
Normal file
40
web/_js/time.js
Normal 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;
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue