Skip to content

Commit

Permalink
wip moon
Browse files Browse the repository at this point in the history
  • Loading branch information
@faafaa123
faafaa123 committed Nov 1, 2024
1 parent fffc4a8 commit a19907a
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 677 deletions.
2 changes: 1 addition & 1 deletion classes/moon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class moon {
console.log(moonrise)
console.log(moonset)


}).catch(async (error: AxiosError) => {
console.log(error.response);
})
Expand Down
123 changes: 101 additions & 22 deletions classes/sun.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export class sun {
latitude = 51.407785;
longitude = 9.121936;

apiUrl = `https://api.sunrise-sunset.org/json?lat=${this.latitude}&lng=${this.longitude}&formatted=0`;
apiUrl = `https://api.sunrise-sunset.org/json?lat=${this.latitude}&lng=${this.longitude}&date=${moment().format('YYYY-MM-DD').toString()}&formatted=0`;

dummy_response: any = { "results": { "date": "2024-10-23", "sunrise": "7:27:17 AM", "sunset": "6:19:50 PM", "first_light": "5:58:05 AM", "last_light": "7:49:02 PM", "dawn": "7:00:07 AM", "dusk": "6:47:01 PM", "solar_noon": "12:53:34 PM", "golden_hour": "5:43:03 PM", "day_length": "10:52:33", "timezone": "America/New_York", "utc_offset": -240 }, "status": "OK" }

Expand All @@ -26,10 +26,18 @@ export class sun {
startAtProgress: any
startTime: any

isDay!: boolean;
moonMesh!: THREE.Mesh;
moonlightDuration!: any;
elapsedMoonlight!: moment.Duration


constructor(
scene: THREE.Scene,
) {
this.scene = scene;
console.log('api current day')
console.log(this.apiUrl)
}

async main() {
Expand All @@ -42,29 +50,75 @@ export class sun {

this.daylightDuration = moment.duration(this.sunset.diff(this.sunrise));

if (this.currentTime.isAfter(this.sunrise) && this.currentTime.isBefore(this.sunset)) {
if (this.currentTime.isAfter(this.sunrise) && this.currentTime.isBefore(this.sunset)) {// is day
this.isDay = true;
this.elapsedDaylight = moment.duration(this.currentTime.diff(this.sunrise));
}

// Adding a circular disc
this.radius = 10;
const segments = 512;
const circleGeometry = new THREE.CircleGeometry(this.radius, segments);
const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xC58F05, side: THREE.DoubleSide });
this.disc = new THREE.Mesh(circleGeometry, circleMaterial);
this.disc.rotation.x = Math.PI / 2;
this.disc.position.y = 1
this.disc.position.x = -99
this.disc.position.z = 20
this.scene.add(this.disc);

// 24 rays with a length of 10 units
// this.addSunRays(this.disc, 24, 7);

// Animation parameters
this.duration = this.daylightDuration.asSeconds(); // in seconds
this.startAtProgress = 1 - 2.73 * Math.pow(10, -8) * (this.daylightDuration.asMilliseconds() - this.elapsedDaylight.asMilliseconds())
this.startTime = null;
// Adding a circular disc
this.radius = 10;
const segments = 512;
const circleGeometry = new THREE.CircleGeometry(this.radius, segments);
const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xC58F05, side: THREE.DoubleSide });
this.disc = new THREE.Mesh(circleGeometry, circleMaterial);
this.disc.rotation.x = Math.PI / 2;
this.disc.position.y = 1
this.disc.position.x = -99
this.disc.position.z = 20
this.scene.add(this.disc);

// 24 rays with a length of 10 units
// this.addSunRays(this.disc, 24, 7);

// Animation parameters
this.duration = this.daylightDuration.asSeconds(); // in seconds
this.startAtProgress = 1 - 2.73 * Math.pow(10, -8) * (this.daylightDuration.asMilliseconds() - this.elapsedDaylight.asMilliseconds())
this.startTime = null;
}
else { // is night
this.isDay = false;
const moonRadius = 10;
const moonSegments = 512;
const moonGeometry = new THREE.CircleGeometry(moonRadius, moonSegments);

const moonTexture = new THREE.TextureLoader().load('./assets/moon.png');
const moonMaterial = new THREE.MeshBasicMaterial({
map: moonTexture,
side: THREE.DoubleSide
});

this.moonMesh = new THREE.Mesh(moonGeometry, moonMaterial);
this.moonMesh.position.y = 1;
this.scene.add(this.moonMesh);

this.moonMesh.rotation.x = Math.PI / 2;

// this.daylightDuration = moment.duration(this.sunset.diff(this.sunrise));
this.apiUrl = `https://api.sunrise-sunset.org/json?lat=${this.latitude}&lng=${this.longitude}&date=${moment().add(1, 'day').format('YYYY-MM-DD').toString()}&formatted=0`;
await axios.get(
this.apiUrl
).then(async (result: AxiosResponse) => {
const responseData: any = result.data;
console.log('response next day')
console.log(responseData)
// Animation parameters
console.log(this.sunset)
console.log(responseData.results.sunrise)
this.moonlightDuration = moment.duration(moment(responseData.results.sunrise).diff(this.sunset))
console.log('moon duration')
console.log(this.moonlightDuration)
this.elapsedMoonlight = moment.duration(moment().diff(moment(responseData.results.sunrise)));
console.log('elapsedMoonLight')
console.log(this.elapsedMoonlight)

this.startAtProgress = 1.94 * Math.pow(10, -8) * (this.moonlightDuration.asMilliseconds() - this.elapsedMoonlight.asMilliseconds())
console.log('this.startAtProgress')
this.startAtProgress = 0.7
console.log(this.startAtProgress)
this.startTime = null;
}).catch(async (error: any) => {
console.log(error);
})
}

}).catch(async (error: AxiosError) => {
console.log(error.response);
Expand Down Expand Up @@ -124,6 +178,31 @@ export class sun {
}
}

animateMoon(time: number) {
// Set start time on first frame
if (!this.startTime) this.startTime = time;

// Calculate elapsed time in seconds
const elapsedTime = (time - this.startTime) / 1000; // Convert to seconds

// Normalize elapsed time for the animation, starting at 30%
const t = Math.min((elapsedTime / 21000) + this.startAtProgress, 1); // Normalize to [0.3, 1]

// Define control points for the Bezier curve
const p0 = { x: -99, z: 20 }; // Start position
const p1 = { x: 0, z: -70 }; // Peak position (control point)
const p2 = { x: 99, z: 20 }; // End position

// Calculate the current position on the curve
const position = this.getBezierPoint(t, p0, p1, p2);
this.moonMesh.position.set(position.x, 1, position.z);
// console.log(this.moonMesh.position)
// Stop animation if completed
if (t >= 1) {
console.log('Animation finished');
}
}

getBezierPoint(t: number, p0: { x: any; z: any; }, p1: { x: any; z: any; }, p2: { x: any; z: any; }) {
const x = Math.pow(1 - t, 2) * p0.x + 2 * (1 - t) * t * p1.x + Math.pow(t, 2) * p2.x;
const z = Math.pow(1 - t, 2) * p0.z + 2 * (1 - t) * t * p1.z + Math.pow(t, 2) * p2.z;
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<div id="uhrzeit"></div>
<div id="datum"></div>
</div>
<div id="sunset"></div>
<!-- <div id="sunset"></div> -->
<script type="module" src="/main.ts"></script>
</body>

Expand Down
14 changes: 9 additions & 5 deletions main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ async function init() {
theSun = new sun(scene);
await theSun.main()

theMoon = new moon(scene)
await theMoon.main()
// theMoon = new moon(scene)
// await theMoon.main()

// CSS Overlay
setInterval(updateClock, 1000);
Expand All @@ -72,15 +72,19 @@ function updateClock() {
uhrzeit!.textContent = moment().format('LT').toString();
datum!.textContent = moment().format('ll').toString();

const sunset = document.getElementById('sunset');
sunset!.textContent = `Sonnenuntergang in ${theSun.daylightDuration.hours() - theSun.elapsedDaylight.hours()} Stunden`;
// const sunset = document.getElementById('sunset');
// sunset!.textContent = `Sonnenuntergang in ${theSun.daylightDuration.hours() - theSun.elapsedDaylight.hours()} Stunden`;
}

const clock = new THREE.Clock();

function animate(time: number) {
requestAnimationFrame(animate);
theSun.animateSun(time)
if (theSun.isDay) {
theSun.animateSun(time)
} else {
theSun.animateMoon(time)
}
render()
}

Expand Down
Loading

0 comments on commit a19907a

Please sign in to comment.