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)
|
||||