Final Website: Memories against Time

Resources: #author.fullName} Your Brain Is a Time Machine: Why we need to talk about time

• Reading:
• Rovelli, Order of Time chapter 1 (packet)
• Butler, Kindred chapter (packet)
• Time Machine excerpt (syllabus)
• How is time depicted in pop culture? What’s your favorite sci-fi or historical fiction? What games treat time in unusual ways?

Some unanswered mysteries that I’ve not looked enough into

After spending sometime learning about RTCs and how there’s slight variations in how time is kept - for example, how a certain board would accumulate a 6 minute difference to real time every month, I started noticing some discrepancies around me. Still no solution, mostly due to time - the lowercase kind and lack thereof.

Mystery 1

I clicked to unzip once. Another zip file was created strangely. The hour is 3am because I'm in New York and Apple was created in California.

→ Every time I try to open the zip file, another one gets created with the date of January 24th, 1984, 03:00. Epoch date for Apple is January 1st. Where does the 24 day discrepancy come from and what was it about this file that caused it to rezip under an Epoch like date?

Is the Epoch date the same for all companies?

Mystery #2

The ITP floor now gets evening lighting at 10:55pm instead of 11pm sharp. Could that be the difference that makes some RTC chips be off by 6 minutes every month? How does a building this large or the lighting infrastructure calculate time and how is that different that what we’ve seen?

Building a life long timekeeper

Memories against Time: A cyclical and dynamic display of images.

I started by prototyping a slider and data formatting array structure to later plug in the images. In the early stages, main issues included image file conversion to a file that p5 can parse as images.

To convert HEIF and HEIC images into pngs, MacOS Sips ended up being the best tool (command below), where as for others FFMPEG worked.

find assets -type f \( -iname "*.heic" -o -iname "*.heif" \) -print0 |
xargs -0 -I{} bash -c '
  in="$1"; out="${in%.*}.png"
  sips -s format png "$in" --out "$out"
' _ {}

Terminal command to get a preload function that includes image names to run from /time-pattern-study

node - <<'JS'
const fs = require('fs'), p = require('path');

const root = 'assets';
const years = Array.from({ length: 2025 - 1999 + 1 }, (_, i) => 1999 + i);
const ok = new Set(['.jpg', '.jpeg', '.png']);

function esc(s){ return s.replace(/\\/g,'\\\\').replace(/"/g,'\\"'); }

let out = [];
out.push('function preload() {');
out.push('  photosPerYear = {');

years.forEach((y, i) => {
  const dir = p.join(root, String(y));
  let arr = [];
  if (fs.existsSync(dir)) {
    arr = fs.readdirSync(dir)
      .filter(n => ok.has(p.extname(n).toLowerCase()))
      .sort()
      .map(n => `"${esc(p.join(dir, n))}"`);
  }
  out.push(`    ${y}: {`);
  out.push(`      age: "${i}",`);
  if (arr.length) out.push(`      images: [${arr.join(', ')}],`);
  out.push('    },');
});

out.push('  };');
out.push('}');
console.log(out.join('\n'));
JS

As a last step, I deployed to Vercel.

Steps to dynamically pull file changes:

• Create generateManifest.js to scan assets and create manifest.json
• Run generateManifest.js
• Modify sketch.js to fetch manifest.json and dynamically load photosPerYear
• Remove hardcoded photosPerYear from sketch.js

If I make any changes to the assets directory (adding/removing images or years), I’ll need to re-run node generateManifest.js to update assets/manifest.json.

logic

The logic is that the full loop through each folder / year /age will have the same duration, regardless of how many pictures are inside the folder. As the years keep increasing, the time in which we look at any individual image gets smaller - although this is not a constant that can be set in advance, given that right now for example, 2024 has 26 images and 2025 has 14 images. I want the system to be dynamic enough to support me adding images in and out.

For example 1999 / age 0 has 1 picture, so that picture will be displayed for the full 8 seconds. But year 2000 and age 2, has 2 pictures so each picture will stay on screen for 4 seconds each.

Limitations

• Need to source more photos from 2006, 2007 so that it actually makes sense. Some years down the line only have 1 picture which is not compatible with the effect we’re creating.

Features

1. Button to stay in a single year
2. Slider that allows me to set the speed at which we're moving through the years
3. Slider that sets the year

Usage of time based functions

millis(): Returns the number of milliseconds that have passed since the sketch started running. This is my program's internal stopwatch. All other time-based calculations in the sketch derive from this continuous, ever-increasing value. It's a built-in function that provides a constantly increasing timer.

TotalYearDuration sets a uniform temporal unit for each year. More or less files decide the speed, as pulled by a node script from the assets folder.

For a year with many images (e.g., 26 images in 2024), imageDisplayDuration will be small (4000 / 26 ≈ 153.8 milliseconds). This means each image flashes by quickl

The overall experience of each year is consistent in duration, but the individual experience of each photo adapts to the density of memories for that year.

The 4-second countdown for images for any given year always starts fresh from that yearStartTime reference.

• It's reset in three key scenarios:
• When playback starts (or "the clock starts") via the togglePlayPause() button.
• When you manually move the slider to a different year.
• When the sketch automatically advances to the next year during playback.

Sources for watch faces

By Kathleen Beckett Erotic Watches Show More Than the Time (Published 2023)