Infinite Strolling

Vittorio Pace, Ka Young Lee, Vittorio Gennuso, Kristina Greco

In recent years, our interaction with photos has drastically changed with the rise of infinite scrolling. Social media platforms have become hubs for endless image consumption, and it is important to consider its impact.

In response to the brief to design an interactive installation for the month-long EXPOSED Torino Foto Festival, we developed Infinite Strolling, an engaging and immersive Installation.

Featuring three screens and treadmills, each treadmill corresponds to a screen displaying a TikTok feed with its speed controlling the scrolling. Initially set to different speeds, viewers can observe the effect without interaction. They’re also invited to step on and control the scrolling themselves, enhancing the interactive experience.

Infinite Strolling is an installation that aims to inspire participants to revisit the image consumption habits especially within social media platforms.

GitHub repository

Video

Research

The way we interact with digital content in recent years has changed radically.

Today, the infinite scrolling that offers us a continuous stream of images has changed our habits and the meanings attached to them.

Infinite scrolling has increased the number of images we interact with every day.

Social media is the meeting point between users and this enormous amount of visual contents, entertaining through reels for hours on end users from all over the world.

However, it is essential to critically consider how we consume and interact with images, balancing the use of social media with our emotional and psychological well-being.

How might we translate this automated action in digital space to something more concrete and physical?

Our intention was to provide a method of measuring scroll.

At this stage, we thought that a treadmill could be a suitable device for the realization of our idea, allowing the user to have a sense of measure while using social media.

This interactive installation includes a projection of a social media feed, and a treadmill. The more you walk, the more content you are allowed to see. Therefore, running increases the speed of the content flow.

The purpose of this installation is to denounce the large amount of content we consume on social media and give to people a yardstick.

Prototyping

Physical Prototyping

In order to make the scrolling speed interactive, it is necessary to measure the speed of the treadmill. To achieve this, we use a magnetic sensor (Hall Effect sensor), a magnet, and a microcontroller. A magnetic sensor detects the presence of a magnetic field, that can be produced by a magnet, because of its north and south poles.

To measure the walking speed, a magnet is placed on the treadmill wheel. The magnetic sensor, which is static, is placed tangent to the wheel. A microcontroller is used to collect the sensor data.

With this system, the sensor can detect the magnetic field at each passage of the magnet, which corresponds to each cycle of the wheel. The sensor we use returns 0 or 1, depending on whether the magnetic field exceeds a certain limit or not.

By knowing the distance (which is constant) and the duration of a wheel cycle, we are able to define the treadmill speed :

treadmillSpeed = wheelCycleDistance / wheelCycleDuration

The speed found is sent by the microcontroller to a realtime database and then will be retrieved to change the scrolling speed of the TikTok videos.

This process is regulated by the following code:

void loop() {
  if (digitalRead(treadmillPin) == HIGH && controller == 0) {
    currentTime = micros();
    unsigned long timeDifference = currentTime - previousTime;
    velocityMs = distancePerCheck / (timeDifference / 1000000.0);
    velocityKmh = velocityMs * 3.6;
    km = km + (distancePerCheck/1000);
    controller = 1;
    previousTime = currentTime;
  } else if (digitalRead(treadmillPin) == LOW) {
    controller = 0;
  }

  static unsigned long lastUpdateTime = 0;
  if (currentTime - lastUpdateTime >= 500000) {
    supabaseClient.update(1, "speed", velocityKmh);
    supabaseClient.update(1, "distance", km);
    lastUpdateTime = currentTime;
  }
}

Digital Prototyping

A considerable portion of the prototyping phase was dedicated to developing an application that emulates TikTok’s scrolling mechanism, allowing for adjustable scrolling speeds.

Our initial attempt involved showcasing 5 videos in a loop, but we soon realized the challenge of effectively managing a large number of videos. Consequently, we decided to create a system that could operate independently of the video count.

To achieve this, we chose a system featuring reusable components. Instead of creating a distinct component for each video, we streamlined the process by utilizing only 3 components that are recycled.

In essence, we designed 3 divs in column, each housing 3 videos.

At any given time, only one div is visible, and when it moves out of view, it relocates to the last position, making room for the next div to be displayed.

This cyclic process extends to the other divs, as shown in the provided example followed by the code.

let a = 1;
let b = 2;
let c = 3;

let timeout = 2000;
let interval = 4000;

setInterval(function () {
  var element1 = document.querySelector("#box" + a);
  var element2 = document.querySelector("#box" + b);
  var element3 = document.querySelector("#box" + c);

  element3.style.opacity = 1;

  element1.style.top = "-33.3vh";
  element2.style.top = "0vh";
  element3.style.top = "33.3vh";

  setTimeout(function () {
    element1.style.opacity = 0;
    element1.style.top = "66.7vh";
  }, timeout);

  if (a < 3) {
    a++;
  } else {
    a = 1;
  }

  if (b < 3) {
    b++;
  } else {
    b = 1;
  }

  if (c < 3) {
    c++;
  } else {
    c = 1;
  }
}, interval);

The scrolling of the divs is controlled by a setInterval() function with a base interval of 4 seconds. This interval is dynamically adjusted to achieve a faster or slower scroll based on the treadmill speed.

Specifically, another function manages this process. It periodically reads the latest speed value sent by the Arduino connected to the treadmill from a real-time database.

setInterval(async function () {
  database
    .channel("Speed")
    .on(
      "postgres_changes",
      { event: "*", schema: "public", table: "Speed" },
      (payload) => {
        console.log(payload.new);
      }
    )
    .subscribe();

  let { data, error } = await database.from("Speed").select("*");
  km = data[0].distance;
  velocity = data[0].speed;
  updateSpeed();
}, 2000);

The detected speed is then utilized to set a new interval that regulates the scrolling of the divs. This ensures synchronized scrolling corresponding to the treadmill speed.