Callie’s Page


This is my blog from my first semester at ITP. I have since switched to a Notion blog which you can view here.


Fall 2024


Intro to Physical Comp:



Intro to Comp Media:



Hypercinema:






Final Project!


Project summary

We’ve all had the experience of waiting for a timer to go off - maybe you’re doing laundry, letting paint dry, or cooking pasta. This idle time can be boring, and you run the risk of being left with your own thoughts. 

You could always reach for a book, but let’s be realistic. TikTok, Instagram, or Youtube are probably your go-tos for these periods of limbo. It’s risky because their algorithms are so good that you might get pulled in by the stream of personalized content and forget about your original task at hand entirely. 

I present my solution to this issue: YouTime 

Starting this timer immediately presents you with a Youtube video that is exactly the length of time you need to wait. I scraped these videos randomly using the YouTube API, so it’s truly a game of Russian roulette as you wait for your designated time-wasting content (disclaimer that I have -not- screened the thousands of videos that might be served, so use at your own risk).

This project is a playful commentary on our constant desire for distraction, and might accidentally be a useful tool too. At best, it’s an interesting way to pop the filter bubbles that we all live in. At, worst the content is so weird and/or bad it might actually make you pick up that book. Try it out! 


https://cpage275.github.io/youtube-timer/

(In Chrome the videos often have ads, so it’s best viewed with an ad-blocker and/or in the local P5 sketch for the most accurate timekeeping) 


Making my own JSON file

I started this project not knowing much about APIs, and thinking that I would write a program that simply called the Youtube API directly to return the appropriate video in real-time. I soon found out that 1.) The Youtube API does not allow you to search by time durations (only time categories of short, medium and, long), which makes it exponentially harder to find a video of a specific duration down to the second and 2.) API quotas can be used up pretty quickly, especially when you’re searching for a super-specific video that requires casting a large net to find. 

Surya showed us this project by Riley Walz, which happened to be a pretty similar idea (it displays random Youtube videos with a certain filename). I poked around in the source code and deduced that it was pulling from its own database of pre-saved videos instead of calling the API to find them. 

So I moved on to Plan B, which was creating my own database of Youtube videos for every possible time duration. This is obviously a lot of videos (minimum 3,600), especially because ideally there would be multiple videos for each duration to avoid repetition (especially for popular timer times, like 5 minutes, 10 minutes, etc). For that reason I limited the scope to 1 hour - this felt fine because personally it’s rare that I set a timer that is over 1 hour anyways. 

I knew this sounded like the job for a JSON file, but had no idea how to make my own. I asked ChatGPT, where I learned that running a custom Python script could do the job. It guided me through the process of creating the script and running it in the terminal, which took several iterations to get right. Originally the AI made a script that would search for a specific duration and reject all videos that did not fit it. Obviously this was going to take forever, so I asked it to instead return the maximum amount of videos under 1 hour and sort them into the appropriate time category. This way I was maximizing the usage of the API. 

I also directed the AI to add in code that would help the videos feel more “random.” To get lists of videos, you need to add a search term to the API query. But the same search terms would yield repetitive results, so I added in a long list of queries that the script randomly chooses from. The script also randomizes the sorting of the videos so that it doesn’t just return the most popular ones - it rotates between relevance, date, rating, and viewCount. 

When I tried displaying videos in tests, I found that many of the links returned videos that were unable to be played. I additionally refined the script to add in filters and reject any videos that were unplayable or had region restrictions. I also ensured that the scipt appends to the same JSON file instead of creating a new one every time it is run, so that I could run it over multiple days when I max out my API credits (as of writing this post I’m still running it every day, I haven’t filled each time duration yet). 

Here’s the script I used to make the JSON: 



Creating the timer interface

To make the timer, I started small and built the functionality up incrementally with the help of AI. I started by just displaying a single Youtube video in an iframe, moved on to using my API key to search for a video to ensure I could get the API working, tried returning a video of a certain duration (sometimes works, but didn’t work a lot of the time, which made me realize I needed to pivot to the JSON approach), then tried displaying videos from a JSON of a certain duration. This last version was a good proof of concept that my idea would work given a large enough database of videos. 

I developed the user interface of the timer in a series of entirely different sketches, planning to integrate it with the JSON functionality later. I wanted to make something reminiscent of the visual timers that we have in the ITP phone booths - both because I like how they look/they’re fun and because it’s a really clear affordance that the maximum time is 1 hour. 




Chat GPT helped me with this really basic version of the timer functionality (it’s super helpful with the angle math since I have not brushed up on that since high school). 

I refined the look further by giving the DOM elements custom styling until it looked like this: 
 
The user can set the timer either by dragging the circular handle (which goes up in increments of 5 seconds, otherwise it was too difficult to set even times like 1:00, 2:00, etc) or by typing it in manually. 

Making the timer display videos

Integrating the separate timer and Youtube player sketches was pretty simple, especially since I ensured that the timer “body” was drawn at the same aspect ratio as a Youtube video iframe. That way, a video of your chosen length can appear pretty seamlessly to replace the timer-setting interface.

I knew from the Youtube iframe API documentation that it’s possible to control the Youtube player through javascript, so I connected the Start/Stop button on the timer to the video playback. That way, the amount of time left on the timer will always be synced with the amount of time left in the video. Here’s the basic working version of this timer that I demoed in class:


 

Refining the design and functionality

I was still not 100% happy with how the timer looked, and knew there were still some use cases to address if this was going to be a useful tool. For example:

  • What if the user needs to restart the timer or set a different time but doesn’t want to refresh the sketch? 
  • What if the user doesn’t like the video they were served and wants a new one without setting a new timer? Maybe they need to boil pasta for 8 minutes so they start their timer, watch the video for 1 minute, and then decide they want a different video. Now the video they are served needs to be 7 minutes to align with the timer. 

I drew up some new designs in Figma for how it should look








The rest was mostly styling and positioning tweaks, but I did run into some bugs related to implementing the “New video” button. Sometimes if the video was paused and I attempted to grab a new video, the program would give errors related to the Youtube iframe. 

The simplest solution according to AI was to simply create a new iframe each time a new video is requested to avoid any messiness related to changing states / video playback

Another annoying feature of the Youtube iframe is that you cannot autoplay a video that is unmuted. This is apparently a browser restriction (which makes sense - I’m glad that autoplaying ads can’t blast me with sound every time I visit a website). 

I decided to prioritize the autoplaying functionality over sound, since syncing with the timer is so crucial. Unfortunately this means the user must manually unmute the video.  
function handleNewVideo() {
  // Store current remaining time

  let currentTime = Math.round(remainingTime);
  let wasRunning = isRunning; // Store running state

  // Clean up existing video

  if (player) {
    player.destroy();
    player = null;
  }

  if (currentIframe) {
    currentIframe.remove();
    currentIframe = null;
  }

  // Update target duration to remaining time

  targetDuration = currentTime;

  // Show new video
  showVideo();
  // Maintain timer and running state
  initialTime = currentTime;
  if (wasRunning) {
    startTime = millis();
    isRunning = true;
  }
}

As a polishing touch, Ellen helped me to use VS Code and Github to center the sketch on a webpage and host the timer on a URL! I love that I can share this project by sending a link, especially if I want to show it to people who are unfamiliar with running p5 sketches. 

Here’s the final p5 sketch:


Reflections

This was a really satisfying project and I’m super happy with the result! I learned so much about APIs, iframes, reading documentation, working with AI while making more complex projects, JSON files, running my own script, and hosting a website. I loved I could design something on Figma and then execute it exactly the way I envisioned in code. I’d love to do another API-related project in the future, perhaps working with data visualization, but this was a great way to dip my toes in the water. 

If I were to revisit this project in the future, I would definitely make a mobile version. I don’t think many people are opening their computers to set a timer, so that’s definitely a major limitation of this program. I’d be curious what the mobile capabilities of p5 are and how one might approach making a responsive p5 sketch. 


References

  1. Youtube API documentation 
  2. Youtube iframe documentation 
  3. Claude by Anthropic 
  4. ChatGPT 4o by OpenAI 
  5. Ellen’s hosting guide (not sure where this link lives)