Space Screensaver
- 8 Devlogs
- 4 Total hours
A simple screensaver that displays basic information such as the time, and looks beautiful! Space themed! Full screen my screensaver tab, extend the display timeout on your device, and enjoy.
Ship #1
More changes to behind the scenes, and I added a page that is the same, without the particles, but with a warning that can increase the risk of screen burn. I also added an image to the read me. The new page can be accessed by clicking on the sun or moon, and reverted by doing the same.
I have been doing quite a few things behind-the-scenes with the code. The most visible change, however, was the vertical randomisation of the header location. I realised the time/date could burn in, so it now jumps up and down slightly, enough to change pixels sometimes.
I have been hard at work and now I have managed the following feats:
- A background image that changes with the moon and the sun depending on the time of day.
- 3 dots (that look like stars at night, and I might change it for day, but for now they are just circles too) that randomly fade in and out to assist with screensaving. The randomisation and positioning took a while, and it is hard to work on positions for images that small.
- My final feat was adding text that shows the time and date (live-updates using the JavaScript).
That took all of my brain power. After the width calculations, this was slightly easier, also because I have a basic understanding of parabolas, and coordinates on software but it still had me scratching my head so much 🤣. The moon and sun now go across an entire cycle during the day and night (I have defined night as a time when it starts getting dark, at least where I am which is 7pm). At 6am it switches back to the sun, and does the parabola again.
I have got the moon moving horizontally every minute!! It doesn’t go in an arc yet, so now I will work on height using parabola equation: y=a(x+b)^2+c
I have got it so during the day, the sun will show on the screen. At night time, the moon shows. This is quite a big feat as I haven’t done much with JavaScript before. I have started doing equations to calculate the position depending on the minutes past 12am or 12pm (this time is also local to the browser, not my server).
I have created the repo, some basic JavaScript to keep track of the hour of day (to have a different display for day and night) and a video of the moon. However, the video is quite shaky, and there isn’t a really good way to implement this for the screensaver, so I am considering switching to an image of a moon, which I will then position using JavaScript, and the time of day. I can do the same with the sun. I will attempt this, and I will try using my new-found parabola skills learnt at school to write quadratic formulas to get the rising and falling of the moon right, especially for different scale screens.