人算不如天算
I was asked to make a blog for the NYU IMA Low Res graduate program. (I started with no tangible experience in interaction design.) Math is nature’s poetry, and these are just diary entries.
Alter-Instagram
Reel
I was asked to make a blog for the NYU IMA Low Res graduate program. (I started with no tangible experience in interaction design.) Math is nature’s poetry, and these are just diary entries.
Alter-Instagram
Reel
IMALR-GT-202-01
WHAT: IMALR-GT-202
Life Clock V0 Code
Life Clock V1 Code
Life Clock V2 (w/Mobile) Code
What am I going to do with my 16,508 remaining sunrises?
Since we have not experienced death, we cannot truly fear it. Even in our imagined deaths, we are still acting spectators. We go on about our days as if we are immortal, and it is through this denial of death that we constrict ourselves. Modern society’s obsession with lengthening to-do lists is bizarre. We’ve even rebranded this incessant busyness as “hustling,” a lifestyle choice worth boasting about on social media.
An easy life is not equivalent to a simple one, and to want little is, in fact, much. With 4000 weeks, I still have snow to touch, wind to feel, love to exist in, and apologies to give. Once we embrace the certainty of death, we can finally live.
-
00 Inspiration
It was roughly three years ago when I first heard that I was 1/3+ into my current life on earth. I was with a couple friends, walking down Key Biscayne in Florida when Scott Thrift mentioned this idea he had for creating a living room clock that would show you how much life you’ve lived. One full rotation would be equivalent to 80 some years... Terrifying?
Years went by.
I read The Denial of Death by Ernest Becker and flipped through some pages of Four Thousand Weeks by Oliver Burkeman. The concept of death no longer weighed me down with the same density as before. Instead, it felt freeing. A few weeks ago, a friend showed up with a watch he had received as a birthday gift from Vasily Betin. It showed how many weeks he had left... Terrifying? Nah, necessary.
-
01 Core Interaction
Since I’ve never built a website before, I decided to start from functionality rather than aesthetics. I used the Age Calculator API from APIVerve to pull the following data to use in my .js file.
{
"status": "ok",
"error": null,
"data": {
"dob": "1990-01-01",
"age_years": 34,
"age_months": 416,
"age_weeks": 1812,
"age_days": 12686,
"age_words": {
"years": "thirty-four",
"ordinal": "thirty-fourth",
"full": "thirty-four years old"
}
},
"code": 200
}
The key components of the file included three variables that would use the native HTML date input to calculate how many weeks you’ve lived, how many weeks you have left, and what percentage of life you’ve lived. (ChatGPT helped me figure out how to ensure that the “day” and “month” variables have 2 digits each.)
One <section> and three <div>s later, I arrived at this (a little ugly for my taste):
-
02 Wireframe & UI
This is a heavy topic- But I believe once we can truly see it for what it is, we are free. Because of this, I wanted the design to feel light. I started a couple iterations in Photoshop using neumorphic elements, sunrises, gradients, and frosted glass.
Ultimately, I landed on something like this that would display snowy, p5 fractal trees that change width based on your age:
-
03 Challenges and Solutions
Styling, styling, styling.
I’m a bit of a layout-obsessed freak. The main challenges after functionality were:
(a) Header & footer placement (logo & border text)
Difficulty figuring out text alignment, writing mode, and rotational transformation. Lots of trial and error.
(b) “Your life in weeks” alignment
Difficulty setting up <div> hiearchies and styling them to align as rows and columns in one section. More trial and error.
(c) “Life lived” circle/SVG vector graphic
This circle... is three circles. The base is drawn in CSS, which I quickly realized would not suffice for the progress line or the circular text (which required javascript). Unfortunately, I gave up for the mobile version. It would work when locally hosted, but the anchor point would be off once I uploaded to GitHub.
(d) Responsive site
Another challenge was making the site responsive to mobile devices. I originally tried using a media query in CSS to change the layout of the entire index.html; however, I felt like the UI didn’t suit mobile. My solution was to create an index-mobile.html that would respond to a redirect.js.
(e) P5 Fractal Trees
What was troublesome here was that by this point, I had quite a few files. Working between the separate file/folder structures was a bit tricky, since I wanted to call the weeksLived variable in the p5 sketch to adjust the width of the fractal tree trunks.
(f) Hiding my API key!
-
04 Learnings
Not quite sure where to begin. I couldn’t even link a CSS file to an HTML file prior to this project, nor did I even really understand what a Javascript file did, and JSON was just my brother’s name but missing the “a.” (I probably spent too much time on this and not enough on CritEx shhhh...) With that said, I’d like to comment on a few of the things that I found most “interesting” (apart from what was covered explicitly during class).
(a) rem
What a wonderful unit of measurement indeed. I spent an unnecessary number of hours fiddling with pixel sizes before discovering this magic unit.
(b) redirect.js
I now know how people get sites to load different index.html pages based on recognized screen dimensions.
(c) @keyframes
Even simple animations can make a site look more polished.
(d) button:hover
I like button hover fx. I feel like it gives the site character.
-
05 Final Musings
Every moment is once in a lifetime. We’re always experiencing singular instances for the last time without ever being aware of the fact. My wish is this: whatever journey you must take, whoever it is you hope to hold space with, however it is you crave to live- My wish is that you find the courage to at least try. I wish you a soft heart in this hard world.
Sources:
mdn
APIVerve
The Denial of Death
Four Thousand Weeks
Scott Thrift
Vasily Betin
Coding Train - Fractal Trees
More Fractal Trees
Even More Fractal Trees
chatGPT (cited in code)
A lot Google... Stack Overflow...