ICM FINAL - PROGRESS

For our final, Shivani and I will be working on exploring digital communication/body language. Because users are increasingly forfeiting real conversations in favor of texts or emails we wanted to explore what they are doing in order to express themselves. Based on our research (and personal experience) we found punctuation, capitalization and affective lengthening is used to convey tone, attitude and emotions. We also noticed existing programs such as Siri or Google Assistant lack this level of personalization, usually resulting in texts that don’t convey the desired emotion.

We decided to create a program that types the way the user sounds/wants to sound. We are using the speech recognition in p5 speech to record the words then pushing them into an array. Using p5 sound, we are analyzing the volume, frequency and amplitude to gauge the users emotion.

ICMFinal-blog.png

Based on this, it will apply the respective attributes (punctuation, capitalization, emojis and or affective lengthening) to generate a text that appropriately represents the emotion.

ICMFinal-blog-examples.png

Here is the sketch so far: https://editor.p5js.org/aileenstanziola/sketches/BJRPuCnCm

We still need to:

  • Get p5 sound to log data until the last word is pushed to the array and stop after.

  • Study amplitude, volume and frequency in the data and map out the ranges.

  • Categorize the attributes accordingly and apply them using if’s statements.


ASSIGNMENT #8 - KISS FILTER

For this assignment we needed to create a sketch that used external media, specifying a request to think about how the data in the media can be used. During one of my office hours with Seho we started talking about this. I wanted to know what were the most common ways people interpreted these data, both API’s and external media. In one of his examples he mentioned filters, like the ones used on Instagram or Snapchat. I couldn’t get it out of my head so I decided to make one.

For my applications class, me and my group did a project involving face tracking. A teammate taught me how to write the code in processing which I ended up doing. For this sketch I followed the same sort of structure. I looked up libraries and came across this link/code (https://github.com/lmccart/itp-convo-comp/blob/master/Computer_Vision/03_clmtrackr-p5/00_face-tracking-capture.html) which I used as a base to build off the sketch from. The library used is CLM TRACKER.

The sketch itself still doesn’t work well. I am struggling with finding the exact x and y position and size within (what i’m calling) nested arrays.

The inspiration behind the filter itself came from spending entirely too much time over the weekend discussing KISS.

Here is the link to the code: https://editor.p5js.org/aileenstanziola/sketches/SkfmQuUn7

ASSIGNMENT #7 - STOP MAKING SENSE

For this assignment we needed to interpret external data using API’s or by creating a JSON file. I am one week late on this assignment and still haven’t figured it out.

The main thing I struggled with was making sense of the data that was available to me. Learning how to use the search tools and navigate it was a journey in itself but then understanding that data and extracting it in a way that made sense was even more difficult.

My first attempt was with the New York Times API. After conducting one too many searches trying to understand how the data was documented and getting kicked out of the system because of them, I finally understood the way it was set up. What I wanted to do was look at all the articles written regarding the opioid crisis in the United States and separate what adjectives were used to describe the victims or fatalities. I could not figure it out. Even when extracting just the articles that mentioned opioids and not focusing on keywords, the system would say lets say 1966 matches but when I opened the file it would only give me 10 articles.

After spending entirely too many days trying to make sense of this, I gave up and moved on to a new idea.

I then decided to use the lyrics from one of my favorite albums which also happened to have a very fitting title - Stop Making Sense by Talking Heads. I went on to APISEEDS and downloaded a separate JSON file for every song in the album. Then I used JSON viewer to fix the format and uploaded all 16 files to P5. First I couldn’t get the files to actually load onto my sketch so I deleted them all and kept only one for the purpose of experimenting. The file wouldn’t load still. At one of the office hours one of the residents suggested I use JSON validator which would check that my file was properly written. Thanks to this I noticed I had an extra comma at the end of the file. Once I fixed that I was able to load the one file (didn’t try the remainder 15). At this point I also noticed something else. The lyric part of the JSON files were written in a continuous string separated by /r and /n’s.

Screen Shot 2018-11-01 at 1.08.05 AM.png

I couldn’t figure out how to pull out specific words from these strings in all 16 files so I created a new file that only used the titles from each song as a starting point.

Screen Shot 2018-11-01 at 1.08.20 AM.png

I finally was able to move on to the code part but I am now struggling with getting the button and mousePressed function to pull the titles.

To be continued….

Here is the link to the code: https://editor.p5js.org/aileenstanziola/sketches/SylGNtI37

ASSIGNMENT #6 - HTML + P5 DOM

For this assignment I used one of my previous sketches and switched out the slider for 2 buttons using html in order to change the object’s state.

My main struggle was I previously nested my for loops for the checkerboard background into 1. This were in draw. In this setup, the smiley/sad faces were constantly being placed under the background so I couldn’t see them. I tried to move the nested for loop into setup but it wasn’t working so I separated them back into separate for loops and it worked. I am sure there is a simpler way to do this but I couldn’t figure it out.

Screen Shot 2018-10-18 at 9.02.44 AM.png

ASSIGNMENT #5 - OBJECTS & ARRAYS

I really struggled this week and need to go over the material again. My initial idea was to draw a calendar that every time the user clicked on a day, an image of a beer would appear. It would be called ‘Brett Kavanugh’s calendar’. This is as far as I got…..

Screen Shot 2018-10-11 at 9.29.01 AM.png

I was trying to find a simpler way, using for loops, to draw the calendar grid without having to draw square by square but I struggled with the text and number assignments.

Then I couldn’t figure out how to load an image. Everyone said it was really easy, so for my intellect’s self esteem, I’m hoping I’m just missing something simple (I will spend more time on it).

After not being able to figure those out, I realized I also didn’t know how to incorporate the array which was the whole point of the exercise so I looked for a new idea (a little too late at this point) but I will figure this one out!

Inspired by The Game of Life example in the p5 library and using The Coding Train code for eliminating an object from an array, I drew my second sketch. What I wanted to do was sort of reverse The Game of Life’s interaction, where the user could click on parts of the grid and “eliminate” squares in order to draw whatever they want. I say “eliminate” because what I was trying to do was that every time the user clicked a black square would be drawn (instead of spliced) achieving the same effect.

I have not been able to get it to work yet so here is my failed attempt: https://editor.p5js.org/aileenstanziola/sketches/B1XPv6n57

ASSIGNMENT #4 - FUNCTIONS AND OBJECTS

For this assignment I decided to re-code and simplify my sketch from last week. It kind of worked out but mostly it didn’t (still working on it).

First I simplified all of the rows I had for the checkerboard under one ‘for loop’ (with Allison’s help). It initially looked like this:

//row 1

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 2, 50, 50);

x = x + 50;

}

//row 2

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 50, 50, 50);

}

//row 3

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 100, 50, 50);

x = x + 50;

}

//row 4

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 150, 50, 50);

}

//row 5

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 200, 50, 50);

x = x + 50;

}

//row 6

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 250, 50, 50);

}

//row 7

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 300, 50, 50);

x = x + 50;

}

//row 8

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 350, 50, 50);

}

and ended up looking like this:

Screen Shot 2018-10-04 at 10.02.40 AM.png

What followed was a whirlwind of frustration, trying new things but not being able to achieve what I was looking to do.

For example, I couldn’t get my whole drawing to ‘bounce’. This would happen:

Screen Shot 2018-10-04 at 10.28.20 AM.png
Screen Shot 2018-10-04 at 10.28.25 AM.png

Then, I couldn’t get paused to work. The intention was for the smiley face to bounce and the slider to control between happy or sad.

Thanks to Seho (!) I was able to get the whole drawing to bounce simultaneously. I’m still struggling with the arc (mouth) but it sort of works?

Another thing I’m struggling with was with the transitions of the bounce, pause and slider. I think it looks too choppy, trying to figure out what would make it run more smoothly.

To be continued….

In the meantime here is the link to the final-ish sketch: https://editor.p5js.org/aileenstanziola/sketches/rJ4pL7Zc7

P.S. I tried some things like this, which I would like to play around more with:

https://editor.p5js.org/aileenstanziola/sketches/H1DJnlm97

ASSIGNMENT #3 - CONDITIONALS & LOOPS

For this two person assignment I worked with Shivani to create an animated sketch using repetition and a slider.

We worked on separate sketches then met and merged them by using Shivani’s sketch and the slider from mine.

Here is my initial sketch: https://editor.p5js.org/aileenstanziola/sketches/SJF4XSrKm

Screen Shot 2018-09-27 at 11.33.14 AM.png

The first issue I encountered was not being able to have the variation of color on my grid every other square and not every other row. With help from Mithru and Seho, I did an if/else function using the % component. Every square was separated by 50pixels meaning they were all divisible by 100 so I applied it like this:

if(x % 100) {

fill(b, 0, 255);

} else {

fill(0, 0, 0);

}

Then I started working on the slider. I struggled with the dragging aspect of it. Initially I had used the x variable too many times and that was the reason why it wasn’t working. I changed the x variable under the slider to SliderX instead and it worked (I was made aware of this by Mithru otherwise I wouldn’t have seen it!).

I then met with Shivani and we merged the two. And this is the final sketch: https://editor.p5js.org/aileenstanziola/sketches/SJnGqF5FX

Screen Shot 2018-09-27 at 12.51.12 PM.png

P.S. Some cool mistakes happened like this one when the background was drawn in setup and not draw.

Link: https://editor.p5js.org/aileenstanziola/sketches/HyUL2D9YX

Screen Shot 2018-09-27 at 10.44.01 AM.png


ASSIGNMENT #2 - ANIMATION

For this assignment we needed to create a sketch that includes (all of these):

  • One element controlled by the mouse.

  • One element that changes over time, independently of the mouse.

  • One element that is different every time you run the sketch.

My intention for this assignment was to sketch a loading browser icon-like animation (representing what was actually happening in my head when deciding what to sketch in the first place). My idea was that every ellipse would change colors simultaneously between cyan, magenta, yellow and green to give the desired effect. However, I couldn’t get it to work. Is it possible to do that?? After looking at whatever examples I could find online, I was able to make the ellipses change gradually between the color I assigned using the ++ but it wasn’t what I was going for initially.

Another thing I struggled with was with trying to recreate the mouse icon on the screen. I figured out how to get the rectangle part of the drawing to move on mousex and mousey but I couldn’t figure out how to get the triangle to do it. It either moved only one anchor so it looked like stretched out and wasn’t moving freely on the canvas or this would happen:

ASSIGNMENT #1 - SKETCH p5.js

For my screen drawing I initially wanted to draw my dog (and had hopes and dreams of animating the ball to bounce around the screen) but I also had the idea of drawing a memphis-style lamp. We’ve been buying furniture for the new apt for the past few weeks after moving here and we’re really into anything memphis/anything by or inspired by Ettore Sottsass so it’s been in my mind a lot. I decided to do the lamp first and didn’t have time for the dog but will get to it! (hence the two sketches).

For purposes of colors and placement, I drew the sketches on Illustrator and determined the color codes for each element. Then I moved it to p5.js.

SKETCHES FOR ASSIGNMENT #1 P5JS (Ai).jpg

From there it was a little touch and go in terms of placement, my calculations weren’t exactly right but they were close enough that changing the variables a little gave me the placement I wanted. Shading the triangle was a struggle in terms of figuring out the numbers to separate the shapes equally but it worked out in the end.

I really enjoyed this assignment and I’m looking forward to continuing to play with p5.js and its features (and getting that ball to bounce! and maybe the light bulb to flicker!). For this drawing, the main issues I encountered were:

  • The code for linear gradient. I couldn’t figure it out so instead I divided the shapes and gradually changed their colors in order to achieve the shading effect I was going for.

  • Patterns - out of everything I drew, trying to achieve the pattern (I am not totally happy with it) was the hardest. Is there any way to equally/proportionally/geometrically fill a pattern in a certain space?

(I can’t seem to be able to embed the sketch in here so here are the links)

Full screen: https://editor.p5js.org/full/rJDXt-QOm

Code: https://editor.p5js.org/aileenstanziola/sketches/rJDXt-QOm

INTRODUCTION:

This is my first time using p5.js and with computation. My background is Fashion Marketing and Graphic Design so I have been around it before but not enough to actually be familiar with it.

What got me interested in computation and tech, and ultimately into this program is exploring the idea of how technology can help us enhance our human characteristics - become more human if you will - instead of the opposite. Attempting to break down our complexities into code and further studying us, which hopefully allows us to build tools that can help minimize inequality across all boards. I also want to play with interactive media and the developing of experiences through computation in order to get messages across.