https://editor.p5js.org/19lizae/full/7vTFglzEF
Description
My project – Sentient Infomercial – critiques consumerism, manipulation, and desperation elements used as part of infomercial marketing pitches. Often times the items being sold can be classified as “neat trinkets” rather than actual problem solving objects the telemarketer claims them to be. The pitches often present the problems as relatable, product features as exaggerated, and the call to action as a “one time offer.”
Since the project is text based, I wanted to use creative tactics to mimic that feeling of urgency and “captivated” interest without relying too heavily on audio or moving pictures. I modified a generic infomercial script to sell the “EverythingFix,” a fake product (of which an image is not even shown) that claims to solve all your major life problems. I wanted to keep the basic characteristics and set up of the infomercial while turning it “sentient”. It would draw the reader in through clickbait and take control over their actions, similar to how we get “controlled” by the telemarketer.
There are features like hidden text which can be revealed to the user by hovering over underlined text, that create a sense of false advertising. Once the user realizes the true nature of the product, however, its too late and they cannot proceed closing the infomercial. They end up buying the product and seeing a bunch of “warnings” on the last screen which, of course, are too small and scroll too quickly for the user to comprehend.
Process
I started out by watching a lot of informercials and getting a sense of the script. Splitting it into various stages allowed me to more easily to build the different phases and elements of my own project.
I then made the visual moodboard in Figma so I could pick the most frequently used colors and font styles.
Finally, I combined the two into the final looks-like rough draft in Figma. This later saved a lot of time for me when coding since I already had an exact idea of what I was going to do. Any changes to visuals or interaction could take place before I opened the p5.js editor.
Coding wise, since I already had experience making a video game in Processing with different screens and phases, I knew the overall structure of the code. Each phase would be controlled by a boolean, and activate a function for each slide in draw() whenever a certain condition or interaction is completed.
I then found references for each specific interaction from other projects such as: https://editor.p5js.org/codingtrain/sketches/1UggvR8ix and https://editor.p5js.org/cs4all/sketches/SkiIE_I3z and used them as a baseline for my functions.
I ran into some issues with centering the HTML text and making sure the spacing of replaced text stays visually ok, so I used ChatGPT to help me with things like that.
For other new concepts I haven’t encountered before, like the timing, I used the p5.js reference pages.
Leave a Reply