tested a solar system map
hexahigh
BIN
other/ow-map/images/ash.webp
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
other/ow-map/images/attlerock.webp
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
other/ow-map/images/brittle.webp
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
BIN
other/ow-map/images/dark.webp
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
other/ow-map/images/ember.webp
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
other/ow-map/images/eye.webp
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
BIN
other/ow-map/images/giant.webp
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
other/ow-map/images/inter.webp
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
BIN
other/ow-map/images/station.webp
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
other/ow-map/images/sun.webp
Normal file
|
After Width: | Height: | Size: 9.0 KiB |
BIN
other/ow-map/images/timber.webp
Normal file
|
After Width: | Height: | Size: 9.7 KiB |
BIN
other/ow-map/images/white.webp
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
23
other/ow-map/index.css
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.object {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
/* More styles here */
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet {
|
||||||
|
/* Styles for planets here */
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-orbit {
|
||||||
|
/* Styles for orbits here */
|
||||||
|
}
|
||||||
|
|
||||||
|
#solar-system {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
21
other/ow-map/index.html
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Outer wilds solar system</title>
|
||||||
|
<script src="index.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="solar-system">
|
||||||
|
<div class="object p-orbit"></div>
|
||||||
|
<img class="object" src="images/sun.webp" alt="" id="sun">
|
||||||
|
<img class="object planet" src="images/station.webp" alt="" id="station">
|
||||||
|
<img class="object planet" src="images/ash.webp" alt="" id="ash">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
10
other/ow-map/index.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const planets = document.querySelectorAll('.planet')
|
||||||
|
let radians = new Array(planets.length).fill(0)
|
||||||
|
setInterval(() => {
|
||||||
|
planets.forEach((planet, index) => {
|
||||||
|
let x = Math.cos(radians[index]) * 100; // 100 is the radius of the orbit
|
||||||
|
let y = Math.sin(radians[index]) * 100; // 100 is the radius of the orbit
|
||||||
|
planet.style.transform = `translate(${x}px, ${y}px)`;
|
||||||
|
radians[index] += 0.02 // Adjust this value to change speed
|
||||||
|
})
|
||||||
|
}, 1000/60)
|
||||||