[icm week 9] Swipe (capture & CLM tracker)

(TLDR: See my Swipe sketch from this week here.)

I did something pretty simple this week. It’s just a part I decided to add to my Tinder Robot project, which I will likely also make my ICM final. The purpose of this sketch was mostly to test if I could use facial emotion reading as one of my sensor inputs for my robot.

I built this sketch in P5 off of the emotion reading CLM Tracker example, the libraries of which are quite dauntingly complex:

…but I guess that’s why we use libraries rather than make everything from scratch.

Keeping with the idea of my Tinder robot, I wanted to use facial tracking/emotion reading as one of the sensors that would determine whether or not the robot would swipe left or right.

What this means for this sketch was that if the user was making an expressive face (indicating strong emotions), it would swipe right. If the user was not making an expressive face (indicating ambivalence), it would swipe left.

The way I determined whether or not the user was making an expressive face was by adding up all the values the tracker gave for each emotion it detected. The higher the value, the more of that emotion you’re expressing. This should mean that a high total value indicates a strong emotional reaction.

I’m satisfied that the general concept of the sketch works, but it’s really just the bare minimum of what I have to do, so I’m considering this one just as an initial test.

Check it out here. My sketch code is below.

[icm week 8] Soulmate Machine (data & APIs)

(TLDR: Check out the Soulmate Machine here.)

For this week’s assignment to work with data, I’m not sure why, but I knew pretty quickly that I wanted to use Petfinder’s API.

If you are tragically unfamiliar, Petfinder is a website where you can find all sorts of adoptable pets across the country.

I signed up for an API key, read the documentation, and got to work pulling JSON from their site. They had a rather interesting “get random” method that allows you to find a random pet in their database, picking from specific characteristics like breed, size, age, and more.

I thought it’d be fun to make some kind of pet “matchmaking” based on some questions you were asked. (I certainly have a soft spot in my heart for internet quizzes).

I picked 5 questions for 5 characteristics — location, gender, species, age and size. Each answer sets a different result. For example, if you pick “bud light” under question 3, you’ll get a dog.

The page is not much to look at, and that’s largely because I had a lot of confusion with combining DOM in p5 and also editing CSS and the HTML file simultaneously…Organizing things on the page in a way that didn’t look awful was difficult (and I still haven’t succeeded). I also couldn’t figure out how to do certain things like make a button open a link. I think the combination of using P5 and CSS was confusing in particular.

Sometimes, particular answers don’t actually have any adoptable pets (for example, an extra-large baby pig in New York). One challenge I had was figuring out how to 1) read the JSON file to confirm that this was the case, and 2) write the code in p5 to reflect if there was no match. I’m happy to say I sorted it out by looking in the JSON file and seeing that there was no “pet” name when there was no match, so I simply wrote the line if (data.petfinder.pet == undefined) followed with some text saying that there was no match.

The concept for this project was a bit silly (which is increasingly looking like a theme in my work…), but the nice thing about using a real API is that it’s actually connected to the real world of pets that need homes. On the match page, you can click the “in love” link to go directly to your soul mate’s Petfinder page, and maybe even adopt!

You can try Soulmate Machine here. My P5 code is below.

[icm week 7] The Beautifying Mirror

(See The Beautifying Mirror here.)

It was fun to move out of the canvas with DOM this week. All the HTML/CSS stuff really brought me back to my early days on the web, hand-coding Harry Potter fansites in middle school. (Back before we thought this might actually be a useful skill to pursue!)

That’s probably why the page I made this week is sort of early-2000’s nostalgic in style. I wanted to do something with the webcam feature, so I pulled a frame image off the googles and set the camera capture inside. My goal was to play with the idea of “improving” your appearance with the slightly disparaging encouragement of the text on the page. I hope it’s at least a tiny bit unsettling.

my friend Chris tests the mirror

I made my buttons and text in my sketch and created a separate CSS stylesheet.

In the future, I’d love to take this idea a little further with facial tracking software and the ability to screenshot your final image. (And probably better assets that weren’t just random things I found as quickly as possible.)

Check it out!

My sketch.js code is below, but it doesn’t include my stylesheet or index HTML.

[pcomp week 6] Allergic to Love, Joystick Version (serial communication)

I ran into a lot of problems this week!

While doing this week’s labs on serial communication, lots of weird things kept happening — it would work sometimes and not other times, my computer crashed, Arduino couldn’t find the right port…

A few hours in, I realized that 95% of my problems were because I kept forgetting to turn on and off the serial monitor in P5. Even when I realized this I would forget to do it, or do it in the wrong order. This was very irritating.

Eventually, I got it sorted out. In the labs, it was suggested that we wire up one button and two potentiometers. Luckily for me, the joystick that I got for this assignment was literally those three things in one, so once I figured out the code on the Arduino side, I could easily move it into my p5 sketch.

The sketch I decided to add a sensor to was a game I made the other week in ICM, Allergic to Love. In the original version, you use your mouse to move your character along the x-axis, and then clicked to shoot your laser. Using a joystick to replace the mouse was fairly straightforward. The pot in the joystick that controls x-axis movement would replace mouseX, and the button on the joystick would replace mousePressed.

(This joystick also allows you to control movement on the y-axis, and even though this particular game doesn’t require it, I decided to keep that code in just in case in the future I decide to add some kind of movement up and down.)

Like in the lab, I made an array of data in P5 for the 3 sensor inputs: x, y, and button press. The P5 code using the sensor data ended up looking like this:

function serialEvent() {
  // read a string from the serial port
  // until you get carriage return and newline:
  var inString = serial.readStringUntil('rn');
 
  //check to see that there's actually a string there:
  if (inString.length > 0 ) {
    var sensors = split(inString, ',');            // split the string on the commas
    if (sensors.length > 2) {                      // if there are three elements
      if (sensors[0] == 539) { 
          cannon.dir = 0
      } else if (sensors[0] < 200) {
          cannon.dir = -1
      } else if (sensors[0] > 900) {
          cannon.dir = 1
      }
      buttonPress = sensors[2];      // element 2 is the button
    }
  }
}

You can see how I made sensors[0], the x-axis, change direction depending on input, and how I set sensors[2], the button, to a simple variable.

It’s pretty fun to play the game with a joystick. It definitely makes it feel more arcade-y. Even though I had to make it a bit easier to accommodate the joystick, it’s still pretty hard!

My P5 code and my Arduino code are below.

[icm week 4] Allergic to Love, v2.3

[TLDR: Here’s the second iteration of my game, Allergic to Love.]

Our assignment this week was to clean up the code of a previous assignment, which was quite welcome because my code from last week was a total mess. I’m not completely sure that it’s now sparkling clean, but it’s definitely much better than it was before.

Before I made any changes to the game, I went in and reorganized the code. Having not yet learned arrays or objects in class, I was wandering about in the array wilderness a little bit last week and ended up doing something really weird with them. I think I fixed them up now after looking up how to do an array of objects. I found the jitterbug example  to be particularly helpful. Now my falling hearts are arranged like this:

function Falling() {
  this.x = random(width);
  this.y = random(-650, 0);
  this.broken = 0;
  this.hitByLaser = false;
  this.hitTheGround = false;
  this.speed = random(1, 4);
  this.clr = color(255, random(0, 255), random(0, 255));

  this.move = function() {
    this.y += this.speed;
  };

  this.display = function() {
    strokeWeight(7);
    stroke(this.clr);
    fill(this.clr);
    bezier(this.x, this.y, this.x - 12, this.y - 12, this.x - 11, this.y + 8, this.x, this.y + 14); //left 
    bezier(this.x, this.y, this.x + 12, this.y - 12, this.x + 13, this.y + 8, this.x, this.y + 14); //right 
  };

 

I went in and created a lot of my own functions as well.

Finally, I started adding on to the game itself.

Adding sounds made a big difference. I found music from the Free Music Archive and sounds from Free Sound. I’m not really sure where the proper place to attribute would be…I put it in comments in my code for the time being.

Besides sounds, I made a few other changes — the girl now bounces up and down, the landscape is a bit different, and she smiles if you win the game. (But it’s still pretty hard to do so!)

Play the game here.

My full code is below.

[icm week 3] Allergic to Love v. 1

[TLDR: Here’s my (unfinished but finished-enough-for-this-assignment) game, Allergic to Love.]

Oh man, this was a rough one. The beginning was good: Esther and I partnered up to start this project. I really wanted to make a game, so we went down the path of trying to build something that involved shooting at objects that moved on the screen.

Together we got as far as making things fall down, making things shoot up, and coming up with an interim solution for making objects disappear as they got hit. Esther did some pretty awesome work figuring out how to use arrays and create functions, and then we took that code and built separate things on top of it.

I quickly realized that what I wanted to do this week was beyond the scope of what we’ve learned so far in class, so it was quite difficult to sort out some specific things. Once I came up with the theme of the game, it took me a really long time to figure out how to make all the falling objects in the shape of hearts. After some experimenting with for loops, making functions, arrays and bezier curves, I got it!

This was very exciting. I started adding things like making them fall from different heights and at different speeds. Some of the trickiest stuff to figure out was how to make things happen in the win state and lose state. I ended up having to add a bunch of Boolean arrays. It also started to come together aesthetically.

I added some fun things, like making the girl’s skin turn green every time a heart hit the ground. (She’s allergic, after all.)

//if the heart hits the ground
    if (hearts.y[i] == height) {
      if (hearts.hitTheGround[i] === false) {
        hearts.onGround++; // skin changes color
        skin.r = skin.r - 10;
        skin.g = skin.g + 5;
        skin.b = skin.b + 5;
        hearts.clr[i] = (0); //hearts turn black
      }
      hearts.hitTheGround[i] = true;
    }

I also had some crazy mishaps experimenting with the gradient that frankly look way cooler than what I was going for.

There’s still a lot I want to do, and the code is incredibly unfinished and messy. But it’s almost 4 am and I got this thing in a playable state, so I guess now is as good a time as any to stop. And even though I’ve been playing it all evening, it’s pretty hard! I feel like there’s still a lot to improve on here, but this will have to do for version 1.

Check out Allergic to Love, v.1!

My (extremely messy) code is below.

[icm week 2] The beach

(TL;DR: The final sketch is here!)

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.

This week’s exercise builds off of what we learned last week and added more dynamic, interactive and/or moving pieces.

I had an idea to do a sunset scene, where the mouse would control the sun and the rest of the elements would change when the sun went down or up. One of the first things I did (pictured above) was divide the height in two to make horizon. Then I made the ocean by making a large blue arc expand slowly, creating the effect of the tide coming in.

But I wanted the tide to also recede,  so I looked up how to use an “if…or” statement:

[javascript]if (oceanWidth = 800 || oceanWidth = 699) {
tideO = tideO * – 1;
}
oceanWidth = oceanWidth + tideO;[/javascript]

This basically made it so that when the ocean arc reached a certain size, it would get smaller until it reached its minimum size, at which point it’d get bigger again.

I discovered the helpful lerpColor() function, which allowed me to easily make a gradient of colors for the sunset.

But I also wanted to make the colors change as the mouse (aka sun position) changed. I figured that if I could make alpha—or opacity—a variable, I could make it change according to the y position of the mouse. I ended up making two variables that controlled opacity, one for more intense color changes and one for less.

[javascript] a = mouseY;
b = mouseY/6; [/javascript]

I used these for opacity in my lerpColor() function.

[javascript]from = color(225, 22, 84, a);
to = color(243 – b/2, 255 – b/2, 189 – b/2, a);[/javascript]

I also ended up using these variables in a slightly different way as well — by adding or subtracting values to the rgb codes, I could also make the colors brighter or darker as the mouse moved. So my color variables ended up looking like this:

[javascript]cloudColor = color(218 – b, 240 – b/2, 247 – b/2);
oceanColor = color(36 – b, 123 – b/3, 160 – b/3);
whiteWashColor = color(139 – b, 240 – b/3, 238 – b/3);
sandColor = color(194 – b/2, 178 – b/2, 128 – b/2);
sunColor = color(247 + a, 94 + a, 3 + a);[/javascript]

The screenshots above show you what it looks like when the sun is up vs when it’s down. I’m happy I was able to make the sky change dramatically, while allowing the trees, sand and ocean change more subtly.

For the element that changes each time you run the sketch, I have two birds moving semi-randomly across the sky. And for fun I added a little crab that comes out only when the sun goes down. I haven’t figured out how to make these random movements less jarring and terrifying, which would probably help make the entire scene a bit more relaxed and chill as a beach should be. Oh well! Maybe it can just be the eternal dusk beach of your nightmares.

As with last week, I had a ton of fun making this sketch. The screenshot above is just a still, so check out the full thing here.

The code is below. 

[icm week 1] Draw a portrait using code

(TL;DR — See my final drawing here!)

As a person with no experience with either art or programming, our first ICM homework assignment to draw a portrait of our classmate using code felt quite daunting.

But once I jumped in, I had a lot of fun, even though I definitely didn’t go about the process in a particularly efficient way.

I started by doing a (very rough) sketch on paper based on the picture I took of Isabel in class. Then I tried to code her hair using the curve() and curveVertex() functions.

This did not go very well. I quickly realized that graphing out my sketch would make it much easier to plot exactly where I needed to place the curves and other shapes.

Forgetting the existence of graph paper, I drew out a 30 x 20 graph, which multiplies out nicely to my 750 x 500 canvas size. I then redrew my sketch and plotted out coordinates. I made an Excel sheet to quickly multiply my sketched points by 25 to fit my canvas size, which was helpful for both my calculations and for remembering how to use Excel.

 

I’m sure this would have been much easier if I used Photoshop or some other tool to tell me what position each pixel was at, but I went ahead and used the ol’ pencil and paper method anyway. And also a lot of trial and error.

I still don’t feel like I fully understand how to use curves. More specifically, I don’t fully understand how the “control points” interact with and change the curve. I also still don’t know how to change the angle of a curve in the middle of a long curveVertex() sequence. If you look at my code below, you’ll see that I kind of hacked it by putting a bunch of shapes together in the background.

I also had some trouble with arc() to begin with because in order to get the eyes angled in the way I wanted, I had to remember basic trigonometry. I ended up figuring out that you could multiply the radians in the code, and so the angles of the eyes came out like this:

[javascript]arc(325, 198, 50, 54, PI + ((1/10) * PI), TWO_PI); [/javascript]

And I added some flashing rainbow colors for fun:

[javascript]rainbowColor = color(random(0, 255), random(0, 255), random(0, 255)); [/javascript]

Overall, I enjoyed this exercise a lot and felt like it was a good way to dive in to the basics of programming, and taught me how to look things up and ask questions.

I’m pretty happy with the result!

Note: this is a gif version of my sketch so it looks a little weird, but it gives you the idea. See the final sketch here.

The code is below.