1hr challenge to make perry the period blood

This is a small site that has a short story of perry the period blood

It is based off an inside joke with my friends

I challenged myself to build it in an hour

I guess it worked, now i can do something useful!

MAJORRR Update

First app, context menu, and a LOT of stars 😭

Today I wanted to add an app. Not a standard one like notepad, music, file explorer… something that is different. So, naturally, I spent two hours coding my own star map using a ton of stars from the yale bright star catalogue (okay maybe not a ton but you get the idea). It takes the users location, calculates the chunk of sky above them (yes, you can do this) and shows the major stars visible to the naked eye on a turntable style minimap.

What the heck am I gonna do next

• for one, the text on the map rotates with everything so i gotta fix that
• THEN i’ll add a normal app like notepad lol
• a background needs to be added too, also I might add a bg switcher.

ohhhh yeah and i added stuff from the guide like the topbar and time, that’s not the star of the show for this log though lol.

astrOS day 1:

I want to finish this project really efficiently, so I have mapped out what features I want (you will see as they come). Today, I finished the boot screen and styling for it, and made the file structure.

Not much, only 40 mins, but since its a roughly 2hr 30m project, 30m a day means I finish in 5 days.

Next devlog should hopefully be finishing the desktop design, probably ~1hr.

I FORGOT TO MAKE A LOG

Okay so for the last 4 hours i’ve been fighting with my shader code as it didnt work for a long time, but it finally works.

What was the issue?

• when using shaders on pngs, sometimes the edges and transparent areas render weird
• I thought my code was wrong, but in reality I just had to switch the image type.
• issue #2 was that the blue circle, which is the lens (had to make it obvious for debugging) was firstly having inverted movement to the actual distortion field, and secondly sometimes just not showing up.
• to fix the inverted movement, I just mapped the actual circle’s position to the field’s coords. (btw, the inversion was caused by webgl canvas and p5.js canvas having different coordinate systems)
• to fix it not showing up, that was just a layering issue.

Overall, that 4 hour period was a rollercoaster and i’m glad its over. If you want to see how it broke (I didnt devlog this cause I was too preoccupied) there’s a video devlog on my instagram:

https://www.instagram.com/urged.st/

Been toying around with distortion lately, I’m still torn between making a full on shader or just having distortion to look like lensing. Most of my time spent has been trial and error with different ways of distorting, from basic inward radial distortion to a more complex particle tracing distortion. I am gonna try and perfect this before moving on I think, because if I can’t get this right then in my opinion I have a long way to go before making a shader.

• added mass slider, larger masses = more gravity, so more lensing/distortion!

• made the source draggable, but I don’t know how useful this really is lol (maybe easier to centre, to see einstein rings?)

Nothing much, added my github link as a button, attempted to add touchscreen controls for the guys on ipads but unfortunately failed miserably… it kept messing with the actual mouse moving code and I just couldn’t fix it. Might work on it sometime if I get bored of working on G-Lens lol (my other project)

G-Lens Begins!

This is, to say the least, gonna be hard.

I have a rough idea of what I’m gonna do, but really i have never made a shader before or used GLSL.

Luckily I decided not to do this today as I was already tired and decided to make a prototype which rather than solving the lens equation, simply uses a radial distort to… well distort the space around it. I did initially try distort a point mass (yeah my bad) so obviously had to switch it to a bunch of particles densely packed. This actually shows a distort, even if its not accurate to astrophysics (this isn’t the goal for today)

Next steps? think about how i will integrate actual physics into this, and read MORE research papers.

It is done!!

I have deployed this project at https://pulsarsimulator.vercel.app/ , check it out!

Final Steps:

• polish information on the article and other cards
• gather feedback from users and work on that before I ship
• hit 10 hours lol I am still on 9
• make the fade in animation for the cards occur on startup too, currently it only occurs when you click the button.
• MAYBE i might make custom sliders but i think this is fine

This is one of 4 simulators, I will research for the second one today, and if possible complete a demo

Pulsar simulator MASSIVE UI update…

So i got really tired of the default p5.js fonts so I decided to change things up, and in the process I ended up wanting to redesign the info box i had made initially (you can see the previous designs on my insta). Before it was static and looked like it had come out of a powerpoint presentation so I learnt how to add fonts and found space mono, which i really liked. I also had to redesign the previous cards i had made because they were again static and boring…

I kept running into issues and limitations with the p5.js canvas as before i was just using that for the darkened overlay and cards, so i went ahead and redid the entire overlay as pure html and css because i had more experience in that and it was easier to bend to my will.

So 3hrs logged brings Pulsar Sim this new revamped landing/info page!

• I also changed some of the fonts on the project itself, I dont know if i you can add multiple pics onto a devlog yet but i’ll send a screenshot in the next one.

Next step for me is to make the middle card expandable, and include more detailed explanations on neutron stars and pulsars, as the information i provided initially is really basic and surface-level.

I’d say this was a really successful UI overhaul - any feedback you guys have would be really valuable, i’ll try post more to showcase everything, and if you want to see videos of the project itself they are on my instagram.

UI changes

• changed up that boring graph, I added gridlines and a scale, changed the waveform colour to green to make it easier to see.

New features

• pulse detection now factors in distance (totally didn’t forget to add this before lol) so pulses from further away won’t be detected as they are too weak (as in real life!)

Next Ideas

• I want to add more information, probably a toggleable menu in the corner with some basic information about pulsars

• maybe a catalogue of real pulsars?

• a pulse rate tooltip, I am definitely adding this one in the next session its too essential to leave out

• probably gonna switch some of the UI up, the logic is working fine at the moment I’ve spent a lot of time on it so might focus on aesthetics for an hour or so

Note about the screenshot:
You can see that the beam is covering the observer line of Earth, and there is some signal being produced, however it’s below the threshold of 0.2, hence why it displays “NO SIGNAL”!

UI Changes

• added distance counter
• added pulse counter

New Features

• tried to implement a pulse counter (it works :D), counts pulse based on whether or not last pulse was valid

• I also added a “reset view” button, as even as a developer it was annoying having to re-run the program to test different distances and angles, so reset view brings Earth back to its initial position (so you can have it come back after dragging it miles away lol)

Fixes

• I had to fix this one as it was just qol, but after selecting any preset, then changing the sliders, the selected preset didn’t show “custom” it showed whatever one was picked last, which could be misleading for new users.

alsooo i have an instagram now, check it out for video logs (and drop a follow if you’d like to :)
https://www.instagram.com/urged.st/

Added a distance factor, and different presets for the pulsar!

Signals are now weaker the further away you place Earth, and you can select preset pulsar types to investigate.

Not much done, just fixed a bug where the using the slider would drag the background along with it 😭

Learnt how to use function mousePressed and Relesased, so i’ve made the background pannable, and also added zoom. You can now drag Earth around too!

Finished the base template

I added the waveform viewer and signal status - this took most of the time, the sliders weren’t too hard to figure out. At least now it’s working fully.

Next steps? I am going to try and have Earth be movable, so users can see the effect of observer position, might also make it have a scrollable and zoomable background maybe, make it feel more like a space engine.

Finished base model of the pulsar, it spins! First time using canvas so it took longer than expected.