Introduction: BLACKPINK Pop-up Store Interactive Experience

By

This project is created as a course assignment at the California State University, Long Beach; taught by Behnaz Farahi: DESN 586 Human Experience and Embodied Interactions Studio.


Statement

This is a interactive installation for the BlackPink pop-up store, which allows users to record their voice or sing a song. The system uses p5.js to analyze the user's voice and frequency data, and generate a personalized album cover (spectrogram graphic) based on their input. Users can then print out their album cover as a physical CD and a 3D printed keychain.


Audience

This project is designed for BlackPink fans who are interested in personalized, interactive experiences. The pop-up store context provides an opportunity to engage with fans in a fun and unique way, while also promoting the band's music and merchandise.


Purpose

It's always more meaningful and special to have personalized and unique merchandise as a fan. This project offers a new way for fans to connect with BlackPink's music beyond just listening to their songs. By allowing fans to create their own personalized album covers based on their voice/singing, the installation creates a sense of ownership and investment in the music. It also offers a physical and tangible souvenir of the experience, which can be kept as a memento or shared with others.


The project aims to enhance the fan experience and create a lasting memory of the BlackPink pop-up store.

Supplies

  • P5js for recording and creating graphic voice analysis
  • Adobe InDesign to help to print out CD cover and photocard
  • Rhino and Grasshopper for forming a 3D model using Image Sampler
  • Polyjet for 3D printing

Step 1: Ideation

During my visit to "BORN PINK: The Pop-Up Experience" hosted by Spotify in Los Angeles, I was inspired by the immersive and interactive environment that they created for BlackPink fans. The pop-up store featured numerous photo opportunities, a variety of BlackPink-themed boba drinks, a self-photocard print service, and even a 30-second filming experience inside a mirror room.

Building on this concept, I want to create an interactive installation that includes a set of 30-second karaoke rooms where fans not only get to listen to their favorite BlackPink songs, but they also get to actively participate by singing along and contributing to the creation of their own personalized album covers.

Step 2: User Flow

To ensure that users have a quiet and private space for recording and creating, the installation will feature a single room dedicated to this activity. Inside the room, there will be a microphone, large screen, and a controller (in this case, my laptop mouse) for users to use during the process. Each screen will have message to guide the user through the steps, making the process easy to follow.


This will allow users to feel more comfortable and at ease, enabling them to create their personalized album covers in a stress-free (not public) environment.

Step 3: Development on P5js Coding

Recorder

I looked up the p5js reference for the recorder and implemented the basic recording function.

I also watching tutorials on creating interactive album covers and changing scenes, I am taking steps to ensure that the final product matches the aesthetic of the pop-up store and is visually appealing to users.


Here is my final Recording P5js file: https://editor.p5js.org/evava9006/sketches/Nfm54deKn


Album Cover (Spectrogram)

The final output of the spectrogram is inspired by the Sound Visualization - 'Irisgram' (Spectrogram) P5JS. I love this visualization because the graphic is created by using the fft() method, which performs frequency analysis on the wavelength of the user's input, rather than just random graphics.


Also want to mention this coding here will change the color of the final output

 for (let i = 0; i < spectrumB.length; i++) {
    layer.strokeWeight(0.028 * spectrumB[i]);
    layer.stroke(
      235 ,
      193 - spectrumB[i],
      180,
      spectrumB[i] /1.5
    );
    layer.line(0, 1.2 * i, 0, 1.2 * i); }


Here is my final album cover P5js file: https://editor.p5js.org/evava9006/sketches/GhzzXSVHb

Step 4: Development of the CD Cover and Photocard

To complement the personalized album, I decided to create a set of photocard, which is a common feature in Kpop album merchandise. I measured the dimensions of an empty CD box, imported them into Adobe InDesign, and printed them out. Then, I cut them to the appropriate size.

Step 5: Development of the 3D Model in Rhino and Grasshopper

During the class project, Rhino and Grasshopper were used to create a 3D texture print. The process involved using the image sampler to collect data from an image and then joining the circular mesh to the base mesh. Finally, color adjustments were made, and the model was baked.

For my project, I replaced the image used in the image sampler with one I captured using p5.js. The final result turned out well.

Step 6: 3D Printing

At CSULB, the university provides an I-Space that offers 3D printing services. I sent out my obj. file, which I exported from Rhino, to the I-Space, and the staff helped me clean up the mesh. They then used Polyjet to print out the final output.

Step 7: Final Output

These are all the physical takeaways that can be provided if my installation is used in the pop-up store in the future. The process of user interaction and "creation" is also quite interesting.