coding – Page 2 – Alan Winslow

Serial Communications

This was a tough week of labs, but I can see serial communication’s huge potential once I iron things out.

Everything worked well in the Intro to Asynchronous Serial Communications lab. I connected the circuit, map out my readings, and test ways to send data in different formats. After doing some extra readings, the code started to make more sense as did the Terminal App interaction.

Terminal app repeating serial output.

Mapping the output to a single byte.

Testing Serial.write

Sending values in different formats.

My problems started when I integrated P5 into my workflow. I was able to download the serial control software and the libraries needed to complete the lab fine. However, when I started to code in P5 I kept receiving error messages including “undefined is not a constructor (evaluating ‘new p5.SerialPort()’) (sketch: line 5).”

I plan on discussing the errors in class so that I can re-run these labs.

Video and Sound Final

For our final Video and Sound project, Stuti, Sara, and I teamed up to create an interactive Alice in Wonderland themed experience in Unity. The project’s goal was to create a surreal representation of moving to NYC for the first time. The main character is a mouse that falls into a magical tunnel. At the end of the tunnel, the mouse starts its journey by navigating four subway cars. The first being a cramped apartment – next to a social/going out car – third a car where the mouse needs to navigate the crowded and confusing Manhattan streets- finally making its way to a cramped and crowded car that closely resembles real life. In the end, the mouse walks out of the final car, dropping back into reality.

Individually each one of us contributed a car, mine being a color-blocked cramped apartment. Upon entering, the character is met with a mirror where they can check themselves out and see that they are a mouse. As they progress, everyday furniture is all over the place. A stove is upside down; food is floating, a fish tank is tipped over. In the subway windows, videos of NYC are playing on the loop. When the character walks by the tv, an invisible trigger turns it on, playing a short video of pigeons in Washington Square Park. Finally, the faint sounds of neighbors can be heard through the walls.

The team collectively worked on troubleshooting our individual cars, compiling the entire project, creating the entry and exit points, and the final car. All three also agreed to meet up after class to further polish and expand the piece.

Some ideas for future expansion include:

Having the mouse turn back into a human in the final car.
Introducing scanned objects and people.
Adding more cars.
Making a more seamless experience.
Adding more objects that we create.

I couldn’t ask for a better team. We spent hours on zoom collaborating, brainstorming, and laughing at all the errors we needed to fix.

Leaves falling animation

This week our assignment was to either re-work or create a new script using functions to compartmentalize our code. I like starting from scratch so that I can redo things I’ve already learned while adding new features. So here we go! The leaves are changing here in NYC, so I thought, why not do a Fall theme.

To start, I wanted to make static leaves of varying colors. I created a function called “leaf” within it; I drew the leaf shape, gave them random fall colors, and placed them randomly throughout the frame.

I was happy with what I had so far, but I wanted to add some animation or movement to the piece. Ideally, I wanted the leaves to change color and fall. To tackle this, I started researching how to make the leaves change over time. First, I tried LerpColor. Below is the description from the P5JS reference page.

“Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp() but necessary because otherwise, numbers outside the range will produce strange and unexpected colors.”

I couldn’t get this to work for me and thought it had to do with the fact that I called noLoop() at the beginning of my script. Next, I tried using an if statement and framerate(). Again, I couldn’t seem to get it to work.

I needed another set of eyes on my problem, so I reached out to Peiling Jiang at the Coding Lab. We had a great hour-long conversation, and since I had already started reading about classes and arrays, he thought we could incorporate them into my project.

Slowly with his incredible patients, we made our way through the project. First, we made a class for leaf rather than just a function. Inside that class, we could do everything I wanted to do from having the leaves color change to make them fall based on the script’s framerate.

All in all, it was a success, and a big thanks go out to Peiling for help.

Repetition with loops

This week the assignment was to “create an interactive artwork that implements the concept of repetition with variation.” Understanding loops and their functionality has been a challenge for me, but this week it finally clicked. Is crying from joy and relief a normal response to learning how to code?

For my assignment, I wanted to make a series of ellipses that the user could modify, but that also changed independently. To achieve this, I used mouseX to adjust the circles’ width and called a random function to control the height. The ellipse is within a nested loop.

To add a little more complexity and test out some new functions, I added mousePressed to stop the loop and doubleClicked to restart it.

Give it a try here:

Rollover – Button – Slider

This week we were teamed up to “make a rule-based animation that incorporates motion and interaction and includes a user interface element of your design.” Jenny and I collaborated. Luckily we both are working in NYC and could safely meet on the floor to spend an entire day focusing on the project.

We set out to make a button that when you hover over it, bouncing balls appear on the screen. This undertaking seemed both challenging and executable. We knew that we needed to use if statements to constrict the bouncing balls to the canvas, so we started there.

First, we set up all our variables.

Next, we started writing out our if statements one for each side. We thought that if the ball reached the edge, we would multiple the direction by -,1 reversing it. This worked great, but the code seemed very long.

After giving it some thought, we came up with a way to shorten everything down. Instead of writing out an if statement for each side, we used an if statement containing || (or). This modification cut our code down significantly and made it easier to read.

The final step was to make the rectangle that would activate the bouncing balls.

After we completed the sketch we wanted something just a little more dynamic. So we decided to add one more statement which changes ball size back and forth.

Click here to see the final sketch.

I had a great time pairing up on this project. It was fun collaborating, bouncing ideas off each other, and having someone to help troubleshoot. Every week I develop a much deeper appreciation for every button, switch, and component of a computer.

Clock Failure – Character Success

At the start of the week, I had the idea to make a clock. I was concerned that I was biting off more than I could chew but excited to take on the challenge.

First, I laid out my sketch to have 60-second blocks, 60-minute blocks, and 24-hour blocks. I would call the second, minute, and hour functions to light up the blocks. Using a variable for RGB colors would blick in the current time setting when it advanced, one random color would be left behind. My first problem was the clock wasn’t running. I soon realized that I needed to code some sort of statement to move the rectangle. With the help of Philip Cadoux, I learned IF statements. A sample of that code is below:

The clock advanced based on the clock on my computer with a couple of problems. It always reset and didn’t show the proper time. I made a jumbled timer. Lost, I sought out some office hours. I had a great conversation, but we couldn’t come up with a proper solution. After spending a couple more hours on the project, I became frustrated and decided to put this project on hold until I learn more about IF statements and loops. I will come back and complete this sketch!

In the meantime, you can see the current sketch here.

I still wanted to create something this week that uses everything that I’ve learned so far. With a new sketch and idea, I got to work drawing an interactive version of a doodle I’ve drawn for years. This is Frank, the Gowanus Canal monster. *Gowanus Canal is a highly polluted body of water in Brooklyn that I lived near for years.

When you play the program, the bubbles rise from the bottom but using -frameCount. Frank’s eyes bounce back and forth that I achieved but using a random variable—finally, the color mix of the water changes based on mouseX and mouseY movements. I used two background settings, one blue and one green, to make the mixing effect.

Below is the code:

This sketch isn’t as elaborate as my original clock idea, but it brings me a lot of joy. I tackled some new techniques like mouse movement, variables, and frameCount in a more light-hearted approach. The friends, I sent this to also got a good laugh out of it. Sometimes simple is better, but I will finish that clock!

To see Frank in full glory, head over here.