diff options
Diffstat (limited to 'data/projects')
| -rw-r--r-- | data/projects/deja.md | 170 | ||||
| -rw-r--r-- | data/projects/esp32-blockly.md | 3 | ||||
| -rw-r--r-- | data/projects/laundryweb.md | 66 | ||||
| -rw-r--r-- | data/projects/simpliCity.md | 6 | ||||
| -rw-r--r-- | data/projects/tinkertanker-webdev.md | 0 |
5 files changed, 240 insertions, 5 deletions
diff --git a/data/projects/deja.md b/data/projects/deja.md new file mode 100644 index 0000000..d2806dd --- /dev/null +++ b/data/projects/deja.md @@ -0,0 +1,170 @@ +--- +title: "Deja" +bannerId: "deja-img" +logo: "/assets/images/logo/deja.png" +platforms: + - "web" +actions: + - text: "Open Deja" + mode: "both" + icon: "fa-solid fa-globe" + url: "https://deja.earth/" + bottomBar: true + bannerBar: true + - text: "View Source Code" + mode: "desktop" + icon: "fa-brands fa-github" + url: "https://github.com/leejiaq/Deja-NASA-Space-Apps-Challenge-2025/" + bottomBar: false + bannerBar: true + - text: "Source" + mode: "mobile" + icon: "fa-brands fa-github" + url: "https://github.com/leejiaq/Deja-NASA-Space-Apps-Challenge-2025/" + bottomBar: false + bannerBar: true +--- + ++-+-+- + +The following description is taken from our project write-up, similar to the one we submitted to NASA Space Apps Challenge's portal. NASA Space Apps Challenge 2025 website that contains all participants' project information is no longer accessible. +{: .info-box } + +This project was nominated as a **Global Nominee**, which we thought it was pretty cool! +{: .info-box } +# Deja {: .heading } + +# Summary + +This project aims to simulate the damage an asteroid collision can cause. By selecting one of the few Near Earth Objects (NEOs), users can intuitively visualize the various impacts it can create and be alerted. + +This is a web-based interactive tool for simulating the impact of a real meteor. The interface allows the user to easily choose and simulate a past or future real-life meteors collision at wherever they want, and will display the corresponding impacts such as crater size and the population vapourised in an easy-to-understand user interface. + +# Purpose and Aims + +- Transform complex scientific datasets into an accessible, visual, and interactive experience. +- Simulate the trajectory and impact of an asteroid using realistic physics approximations. +- Provide a “what-if” tool that allows users to explore different scenarios: size, speed, impact location. +- Educate the public about mitigation strategies beyond “do nothing,” highlighting real science and technology. + +# Unique Features +## Interactive Cards Navigation +Card 1: Welcome / Start → Introduction to Impactor-2025 and the asteroid challenge. +Card 2: Select Asteroid → Users can choose asteroid size, speed, or type. +Card 3: Story / Narration → Context about asteroid threats, why they matter, and how humanity prepares. +Card 4: Select Impact Location → Users pick a region (land/ocean) for the impact scenario. +Card 5: Simulation → Visualisation of the asteroid colliding with Earth. +## Impact Simulation +- 3D Earth + asteroid trajectory with Godot. +- Explosion, crater, and shockwave animation at the selected location. +- Data outputs: + - Crater size + - Energy released (TNT equivalent) + - Tsunami or seismic effects (if ocean or land impact) + - Population affected +## Mitigation Strategies Section +Cards with visuals and explanations of real methods: + +- Kinetic Impactor → spacecraft nudges asteroid, small velocity change = huge trajectory shift. +- Nuclear Detonation → explosion near asteroid, strong deflection but risky. +- Gravity Tractor +## Congratulations Page + +* Give users a sense of accomplishment +* Satisfied users will consider sharing it! + +# How it Works +## User Journey + +{{{ + + +{: .flex-flex } + + +{: .flex-flex } + +}}} + +The project begins from a landing page where we introduce that they can simulate an impact when one of the few Near Earth Objects (NEO) collides with the earth that might very well be a possibility. By fetching the NEO data from NASA’s API, the project shows a list of possible asteroids that are close to earth on the same date as the date the user is visiting the website, so that they can choose with their corresponding properties such as its diameter and relative velocity, and better understand that there are many asteroids are around the earth. + +{{{ + + +{: .flex-500 .nopath } + +In the next step, the project lets the user choose a location and angle of impact using a user-friendly 3D interface of the Earth, and visualizes the impact. The location and angle, among many other preset values, are then pushed to our backend API. The backend crunches the numbers using 20+ different equations to create a rough estimate of the impacts of the asteroid. The results are all sent as a response to the frontend. +{: .flex-flex } + +}}} + +{{{ + +Eventually, the project then shows the impacts of the collision based on the backend’s calculations, where it displays the projected crater on the location site chosen on a real-world map, its potential energy, impact energy communicated through tonnes of TNT equivalent scale that is easier to understand, population vapourised due to the asteroid’s impact, and other various effects such as thermal exposure, MMI rating, wind velocity, and blast overpressure. From that, the user will be able to visualise and understand the consequences of an asteroid collision, and will be redirected to the final part of the project where they will learn about possible mitigations to prevent an asteroid impact. +{: .flex-flex } + + +{: .flex-500 } + +}}} + +## Technical Explanations + +{{{ + +<img alt="Godot" src="/assets/images/screenshots/deja/image6.png" class="img nopath"> +{: .flex-flex } + + +{: .flex-flex } + +}}} + +<div class="flex-flex" markdown="1"> +For visualisation, the frontend uses a two-parted approach, where the first part uses Godot to render a 3D Earth, allow user movement and location selection, complete with explosion effects after the user decides to launch the asteroid. The second part shows the complete repertoire of impacts due to the asteroid chosen and all other parameters, where the crater is drawn on a map using Leaflet, a JavaScript library for interactive maps, and OpenStreetMap for the map tiles. Other impact properties are then displayed on a sidebar where users can digest the consequences and continue on with the next part of the app. + +For backend calculations, 5 variables are needed: The impactor diameter, the velocity of the impactor, the impactor’s density, the angle of impact, and the ground density. We assume the impactor’s density to be 2000 kg/m^3, and the ground density to be 2500 kg/m^3. Using 20+ different equations which approximates or solves analytically the physics involved in the impact of the asteroid. The result contains, but not limited to, energy transferred to ground, velocity hitting the ground, peak overpressure and wind velocity for given distance from ground zero, r, as well as seismic effects and ejecta. For more information visit EIEP’s paper. + +All of the calculations are fed on-demand by an backend API which requests the 5 variables and responds with 9 constant effects and 8 dynamic effects with respect to r, totalling 160000 quantities. The API is made out of FastAPI and `uvicorn` in Python. + +</div> + +-+-+-+ + ++-+-+- + +The following section is a brief explanation about this competition and notes on my own experience and personal reflections. +{: .info-box } +# Personal Notes and Reflections +## About the Competition + +NASA Space Apps Challenge is an annual global 48-hour online hackathon held by NASA where developers and enthusiasts come together and build open-source projects focusing on tackling problems on Earth and space. Participants can (and are encouraged to) utilise free and open data provided by NASA and its partners (like the European Space Agency). + +In the Sec 3 end of year holidays in 2025, a couple of my friends from Ngee Ann Secondary and Dunman Secondary School and me decided to team up and join the universal event (as basically nobody participated in local Singapore events) for this competition. + +We formed into a team of five, me, J from Ngee Ann, W from Ngee Ann, D from Dunman, and E from Dunman. + +In the team, I was the front-end developer, the other front-end designer, and 3D engine developer. + +It was a really fun and memorable experience for me, as it's sort of my first team hackathon if you don't count [NYTC](/event/nytc) and my [solo game jams](/projects/). Anyway, here’s what I’ve learnt from this experience. + +## Divide and Conquer + +At the start of the hackathon, I asked everyone what skills they currently have and what they think they can contribute. This is so that we can organise our roles efficiently based on our own skills. It's not that efficient if everyone works at the same task at a given time, as some tasks may not require that many people to work on it to begin with, and some people may prefer to work on other tasks. From that, we divided ourselves into specific roles that suit our skills and our project idea. + +From this, I think we've made a really great team and as a result a pretty cool project in my opinion. D and E worked on the research and backend side of the + +I think this does show the importance of knowing your own team well and make use of each of the different skills each member possesses maximally to be able to work effectively as a team and produce a really great result. At the very least, you'll know your teammates better and may bond well with them :) +## Working Under Pressure + +At 1 am in the morning on the last day of the hackathon, we've finally finished the project with only a few hours left on the clock! But, we’ve just remembered that we needed to craft a write-up page, which is a page that includes information about our whole project documenting what it does, how it works, and how we made it. Uh oh. + +So, we immediately got together and focused solely on writing this write-up. I quickly created a Google Docs for us to write it. We wrote the general summary of the project and divided ourselves to write different parts of the write-up depending on what we worked on. We quickly took screenshots, pasted it into the Google Docs, and half an hour later, it was done! It was not perfect, it may not flow that well, but it delivers information, so it was good enough for us. I even created a quick [video]() demonstrating our project. + +I guess it was a pretty good opportunity for me to learn how to react and still function under pressure. Stay calm, enjoy the adrenaline rush, and stay try our best to stay focused, and everything should be okay. + + + + + +-+-+-+ diff --git a/data/projects/esp32-blockly.md b/data/projects/esp32-blockly.md new file mode 100644 index 0000000..6acf3ec --- /dev/null +++ b/data/projects/esp32-blockly.md @@ -0,0 +1,3 @@ +--- +title: ESP32 R32-D32 Blockly Code Editor +--- diff --git a/data/projects/laundryweb.md b/data/projects/laundryweb.md index 4747e2c..85c86bb 100644 --- a/data/projects/laundryweb.md +++ b/data/projects/laundryweb.md @@ -20,10 +20,72 @@ actions: --- +-+-+- -# LaundryWeb +# LaundryWeb {: .heading } -This page is under construction. +A simple laundry timer website/web application for all Victoria Hall boarders. Do check out the source code [here](https://git.altafcreator.com/victoriahall-laundryweb.git/)! +## Purpose {: #purpose} + +I created this app because I noticed a fairly frequent problem, or frankly an annoyance, in my student hostel. Oftentimes, especially in the male block, residents are found to leave their laundry inside a machine for extended periods of time despite having their laundry fully washed or dried. When another person wants to use that machine, they will need to take out the previous person's laundry and those clothes often end up on top of machines and floors. This creates annoyance and a slight delay for the next person wanting to use that machine, and also makes the place less hygienic and more cluttered. + +Perhaps this may be caused due to people forgetting their own laundry. Personally, I'll always bring my phone to start a 25-minute timer whenever I start a new laundry cycle, so that I won't forget about it. It's pretty quick to do, but it may still be an additional friction for some people, so people may choose not to do that at all. Thus, I proposed a new website project for a simple laundry timer that is easily accessible and very quick to use for residents wanting to wash their laundry quickly. When their laundry is finished, they will be notified and can promptly take their laundry. The aim is to make starting a timer to notify yourself about your own laundry **as frictionless as possible**. + +## State of Project (Update/remove soon) + +Currently, the project is almost finished. All the main features of the app are finished, and I think it's ready for production. Therefore, the next steps of LaundryWeb's development is testing the application with real users, especially iPhone users, and also consulting with Hall Office for deployment and logistics. + -+-+-+ + ++-+-+- + +The following section is about my personal notes and reflections of what I've learnt from making this project. +{: .info-box } +# Developer's Notes and Reflections + +Here's what I've learnt from the development process of LaundryWeb. + +## Human-Centric Design + +During the making of this project, user-friendly design was the main focus. I wanted the app to be as efficient to use as possible as I know there are a lot of users using my hostel's communal laundry rooms, and people don't want to spend extended periods of time just starting their laundry. Ideally, people should be able to scan a LaundryWeb QR code, and immediately know how start a timer and receive notifications of their laundry within 30 seconds without reading a manual. This project really exercised my design skills to create a good and intuitive user experience for the app. + +### User Journey + + + +<div markdown="1" class="flex-flex"> +First, I'd want the simplest, quickest, and most intuitive user journey as possible. This is to make the process of using the app, and hence using communal laundry rooms as frictionless as possible. If the app instead adds additional friction in doing laundry and starting your own timer, then it **defeats** the whole [purpose](#purpose) of this app. + +In the end, I created this flow + +### UI Design + +{{{ +<div class="flex-flex" markdown="1"> +The User Interface (UI) design is also a major part of making the user experience as intuitive as possible, aligned with my aims to make [starting a timer to notify yourself for your own laundry as frictionless as possible](#purpose). In fact, user interface **is** part of the user experience, hence making sure LaundryWeb has "good" UI design is also very critical for my aim. + +I settled on these design philosophies for LaundryWeb's UI that I think aligns with my UX goal: **simple** and **humane**. + +Every page of LaundryWeb should be **as simple as possible**, both in terms of the tech behind and what is shown to the user. This is so that the user can immediately finish the task that they want to do, whether starting a timer or confirming laundry collection. For instance, each page should have a clear, singular purpose, and each element in the page should align to that purpose. If not, cut it. Navigation should be as simple as possible. In fact, the user should not need to navigate through different pages just to do one task. Make navigation as minimal as possible, and again, if needed, make it simple. + +At the same time, the design should still feel **friendly** and **accessible**. Even though I aim to make this app to be used very quickly, I also want the experience to be pleasant, so that users won't feel "forced" to use this app. To achieve this, I decided to create sea green colour palette that in which every element must use. I also decided that elements should have rounded corners, to make the app feel more "welcoming", and it's also a pretty familiar feature that users have already seen all across the internet. Fancy but unnecessary elements should be minimised, so that a wide range of devices can render the app properly, and so that accessibility tools can parse the website well. + +An example of my attempt to apply my UI philosophies is at the very first page a new user will see, the start timer page (`/start/`). This was also the very first page I designed to have a feel of what I want the whole app to look like. I think this page has manifested all of my desired design philosophies. +</div> + + +{: .flex-300 } + +}}} + +### Thanks, Apple. + +Like every project, things may not go according to plan. +Like everything I do in life, I'll do this section later. ==TODO :)== + + + + + +-+-+-+
\ No newline at end of file diff --git a/data/projects/simpliCity.md b/data/projects/simpliCity.md index ad5d1af..87aabfc 100644 --- a/data/projects/simpliCity.md +++ b/data/projects/simpliCity.md @@ -66,14 +66,14 @@ Have any feedback? Found some bugs? Or do you want to connect with others about # Downloads -{{{ +{&{ [* *{: .fa-brands .fa-steam} Buy Latest Version on Steam (beta0.2)](https://store.steampowered.com/app/2381230/simpliCity/){: .button .button-inline} [* *{: .fa-brands .fa-microsoft} Download Latest Demo (demo0.1)](https://store.steampowered.com/app/2381230/simpliCity/){: .button .button-inline} }}} # Older Versions (coming soon) -{{{ +{&{ [* *{: .fa-brands .fa-microsoft} alpha2.3.1](){: .button .button-inline .button-disabled} [* *{: .fa-brands .fa-microsoft} alpha2.3](){: .button .button-inline .button-disabled} [* *{: .fa-brands .fa-microsoft} alpha2.2](){: .button .button-inline .button-disabled} @@ -83,7 +83,7 @@ Have any feedback? Found some bugs? Or do you want to connect with others about # Changelogs (coming soon) -{{{ +{&{ [* *{: .fa-solid .fa-list} View Changelogs](){: .button .button-inline .button-disabled} }}} diff --git a/data/projects/tinkertanker-webdev.md b/data/projects/tinkertanker-webdev.md new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/data/projects/tinkertanker-webdev.md |