Author: Tyler Sauls

https://editor.p5js.org/tms9947/sketches/9XCrV1Jab

The Concept:

I started collecting records and CDs last year, and I really enjoy the experience of going into a store and just spending time looking through the records and CDs they have available. However, since I began, I noticed that Abu Dhabi doesn’t have many stores that sell records. Thus, I decided to take matters into my own hands and create a record store experience as my midterm project, where I hope to replicate that same relaxing feeling that I experience when at an actual record store.

At first, I was unsure how to go about the project, in terms of how to make it something fun and interactive. Once I gave it some thought, though, I came up with the idea of having three sections in the store, each relating to music. When creating the three sections, I wanted to have it be realistic and have activities that you could experience in an actual record store. This led me to the three I chose: the actual store, where you view and purchase records, the music corner where a record player is controlling the music in the store, letting users choose the music they hear while looking at the project and lastly a music based trivia game inspired by restaurant trivia nights and board game cafes, asking variety of questions around genres, artists and genreal music knowledge.

The design of the starting area(the store entrance) and the main area of the store(the record shevles) were inspired by actual record store layouts and architecture which I tried to recreate using shapes within p5. Below is an example for each.

How The Project Works:

The experience allows users to navigate through a record store, using a combination of keys and the mouse pad to interact with and move through different sections. I first made each section of the store in a separate p5 project, allowing me to make sure it was fully functional before adding it to the main project, also making the process of debugging much easier given the quicker loading times. Using a lot of ‘if’ and ‘else if’ statements throughout the code to manage the different states of the game, which reference the section of the store the user is in. This allowed me to get the changing scenes to work seamlessly with the button interactions that allow the users to switch between them.

A part of the code I’m really proud of, which is also one of my favorite parts of the project, is the section that creates the animation for the record on the player. When I first started working on this part of the code, I was using a tutorial from The Coding Train titled “How to Rotate Shapes in p5.js (translate, rotate, push, pop)”, but I wasn’t able to get it to work at first. This led me to ask the professor for help, and he then explained the concepts of rotation, translation, and the push and pop functions, which really helped me understand how to get the rotation to work.

//spinnign record
    imageMode(CENTER);
    translate(275,height/2);
    rotate(angle);
    image(record,0,0,recordWidth,recordHeight);
    pop();
    angle = angle + 1;

Improvements:

One improvement I would like to add is maybe having more realistic assets, rather than just the simple ones I created in p5, possibly even combining some realistic and drawn elements. Additionally, I wanted to add randomization for the albums that would display on the shelf, as well as possibly having them move along the shelves like a conveyor belt, but I was not able to get to this due to time constraints. Adding to the randomization, having a larger database of albums to pull from would also be another improvement to add.

When currentl viewing the albums in the larger mode, the mouse clicks still register when clicking over a different album. This is an issue I wasn’t able to correct in time, but in the future I’d like to make it so that when the users is viewing the larger version of the albums they can’t immediatly switch to the others and instead need to click again to exit and then select a different ablum to view.

References:

I used AI to figure out how to go about creating the album class I ended up implementing, as well as formatting the text and positions of a few things in the later stages of development, because the large amount of code made it a bit harder to manage. 

Video/Turials I used for major aspects

https://youtu.be/o9sgjuh-CBM?si=VLxmfbLdzPb72X8l

https://youtu.be/Pn1g1wjxl_0?si=HJhL-7whJ1jlxXU0

https://youtu.be/4w7PR70XJkE?si=IBRi3oZBpgoYj7Iz

https://youtu.be/3pI3SQjfVyA?si=geUIo5htIBbONHli

Lofi covers I used for the background

https://youtu.be/p2Jp-HLva28?si=yj7_UfyhsEwXetpH

https://youtu.be/9-J8G9KQjWg?si=LTP2qWdXRggH89Z_

https://youtu.be/Xoj02q0beSw?si=v5q1zEMCrVQX7rNL

I used the p5 reference website to figure out some smaller things

https://p5js.org/

The Concept

I started collecting records and CDs last year, and I really enjoy the experience of going into a store and just spending time looking through the records and CDs they have available. However, since I began, I noticed that Abu Dhabi doesn’t have many stores that sell records. Thus, I decided to take matters into my own hands and create a record store experience as my midterm project, where I hope to replicate that same relaxing feeling that I experience when at an actual record store.

Design

I plan to have the user start outside the store, where they will have to click a button to enter, taking them to the first section, which will be the shelf where the records will be stored. On this page, I plan to have the records move across the screen, where users can click on the records to view the front and back covers and then ‘purchase’ an album if they wish to, and once the album is purchased, it will disappear from the shelf for that session.

From the record, there will be two arrows allowing users to switch between different sections of the store. The first section will be the record corner. Here, the user will be given a small selection of songs, from which they can select one and change the music playing throughout the store.

The last section will be a game corner. In the game corner, users can play a game of music-themed trivia, where questions will be given, and the user has to select the correct answer. This idea for this game was inspired by this music trivia card game my family has in South Africa, but rather than having it be open-ended answers, I plan to make it multiple-choice.

What’s Frightening

As of right now, my biggest concern with the project is mainly just how I’m going to put these 4 separate sections together and make the navigation between them smooth and seamless. To help a bit with this, I have begun planning how I’m going to implement each individual section first, and I hope doing that makes putting it all together in the end easier.

Another small concern I have is limiting the interaction area for things such as the buttons to start the experience and switch between sections, as well as interacting with records, changing the music, and answering the trivia question, as I haven’t used anything like that for my previous assignments. I do believe it won’t be too difficult a task, and once I learn it, it should be easy to implement for the different aspects of the experience.

 

• What are some of the ways that computer vision differs from human vision? 

When compared to human vision, computer vision is much simpler. The reading discusses a few methods that are used to accomplish computer vision; however, the computer can’t tell the difference between a person/living creature and an inanimate object placed in its view. In comparison, human vision uses a complex system of nerves, sensors, signals, and communication between our brain and eyes, allowing us to see in much greater detail than a computer, as we are able to see in much greater detail, allowing us to more easily distinguish the objects we are looking at, as well as things like color and distance.

• What are some techniques we can use to help the computer see / track what we’re interested in? 

In the reading, the author mentions three main methods for computer vision: frame differencing, background subtraction, and brightness thresholding. Frame differencing locates items by detecting their movements. Background subtraction uses pixels to identify objects based on differences in an established background. Lastly, brightness thresholding uses differences in luminosity to distinguish between people and objects in the foreground vs the background.

• How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?

I think the inclusion of computer vision in interactive art allows for many creative ideas to come to life, but it could also raise a lot of concerns for privacy, especially when a piece may be on display. For audiences, they may be worried about where recordings or images are being captured and where those recordings are going. On the other hand, having computer vision as a tool for creativity opens the doors for all kinds of projects and adds a really interesting kind of interaction to art, where the audience is not only interacting with something by clicking some buttons but rather they can interact through body movements, allowing them to really feel immersed in the work.

 

Concept:

For this assignment, I had absolutely no idea what to do. I tried looking around for inspiration when the idea of incorporating song lyrics came to mind because I listened to music all the time. Once I had the idea of using song lyrics, I decided I could make the project more personal and specifically make use of song lyrics that I really enjoy. When figuring out how to design the project, a few references came to mind: the first being the lyric videos I sometimes see on TikTok (Image 1), the second being the Instagram reels that just have text on a color background (Image 2), and the third being the shared lyrics from Spotify (Image 3).

 

 

How this was made:

For this assignment, I wanted to try and use a csv file to store the lyrics so I began by reviewing a video I found titled “p5 js Working with Basic Data + CSV Files” by Jacob Rivkin and the p5 references on csv, in order to get a better understanding of it works. Originally, I planned to only add the lyrics, but once I watched the video and followed along, I decided to add additional information to the CSV file, such as the song title and artists. Once I was able to get the connection to the CSV file working, I added the mouseClicked function so that users can go between the song lyrics. 

After the functionality of the assignment was done, I began working on the visualization of the text. I started with the position of the lyrics, song name, and artist, trying to find a font size and position that would keep each section of text from overlapping because at first when I added alternative fonts some of the longer lyric segments would go a bit off screen due to the font size. In terms of other visual aspects, I tried to keep it a bit simplistic, in a manner similar to the references I had while still having some kind of unexectedness to it, which is where the changing fonts, and text and background color come in. 

Code I’m Proud Of:

async function setup() {
  createCanvas(500, 500);
  
  data= await loadTable('lyrics.csv',',','header' );

  numRows = data.getRowCount();
  songLyrics = data.getColumn('Lyrics');
  songName = data.getColumn('Song');
  songArtists = data.getColumn('Artists');

When I started working on the assignment, I was unsure about how to navigate the CSV files that I almost ended up just using an array to store the lyrics, and at that point I wasn’t even planning to add the other song information. When I found the YouTube video explaining the concept, I found it much easier than I initially thought and was able to incorporate it into my assignment.

Reflection:

Even though I think this is one of the more simple assignments, I think the fact I got to incorporate something I love into it, that being music I personally enjoy, I had more fun throughout the entire process. For future improvements, I would want to add a feature for users to add their own lyrics to be displayed, which I could use to add a more personal touch for the person experiencing the work. Additionally, one thing I wanted to add but wasn’t able to was a gradient-style background, much like the Instagram video reference. As we continue going through the semester, I’d like to come back to this assignment and hopefully add those improvements. 

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

One thing not mentioned in the reading that could be improved is the car dashboard. Nowadays, many car manufacturers are leaning towards a fully digital car dashboard, moving away from physical control switches, nobs and buttons. I’d like to call this the ‘iPadification’ of cars, a term that may or may not have been used somewhere before, as the dashboards of many modern cars have just become a giant iPad. Many people may think it’s just easier to have everything digitized, but I think when it comes to driving that may not always be a good thing. Focus is very important when you’re on the road, and having the physical buttons and nobs made it easier to tell if you were able to do what you wanted, such as changing the temperature. Additionally, the static nature of physical buttons made it easier to remember where certain features were, allowing drivers to build muscle memory, meaning less focus would need to be given to those tasks. Meanwhile, with a touchscreen, it may be more distracting for drivers, as there are many menus that need to be navigated for different controls, and the overall process may be longer, leading to the driver having to multitask for longer, increasing the chance of them losing focus on the road.

• How can you apply some of the author’s principles of design to interactive media?

When applying these principles to Interactive Media, since the focus is interaction, I think keeping human-centered design at the forefront is really important. Putting a priority on clearly indicating to users the intention, the means of interaction a project could have, and some kind of indication that something happened represents the affordances, signifiers, and feedback principles, which, for interactive media, may be some of the most important. If a project fails to communicate how it works, what it does, or that something happened, people would likely lose interest in interacting with said project. User attention is also very limited, so for an interactive media project, whether it’s a website, installation, or game, if users are unable to figure out how to use it or if it’s actually working, they will naturally move on, especially if there is another project a few steps away capturing their attention because it has some kind of audio or visual response to the user’s interaction. 

 

This book chapter really opened my eyes in terms of how deep the idea of interactivity can really go. Before reading it, I think my definition of interactivity would simply include anything that reacts or changes based on an input from a user. However, now I think looking at interactivity through a scale makes much more sense. Aside from properly incorporating the listening, thinking, and speaking principles addressed by Chris Crawford, I think a strongly interactive system should respond to the different inputs provided by the user and be able to take them into consideration for future interactions, making the interactivity less of a ‘call and response’ and more of a continuous ‘conversation’. This changes the user’s role to an active participant in the interaction rather than just a passive presence giving commands. Ultimately, making it more of a live feedback loop.

For improving the degree of interaction for future p5 sketches, I think I’d want to focus on moving past merely having mouse-clicked interaction or having the sketch change with each interaction. I’d want to incorporate different ways for the user to interact with the sketch, like moving the mouse around the screen to change the color or speed of something. Additionally,  I’ve seen a video of a ball that has some kind of gravity on it, so when the user clicks, the ball drops and bounces under the effect of gravity, eventually stopping. I’m not sure how advanced that would be to create or if it’s something we’ll cover eventually in class, but I think having a work where maybe the user can kind of physics system that allows the ball to react differently depending on how it was tossed. Overall, making the work more interactive.
 

Concept

While I was reviewing The Coding Train videos on the topics we took in class this week, I was thinking about what to do for my assignment and how to implement OOP. I was specifically trying to figure out an object I could create multiple of. Then suddenly, the ghosts from the game Pac-Man popped into my head. I’m a huge fan of video games, so I immediately decided to use Pac-Man as inspiration for the assignment. I based my project on the design elements of the game, like the way the ghosts look, and had it so that when they’re moving around, they create a dotted line along their path, with the design being inspired by the dots Pac-Man eats around the map.

 

My Code

 

Process

I started my code by creating the ‘Ghost’ class, as that would be the main part of the project. Before starting any of the code, I watched ‘6.2: Classes in JavaScript with ES6 – p5.js Tutorial’ from The Coding Train as a refresher, and worked through creating the class myself.

Next, I began working on randomly spawning in the Ghosts when the program is run. To do this, I used a combination of the p5 reference site, searching on Google, and again the video ‘6.2: Classes in JavaScript with ES6 – p5.js Tutorial’ from The Coding Train.

Once I was able to get the ghost to spawn in properly, I began to work on getting them to move. I wasn’t sure where to start with this, so I looked for help on YouTube and came across a video titled “p5.js Coding Tutorial | Array of Bouncing Balls (OOP / mousePressed)” by Patt Vira. With the help of the video, I implemented the ‘moveGhost’ function and ‘checkBoundaries’ function, allowing the ghosts to move around the screen without going off of it. Additionally, I changed the dx and dy speed variable in the constructor allowing for variation in the speed between different ghosts.

Next, I decided to work on adding color to the ghosts, so I added an array holding a few colors for the ghosts. To give them a color, I added an argument to the constructor that would select a random color from the array when the ghost is created.

The next section of code ended up taking the longest to figure out. At first I tried to implement it by myself, but it wasn’t working out, so I looked through some of The Coding Train’s videos and found ‘9.7: Drawing Object Trails – p5.js Tutorial’. I used their help to implement an array that holds the vector location of each ghost and creates a point for each one.

Code I’m Proud Of

//creates vectors of the ghost position
    let v = createVector(this.x,this.y);
    this.history.push(v);   

    if (this.history.length > 500) {
      this.history.splice(0,1);

trail(){
  stroke(this.color);
  
  for (var i = 0; i<this.history.length; i=i+1) {
    var pos = this.history[i];
    ellipse(pos.x,pos.y,1,1)

The part of the code that allowed the ghosts to draw a path while they were moving was a completely new concept to me, so being able to learn how to do it was really exciting, and therefore it is also the code I am most proud of. I definitely plan to implement this in future projects as well.

Problems I Ran Into

The biggest problem I had during this assignment was definitely getting the ghosts to draw a path as they moved. Before, I looked for a video to help me; I ended up making it so that there were just lines connecting each of the ghosts, rather than them creating a line as they moved.

Additionally, when I added the colors to the ghosts, my first attempt resulted in them flickering between the color options rather than having one. This was because I put the color randomization in the ‘Show’ function, so every time the ghost was drawn, the color changed. I was able to fix this tho by moving the color selection into the constructor.

Reflection

Overall, I’m happy with what I was able to create for the assignment, and it helped me a lot with practicing the latest concepts we’ve learned during class. I was especially happy, I could inccorparte my love for videos games to some extent. Although figuring out how to get the ghosts to draw a trail along their path was a bit challenging at first, learning to implement the array capturing the positions of the ghosts was a really interesting and I hope to explore it’s capabilities further in future assignments and projects. In terms of improvements, I think adding a way for the eyes of the ghosts to change direction based on which way they’re moving would add another fun element to the work and make their behaviours more similar to the actual game.

Concept

Before I started any part of this weeks homework, I already had a small idea for what I wanted to create. As I began going through the work, I still intented to go through with my original design. While going through the examples provided with the assignment instructions, I came across a work that was similar to what I had in mind, this ended up being my source of inspiration for the assignment.

I ended up creating a code where a random number of lines with varying colors and sizes would extend from the center of the screan, creating a kind of splatter effect. However, when I was about done with the code, I wanted to try making it so that the origin of the splatter would change with each itteration. This ended up resulting in me making it so that the code just put all the lines randomly on the screen. At first, I was annoyed but as I kept looking at it, the design began to grow on me. Additionally, it reminded me of some of the work I saw while watching the Casey Reas talk. At this point, I decided to change my porject and embrace the happy accident that occured.

Code I’m Proud Of

A section of code I’m really proud of is the while loop I created which is responsible for generating the lines. It takes the randomly selected number of lines when the code is run and for each line a eight random featues of that line are generated. These inclide two random x and y coordinates to create the line and where its positioned, three random r,g,b values allowing each line to be a different color,  and a random stoke weight from one to ten changing the thickness of each line.

while (lineCount > 0) {
  let randX = random(width);
  let randY = random(height);
  let randX2 = random(width);
  let randY2 = random(height);
  //randomize the r,g,b values, thickness, and position of each line
  let r=random(0,255);
  let g=random(0,255);
  let b=random(0,255);
  strokeWeight(random(1,15))
  stroke (r,g,b);
  line(randX, randY, randX2, randY2);
  line(randX, randY, randX2, randY2);
  lineCount = lineCount - 1;//decrease the lineCount till it hitsw zero to control the while loop
}

 

Sketch

• ‘How Was This Made’ section including references

I started by creating the while loop which would create the randomly chosen number of lines. To do this I watched The Coding Train’s video titled “4.1: while and for Loops – p5.js tutorial” to review how the while loops functioned in p5. When I began, I had some issues with the line count variable I added to control the loop, as I kept getting errors about it. To solve this I tried moving the variable to a few different locations, as I had a similar issue in the previous homework and moving the code was what helped resolved it then and also helped with this issue. I later changed this to randmoize both the start and end postions. Once I was able to get the lines generating properly, I started adding in the elements of the lines that I wanted to be randomizes. I started by impletening randomized colors for each line and then randomized stroke weights. After I did this, I had the idea to randomize the origin position of the lines which accidently resulted in the line positons being completely randomized, which I decided to keep in the end.

Reflection and ideas for future work or improvements

I think working on this assignment taught me to embrace the unexpected because my final project ended up being very different from what I had in mind when starting. Not this but I think my final project reflected my intention for this assignment in a clearer manner than what I had created at first. Those intention were to kind of find the right balance between the randomness and control. The way I wanted to do that was by making it so that each different interation of the generated work had elements that allowed you to tell they were connected while also having each design look unique and distict from the others.

In terms of future work, I would like to get more practice using the loops to fully grasp the capabilies they have for creating art. When it comes to improvements to this assignment, I think I would add more elements thay could change such as addition shapes as well as a implementing a feature to let users change the design by clicking.

 

In his Eyeo talk, Casey Reas argues that code needs a bit of “noise” for it to stay visually interesting and prevent it from becoming homgoneous.  From that part of his talk, I understood that he meant adding some kind of elements or means to differentiate different iteration of the code/art work. Reas outlook on this is similar to my plans for how I’ll make use of randomness withing my art. I intent top incorporate a few different elements within my work that will be randomized each time the code is rerun. My goal in doing this is to achieve some sort of similarity between each unique iteration while also having it so each one a some kind of distinction from the rest. 

I think there may not be one definitive answer for the optimum balance between total randomnens and complete control. Rather, it depends on each individual case and the type of art the artists is trying to make, as well as what their goals for that artwork is. However If an artist leans too heavily into either direction they could risk their art being too random to the point where there is no clear idea behind the art and the “noise”, as Reas would call it has no real meaning, or it could be too controlled where the result may be too predicable. However, this does raise a question for me, how would we as viewers be able to distinguish between these? For example, at what point does the randomness or noise become too much or lose its meaning?

 

Concept

Before starting this class, I had no prior experience using p5js. However, I have some previous coding experience, which made the learning experience a bit smoother. Given this and the fact that I’m not that much of an artists, I decided to focus on getting my basic features onto the portrait. Before even beganing to type anything, I started planning what shapes, I would use to recreate my features through code and once I had finished that I began coding.

Process

Before starting, I decided that I wanted my interactivity to be the background colors changing with every click. To do so, I began to work on the background and decided to divide it into three parts with the help of triangles. Once the background was done, I started working on the portrait of myself. I originally used circles to make up the shape of the head and body; however, I later switched them to ellipses, as I found those looked better. Next, I worked on the facial features, starting with the hair, which I made using a lot of small circles overlapping each other. Once I was happy with that, I added a few more circles to make the eyes and pupils, and created a mouth by using an arc, then I added some smaller details, such as a triangle for the nosem lines for the eyebrows and more ellipses as the ears. Additionally, I used the p5js reference website as a guide for working with the shapes.

After finishing the portrait, I started working on the interactivity. My basic idea to achieve the changing background colors was to randomise the RGB values, but at first I was unsure where to start, so I looked to The Code Train videos as a reference, specifically the video on random functions. From there, I was able to implement the random function in my code and add in the interactivity.

Code I’m proud of

My favorite part of the code is the interactivity section. After I wrote all the code for it, instead of changing color when I clicked the mouse, the background was rapidly changing non-stop. Again, I made some adjustments to it and managed to make it so the base colors were showing; however, the interactivity was still not working. I kept looking through the video and trying to change things in my code, but I was not able to make it work. After 20 minutes, I decided to ask AI for help, and it immediately pointed out to me that I had accidentally put the mouse click function inside my draw function. Immediately after fixing that mistake, the feature was working as intended.

function mouseClicked() {
    r=random(0,255);
    g=random(0,255);
    b=random(0,255);
    r1=random(0,255);
    g1=random(0,255);
    b1=random(0,255);
    r2=random(0,255);
    g2=random(0,255);
    b2=random(0,255);
  }

Reflection

As I continue this class, I hope to further my mastery of the website by learning more about it’s capabilites and create even better projects. In terms of improving this first project, I think I’d want to look into adding more kinds of interactivity, possibly some kind of animation. In addition, I’d want to learn more techniques that could have helped. Overall, I’m happy with what I was able to achieve during my first assignment using p5js.