Infinite Scroll
openFrameworks, Madmapper, OSC.js
Github: phone, projection
With social media platforms’ infinite scroll capabilities, most people have become desensitized to the sheer amount of information and emotions they are exposed to in their online feeds, quickly scrolling or swiping past content that does not instantly draw their attention.
Infinite Scroll is an interactive installation that seeks to address this mindless scrolling by extending the feed outside of the phone, allowing users to see all the content they have scrolled through. Face to face with all the content they glanced at, users are encouraged to question how much of it they actually retained, and to reflect on what this means as it becomes increasingly easier to disregard content in social media feeds.
The experience:
1. A phone displaying a Twitter feed is mounted on the wall.
2. As the user scrolls through the feed, the content that was scrolled through will appear as a
projection as if it were coming out of the phone itself, ultimately surrounding the user and the
whole wall.
3. As the user scrolls up and down the feed, the content in the wall moves accordingly.
Technical specifications:
This installation works as an effect of communication between the browser containing the Twitter feed, openFrameworks, and finally MadMapper. Each “checkpoint” is essential in receiving, changing, and then sending over information necessary in order to have the final outcome. It is important to note that users are not scrolling directly on the Twitter app’s feed. Instead, they are scrolling through a large image on the browser that contains stitched screenshots of Twitter feed posts. Doing this simplifies the process of matching the scrolling on the phone with the scrolling on the projection, as the resulting image is already predetermined.
This is what happens when a person scrolls on the feed:
1. The browser on the phone shows a identifies when the user is scrolling with $(window).scroll(function() and saves the scroll position in a variable by using $(window).scrollTop()
2. The scroll position is sent to openFrameworks via open sound control (OSC)
openFrameworks receives the OSC message containing the scroll position. The program draws the Twitter feed image inside a framebuffer object (FBO). The position of this image changes according to the height position on the phone’s browser. This movable image is then sent as an FBO texture to MadMapper via ofxSyphon.
3. MadMapper receives the texture and maps it accordingly to give the impression that the feed is scrolling out of the phone.
Additional Photographs:
