eleasurecreativecoding

[eleasurecreativecoding]

Ah! Finally done! This was actually so exciting to make (though extremely, extremely agonizing at many points). I actually woke up this morning expecting to present on a failure, just based on how my meeting with Thea went last night, after I had been trying to get the keypoints to track with no success for eight hours and wanted to tear my hair out! But this morning I was really determined to get it to work and for it to turn out how I wanted it to, so I dug a bit deeper and figured it out. 

I came into this class not knowing how to code literally at all, and struggled a fair share throughout the semester. I am really proud of how this came out, and I am glad that I decided to really challenge myself instead of taking a safer route. The face tracking was really difficult to get going, but it was so cathartic after hours and hours and hours and hours of work that I finally got it to function how I imagined it. I love that this project is a little “self-portrait” of me; I find it really interesting that this class showed me how to portray myself and my taste and through code on a digital interface!

[eleasurecreativecoding]

Last night was really frustrating, but I came out the other end today! I could not for the life of me figure out why my poses were not tracking, and then why the scale was so large, which was preventing me from being able to apply a mousePressed function to the buttons. I ended up going back over Shiffman’s code, as it was a little simpler than the other PoseNet example I was using. I found that I could not change the scale and video location of the poseNet, but it worked when switched the entire project around so that the mirror with the video was on the left side instead of the right. Then, I was able to delete the red dots and track the pins to the shoulder when the mouse hovers over the pile of pins on the ground. 

The original p5 example I was using seemed more complicated than Shiffman’s and also did not have an example of the eye tracking, so I ended up combining the two. I made a function for each of the filters called drawGlasses, drawPins, and drawLashes, which triggers the filters when the mouse hovers over the object. 

I really did not think I was going to get this to work, so I am so happy that it turned out how I wanted it to! 

https://editor.p5js.org/eleasuree/sketches/MpZxgObGb

[eleasurecreativecoding]

These are the filters that I have created using Shiffman’s example of poseNet: a set of pins (goes along with the punk-ish theme), some eyelashes, and some black sunglasses. I created these in a separate sketch on p5, but I am having a lot of trouble integrating them into my project. When I add all of the elements, including the source images, the html source, and all of the necessary variables and setup things, it creates error messages in other parts of the project, like saying loadSound has an error, which I am overwhelmed with and don’t know how to fix because my project has a lot of code to comb through. 

I also tried to add another icon to the original sketch, a pile of pins, to act as the button for the pin filter. However, when I uploaded the png and put it into the preload(), it made my whole page get stuck loading, so I had to take it out. There are no error messages, so I don’t really know why it was doing that. 

I also had problems even accessing p5js on my computer, through links or through going directly to the website without a link. The entire editor would just show up blank. I ended up clearing the cache (I think) on my computer, and it started working again. 

I’m stressed because I have been trying all weekend to get the last portion of the project done, and I feel like I spent waaaaay too much time on the details. The filters are the most integral part, and I can’t even integrate them into the project.

[eleasurecreativecoding]

This phase of the project has really been tough, and I’ve spent a lot of time, like hours a day, trying to work out all the details. What really was hard was getting all of the buttons to work. I also am not happy with how many lines of code I have, I feel like it could be organized more maybe using classes, but I am not super confident in my ability to use them, so this was kind of a safe move to ensure functionality. 

As seen in the video, I added another album that switches when clicked and plays, I added icons, buttons, poster changes, light changes, and hover strokes. 

I really struggled particularly with the poster change, because I tried making a button out of the icon using the button.mousePressed(posterChange), but for some reason, I could not get the posters to switch back once they switched the first time. I ended up just using the mousePressed() on the pink square, and it worked. 

I also really struggled with the background color change, but I ended up getting it right with the button.mousePressed(bgChange). I lost my video somewhere in this process, and decided just to not worry about it while I fixed everything else. I ended up getting it back eventually, but I don’t really remember how. It seemed like the more I tried to add functions, I would break other things, and have to go back and try and fix everything at once, which was overwhelming. 

I also added hover strokes on all the buttons, which took me a minute to figure out for some reason, but I am happy with how they turned out. On the album on the top of the shelf, there is a stroke that appears but does not disappear when the mouse goes over it, but I can’t figure out why. I also added highlights to the icons so that it shows that they are pressable for the filters to show up, which I like the look of. 

Next step is integrating the filters using buttons. I have made the filters in a separate sketch, with some difficulty, but I will make another post and talk about that specific process there. 

[eleasurecreativecoding]

I have forgotten to post about my progress thus far, so this is more of a cumulative post to talk about how the last few weeks were going. I have had a blast making this and I’m very excited to see how it turns out. 

I first started by compiling all the images I wanted to have in my sketch, and laying out the design before I worked on the functions. I loaded all the images, such as the record shelf, the rug, the record player, the frame, and the objects on the carpet and tried to put my own alternative twist on the Y2K style bedrooms of the older games that this concept is based on. I was worried that the frame would be too big in proportion to the rest of the objects, but after looking back at more inspiration of older games, the face is usually larger in comparison as it emphasizes the purpose of the game, which is to play with makeup and accessories. 

In my most recent meeting with Thea, we discussed ways to condense the code by using classes, which I plan on doing this weekend as I tidy everything up for the final presentation. I also have been working on making buttons out of the images at the bottom, which will control the face filters. I’m going to do sunglasses, eyeshadow, and maybe earrings.

 I am also trying to figure out what to do with the square buttons on the side, I think I am going to make them change the light and the room tint when pressed. I also plan to add music that will be able to bee changed when you press on the record sleeve on top of the shelf. I do have a lot to finish this weekend, but I’m really looking forward to finishing it up because I’m really happy with how it has turned out this far! 

[eleasurecreativecoding]

This was the first project in the class that I was really excited about making! It seemed like a lot of concepts clicked and it was actually really fun to make! I followed the videos and made a little window with a live camera that has two buttons which each play a different song, and I tinted it red. I knew that I wanted to incorporate some of my favorite music, so I took two songs off my laptop and put them into the assets. Then, I made buttons using the DOM concepts we learned recently, and incorporated a toggle function to play and pause each of the songs when their respective buttons were pressed. I called Thea and she helped me rework my if/else statements so that the songs would not play at the same time, and then I edited the button labels to reflect which song was playing and which one was paused. I then found a punk-ish (or as close to that as I could find) font and added it to the HTML file. I edited the buttons in CSS so that I could add dashed stroke that resembled a patch of some sort. Lastly, I added the album covers to the assets so that I could load them when their corresponding song played. This actually was the hardest part for me because I couldn’t figure out how to change the width and height, but then I realized I had to put in the parameters just like any other shape, and it worked!

[eleasurecreativecoding]

This is my project for the body tracking ML assignment. First, I made a maze using a bunch of different sized rectangles. Then, I created a small smiley face that tracks the nose so it can be guided through the maze. This project was a lot more intimidating than it actually was to do, but then again, my game is extremely simple. My process basically followed the tutorial that was linked in the assignment, which made it a lot easier! I did have trouble getting the circle to line up with the nose at first, which was frustrating, but then I realized that I needed to change the x and y positioning for the part that says “canvas.elt.getContext("2d").drawImage.”  I would like to go back and add some more interaction when I get a chance, because it’s kind of boring, but I am proud that I figured this out and got something done! 

[eleasurecreativecoding]

Overwrite Correction (Switch Assignment)

https://editor.p5js.org/eleasuree/sketches/IU1HWAoD7

Since I accidentally overwrote the switch assignment, I redid it using the same concept!

[eleasurecreativecoding]

Objects and Arrays - Class Example

https://editor.p5js.org/kelsierose94/sketches/WQlWDUCJn

I found this fun fishtank sketch on P5 and I was really intrigued by the narrative of it. A class is defined for “food” which entails the clicking of the mouse onto the screen to create food, and also the function “CheckIfEaten” which entails the food bits disappearing when the fish touches the food. The show function defines the size of the food. I really liked this instance of class because I have been trying to think more about how objects can dictate narration. Usually when I code my sketches, I just try to make something that works. Now, I think that classes are helpful in that they compartmentalize the parts of a narration and make it easier to think about how the pieces fit together as a whole. 

[eleasurecreativecoding]

Objects and Arrays - Group Project

https://glitch.com/edit/#!/objects-and-arrays-project?path=script.js%3A92%3A19

For my OOP project this week, I worked with Sam and Nick to create a space scene. Sam started the space theme with the stars and the asteroids, so I thought it would be a good idea to “set the scene” by adding orbiting planets. I did this by creating a class called “planets” and functions called orbit() and show() to rotate and draw the objects. I added very subtle strokes that were a few shades lighter than the fill color because I thought it might look cool to make the planets look like they were glowing. I had a bit of trouble initially with this, because I don’t think I fully grasped the syntax of OOP or what the “this” function did. I ended up watching Shiffman’s videos a few times and working along with him, which really helped so that I could be walked through where I needed to put the different parts of the class, including calling it. I haven’t ever worked with any rotations in JS, so I was happy that I figured out how to do that. I think I could have improved the visual spatially by maybe having the small planet go in front of and behind the big one in a flatter, wider circle, to make it look 3d. I think it looks kind of funny given the perspective of Nick’s UFO. In hindsight, I think Sam, Nick and I could have discussed the aesthetic of the visuals a bit more because I don’t think they are very cohesive. Overall, we worked really well together and they were really helpful when I had a problem that I was overlooking and could ask them for help. 

[eleasurecreativecoding]

Functions Assignment

Source sketch: https://editor.p5js.org/eleasuree/sketches/8pVJj1gVi

Updated sketch: https://glitch.com/edit/#!/simple-tennis-court

For this week, I learned my lesson from last week not to bite off more than I could chew. I thought editing my tennis court sketch from a few weeks ago would be a good way to introduce myself to working with functions because it was a very simple sketch, so Nick and I talked about how it would be really simple to turn it into functional blocks. The only two functions I had to declare was “court()” and “ball()” to make the lines of the court and the ball and its movement. I actually ended up getting rid of the mousePressed function in the original sketch and opting for a bouncing ball style movement, because I thought it would mimic the movement of a tennis ball in a game better. I wish I knew how to combine the bouncing ball and the mousePressed by setting limits so that when the mouse is clicked on one side of the court it would only move within the other side, like a real game of tennis. I tried to work through this but it proved to be a little frustrating so I just left it as it is. My code is extremely, extremely simple which is kind of embarrassing (lol) but I find that I am more successful when I stick to the basics and do what I know how to do. I’m hoping that soon I will be able to make my code more complex. 

[eleasurecreativecoding]

Loops Assignment

https://editor.p5js.org/eleasuree/sketches/1uv73KP1-

I had a lot of trouble with my assignment this week trying to figure out how to make my variables accessible given its scope. I had two versions of this sketch initially, because I ended up rewriting it once I figured out how to do a nested loop to create the windows. In the original sketch I had my UFO moving perfectly, but when I tried to transfer it to the updated version of my sketch it wouldn’t work. I had a zoom with our professor and she helped me by pointing out that I was using x and y as both a local and global variable, which prevented the variable for the UFO movement from being accessed. I ended up keeping x and y as local variables in my nested loops and specifying the movement variables as UFOx and UFOy, and it ended up working great! I also wanted to make the alien a button to turn the light beam on and off, but I was struggling with that as well. I decided to just leave it as it is and take the small victory so that I didn’t frustrate or discourage myself too much! 

[eleasurecreativecoding]

Satisfying User Interaction

The user interaction that I chose to highlight are the buttons on the Spotify iOS app. It’s something I use every day that I think is really satisfying. Specifically, I love how the heart icon vibrates and flutters when you “like” a song and add it to your library. Not only is the physical use of the button weirdly satisfying, but its affordances are really clear. 

https://spotify.design/article/bringing-the-spotify-heart-to-life

[eleasurecreativecoding]

Assignment 3 - Buttons/Switches

https://editor.p5js.org/eleasuree/sketches/gYasVl4TY

For this week’s assignment, I created a lightbulb with a chain that lights up when the circle on the end of the chain is pressed. I used the “if/else” function to make sure that when the button was clicked, the colors would lighten, and when it was clicked again, it would turn off. I know the user interaction is not complicated at all and is not really a game, but I tried my best with something that would not confuse me too much. I think this is pretty similar to most user input. If anything, I think mine lacks the affordances that are typically indicative of a button or a switch that is inviting interaction. I think I’m starting to get the hang of this, but I have a tendency to challenge myself too hard initially and get frustrated, so I am trying to make things I know I can complete successfully. 

[eleasurecreativecoding]

Assignment 2 - Part II

http://www.filippobello.com/portfolioI 

For this part of the assignment, I picked the online portfolio of the 3-D artist Filippo Bello. It is a very interactive website and I like how much motion is involved. When I think of artist portfolios, even my own, I think of very flat, non-intrusive spaces. However, I really like how Bello’s website uses motion to envelop the user into their work.