Final Project Concept (Pivot!)

As we went through our last few classes for Interface Lab we began to learn about many more new ways to create physical interactions to P5.js. This started to spark all sorts of new ideas in my head so I decided to challenge myself to build something different and new. I set about this process by playing around with different sensors to understand what the different configurations can do. I had used the rotary potentiometer in one of the labs to create a device that could move a ball on 2 axis on the screen in P5.js and I thought that it might be cool to create a device that used different types of potentiometer to control a game in P5.js, A game with a twist!

The first thing I did was to ensure that the input from the Arduino would communicate with the P5.js sketch by way of the P5.js serial app. This allowed me to begin working on a P5 sketch that could be manipulated with the sensors attached to the Arduino. I built the setup we learned from David in class and immediately ran into problems. I had not connected the lower part of the bread board to the upper part of the bread board and nothing on the lower part would function! Luckily I got some help with this and I was able to move forward.

Once this setup was functioning I was able to swap out sensors to see what would or would not work. Previously I had used an LDR sensor in place of and FSR sensor which I was able to explore concept ideas with however the rotary potentiometer required a bit more work to swap out if I wanted to use an LDR or FSR sensor for that matter.

It was about putting a resistor in line for the power to the sensor and setting it up a little differently. With a lot of effort I got the FSR to connect. At this stage I had 3 different inputs, a rotary potentiometer, an FSR and a button all connected next I had to make sure that there was reading coming from all three. Opening the serial port and creating print values in the Arduino IDE I was able to get a read out that let me know the sensors were functioning. I wanted to use the FSR for an idea I had but I did not realize how much work would be involved in executing it!

Now I had my Arduino set up, I had my sensors giving a reading, I had the Arduino connecting to P5.js and I had a basic sketch working that was acting based on the input from the sensors. What I wanted to create was a game that was a little like pong except in reverse. Basically a paddle bounces up and down the y axis of the screen and the objective is to get a ball past the paddle into the end zone to win the game. Except you can never win this game! More on this later!

As part of the losers game I needed to ensure that there was no way for the player to get the ball to the end zone. How I was going to achieve this was by creating an enemy that never lets you get the ball to the end zone. This was going to be the second part of my Arduino struggle. It was also the reason I used the FSR to create the input for moving the ball along the x axis. Pressing the FSR moves the ball along the x axis to the end zone. Releasing the pressure or force on the FSR the ball returns to the other end of the screen. I needed to create an interaction that stopped the FSR being effective this is when I turned to my servo motor!

I hooked up the servo on another pin on the Arduino and then connected the FSR to the Arduino too. Fairly basic but still a job for me given my limited experience. I got the FSR to activate the servo and then began trying to figure how to map it correctly. This took a bit of trial and error. Then it was about transplanting this code into the other Arduino sketch in a method I refer to as the Frankenstein. This is where I cobble together a bunch of code and hope for the best and then when it inevitably doesn’t work try to solve the problems through the process of elimination.

I managed to get the Frankenstein monster to work but it was not working with the P5 sketch! Many hours and a lot of head scratching I went back to tutorials on how I could get it to work. My big issue was forgetting to put in the correct characters and switching between Arduino IDE and P5.js caused me to do things incorrectly. I found slowing down to a snails pace and checking everything several times made things more smooth, slow is smooth and smooth is fast! Well at least I hope that’s how it will go in future.

After some disasters and misfires with the code I got the FSR to activate the servo whilst simultaneously moving the ball in P5.js. I then made a very basic prototype of the system which I taped to my desk to test. I had a family member try it and seen the flaws in the interaction with the physical element. Next stage is to get the mapping for the FSR and servo to correspond with the distance the ball moves. Once this has been achieved I can start creating the enclosure.

UPDATE

I got the enclosure worked out and attached the servo, potentiometer and FSR to the enclosure. I tried to take into account ergonomic considerations.

Once I had managed to do this I had to test the game again. There is a lot of interference from the cables being all bunched up inside the enclosure but it was still as frustrating to play as intended!

Finally some instructions on how to use the controller were the final touches.

This has been a really fun project to work on, I really enjoyed the use of the different skill sets we learned over the past 5 weeks and consolidating the efforts into this piece of whimsical art.

Creative Coding 1.3 Functioning Functions!

This week we had to work on creating discrete code blocks called functions. The idea behind using these functions is that they can be used repeatedly instead of having to write lots of individual pieces of code to achieve the same result. I did a few exercises to prepare myself as my pace of learning this is not that quick.

I found a cool resource here https://happycoding.io/tutorials/p5js/creating-functions to learn how to create functions. I had been watching the coding train videos which are great but found myself constantly rewatching the videos and pausing all the time. This on the other hand was not video based and was really great for me to grasp the concept.

The first thing I did was create an individual flower and then called the draw function for the flower. I typed out the original code in the tutorial to do this.

Once I did this I was able to create several more instances of the flower in different sizes and refresh the sketch to produce more flowers of differing sizes.

I then tried to use a function to create bees on the sketch but could not get this to work! I will work on this element to improve. I decided to try creating a new sketch using my own functions and made a house.

The next part of this challenge was to create multiple houses which I also need more time to figure out. The roof is separate from the main part of the house as a function, I would like to figure out how to change that and also give the individual parts color. That is what I have to get to grips with next.

I did the other exercise of replicating a sketch assigned to us by using functions.

Here are the links to the sketches I worked on this week.

House

https://editor.p5js.org/Joycey210/sketches/_VL7B3xPJ

Single Flower

https://editor.p5js.org/Joycey210/sketches/U7o-YTrTA

Multiple Flowers

https://editor.p5js.org/Joycey210/sketches/Rn7oYB8B8

I am getting to grips with functions but still need more practice to be fully aware of how a function functions!

Final Project Concept

For my final project I am hoping to build off the positive reinforcement water bottle stand. I want to look at adding a way to communicate the act of drinking water with p5.js.

This way the physical action of drinking water can not only have a physical out put by way of the servo motor but also via the screen of my computer.

Ideally this would have its own screen so it could be used in isolation of a computer.

I see the device working in the following way.

On picking up the water bottle to have a drink the sensor is exposed to light which activates the servo. The servo then rotates showing the nice work! sign.

When this occurs the Arduino also sends an output to an LED as well as possibly a speaker. These could be 2 more signifiers of a successful interaction with the device.

The Arduino will also via serial port interact with a sketch in P5.js.

The sketch on the screen will be of a fish tank with some fish in it swimming. Every time the bottle is picked up the water in the fish tank depletes and then reminds the user to refill their bottle.

I have a couple of ideas on how to achieve this.

What will be required for this will be:

Arduino Nano

LEDs

Speaker?

Servo motor

Cardboard

Batteries?

Jumper cables

Resistors

LDR sensor

I hope to achieve a digital and physical interaction from this device and perhaps see if the same concept be used in different ways for different types of scenarios.

Interface Lab: working hard on hardware! I/O project.

For this project I continued on from labs we were assigned in the previous week. After lots of trial and error I managed to get some things working.

I enjoyed trying to combine different sensors with outputs. I did run into several problems trying to get outputs to function and always checked input sensors via the console to see if there was any reading. Once I knew these were functioning it was about trying to get an output to react to the sensors reading!

There were a few issues with servos not functioning but I was able to get a hold of a smaller servo which could function off the Arduino Nano. I got this smaller servo to work with the pressure sensor and with the LDR sensor. I though the LDR sensor was pretty cool in place of the pressure sensor and began thinking about ideas to use it with.

One of the things I forget to do quite regularly is drink water. I thought what if I could create a positive reinforcement habit loop by creating a device that gives me a compliment every time I have a drink. I decided I would use the LDR as an input and the servo as an output to create this device.

I used the following to build this:

1. Servo
2. LDR
3. Arduino Nano
4. Breadboard
5. Jumper cables
6. Resistor
7. Empty smartphone box
8. Pencil
9. Double sided and regular tape
10. Cable tie

I set up the Arduino as per the diagrams and code here:

https://itp.nyu.edu/physcomp/labs/labs-arduino-digital-and-analog/servo-motor-control-with-an-arduino/

I changed out the pressure sensor for the LDR and with some adjustments to the code got the range of movement for the output where I needed it to be.

I then created a rudimentary enclosure frame the smartphone box and put all the Arduino setup inside of it leaving a hole so the LDR would be exposed. Once this was done I attached the servo to the outside of the box to test it. When I was happy with this I removed the plastic attachment form the motor, attached a pencil to it and made a small sign/flag to attach to the pencil, then I attached this sub assembly to the servo and it was ready to test.

With a few final tweaks to the code to make sure the sensor was in the correct range I tested the final product.

I think it would be cool to advance this project more by having it log interactions that shows how often the bottle was lifted up and then weighs the bottle when it is put down so you can see how much water is being drank. It may also be useful to put a small note board on the pencil that has reminders for tasks. Then each time you drink some water you check your list!

Interface Lab: working hard on hardware! Week 2 Labs

This weeks adventures in hardware proved to be many hours of trial and error, mostly error.

After spending too much time trying to get speaker to work with Arduino Nano 33 I finally gave up. It wasn’t for the lack of trying however. I though a lot of it was to do with wiring to the speaker which is an 8 ohm unit and here’s an example of how I tried to wire it up.

It turns out that there were some issues around the Nano not being able to drive the speaker! I moved on to trying out the next part of the assignment as I had expended a lot of time on this.

I went on to trying to attach the servo to the Arduino. I got the servo attached but it also would not function. Based on the prior experience of trying to attach the speaker I cut my losses with the servo and got hold of a smaller servo after ordering online and came back to it a day or 2 later.

Good news! The smaller servo worked! Awesome. Here’s a video of the pressure sensor working with the motor.

I tried out the LDR sensor with this set up to and it worked. I now have a few options to connect the servo and the sensors. This will help with coming up with some ideas for the next assignment which is an I/O project!

Creative Coding 1.2 Still figuring it out!

This week we had to create a sketch from patterns and loops, I am still getting to grips with the concept of creative coding so these exercises are proving to be a challenge. I am learning slowly to understand what is going on as I create a sketch.

I decided to create a pattern that consisted of multiple layers of flashing colors on top of each other. It is inspired by my time spent in Huaqiangbei in Shenzhen in China. This area is the biggest electronics market in the world and as you wander around these markets you see hundreds of thousands if not millions of LEDs all flashing on and off!

https://editor.p5js.org/Joycey210/sketches/0ZXpXoo1j

I think my biggest issues with executing code is trying to figure out variables. I get confused about logic quite frequently and regularly have to refer back to videos and tutorials.

With more time using P5.js I am confident some more of the problems I have will become less frequent! I have to do more of the challenges.

Senna’s Ghost Lap at Suzuka

I have been an F1 fan since I was a kid and one of my heroes was Ayrton Senna. Getting up on Sunday to watch the races I would be in awe of Senna’s demonstration of speed and skill in driving one of the fastest, most powerful cars ever created. In this clip Senna speaks about driving beyond his conscious, he may have been in the flow state.

Senna was more than a driver, he was capable of untold unbelievable emotion that swayed to both ends of the scale. He could be easily hurt by others actions but he himself could be ruthless in his pursuit of glory. He was a hero and an antihero rolled into one.

I will never forget the day he crashed at the San Marino Grand Prix on the 1^st May 1994. Seeing it live on TV most people thought he had survived and was brought to hospital especially considering the race went on to be completed meant no one knew for sure that he had been killed in the crash. Unfortunately his wasn’t the only fatality that weekend. Roland Ratzenberger also tragically lost his life in a crash the day previously.

20 years after his death Honda recreated one of Ayrton Sennas fastest laps at the Suzuka circuit in Japan. They used the engine telemetry data from the car on that lap to recreate the ghost lap through lights and speakers situated around the circuit all lighting up and activating in sequence of the data recorded and engine sound produced as Senna drove around the circuit.

It produces the most eerily beautiful effect and seeing it makes the hair stand up on the back of my neck every single time.

It is an incredible piece of work.

Here is a link to the video of how it was produced and the process behind it as well as the final result.

Enjoy!

Senster by Edward Ihnatowicz

Philips the electronics giant commissioned Edward Ihnatowicz to create a sculpture for its new technology center Evoluon in Eindhoven. This commissioning came about as a result of a previous work he produced, a cybernetic sculpture called SAM. SAM is an acronym for Sound Activated Mobile.

SAM was a flower like object with 4 fibreglass petals on which 4 microphones where attached. This was mounted to a spine made of cast aluminum components. The microphones detected the direction sound was coming from and reacted to the sound through movement which was powered by hydraulic actuators.

This gave a truly unique experience from a device that looked in form to be recognizable as a flower responding to an individuals sound input. It seems strange that he chose this as a form factor given that flowers don’t normally react to sound! It may have been the requirements of focusing sound in the direction of the microphones meant that this particular form factor was needed and even then the movement could be unpredictable which adds to the charm of the object.

The Senster was a cybernetic sculpture on another scale, much larger and with more moving components than the SAM it took the form of an abstract lobster claw. It acted under sound input also and had more dexterous movements coming closer to an animal in how it behaved.

What I thought was fascinating about this piece was for me not just the physical device and interactions that came from from individuals experiencing it, but its connection to the commercial technology industry as a centre piece of a technology center for one of the biggest electronic companies in the world. Was it a sign of the future? That we will interact with pieces of art and be entertained by them? That companies would one day take the lessons learned from observing how these interactions occurred and then implement features that fit these interactions into products that we use every day?

Many companies today actively engage in creating experiences which involve developing new technologies as a result of understanding how people react to new experiences. These experiences come in the form of art or installations. Nokia Bell Labs in recent years have reinvigorated their program for E.A.T and make the connections between engineering and art as a result. Lego have installations at Lego House in Billund, Denmark which are designed to encourage children and adults alike to create objects from random Lego pieces and build stories around them. Recently Lego launched an app that allows you to scan your pieces and makes suggestions of what you can build from them. Could this new app have been developed as a result of thousands of hours of people playing and interacting with the installations at Lego house?

Today we are surrounded by technologies that react to our inputs in different ways, many of them we probably don’t even notice anymore and take for granted. The onward march of technology enables us to interact with objects in ways we never could before. It helps us to interact with new products we may not understand if it was not there as an enabler. It in many circumstances the technology could have been informed by interactions with interactive art.

To me there is a significant connection to be made. Senster commissioned as a piece of interactive art by Philips could have been one of the seminal moments in time that brought us on the course of developing our emotional relationships with technologies in the products we use in our homes today!

Adventures in Arduino Pt.1!

The assignment we got this week was to complete some labs based on our previous weeks class. This was to be a steep learning curve for me in all the things that could go wrong when prototyping some basic electronics. I had watched the vast majority of the videos prescribed to us before the course so I felt I had a reasonable grasp on things. I may have been wrong!

We had to use some of the components we purchased before the course to create a circuit which had 2 LEDs on it. The circuit would have a button on it that when it was not being pressed one LED would remain on, in this case the blue one and when the button was pressed the blue one would switch off and the red LED would come on. Seems simple right?

Wrong! The first major lesson I learned was my breadboard was not functioning. No matter what I tried nothing would work. I repeatedly switched cables around,changed resistors, used different LEDs all to no avail. I knew the actual Arduino was fine as it was showing up as connected to my computer. After much trouble shooting and frustration I realized it was the breadboard. A little panic and a few phone calls later a friend of mine who plays around with electronics a bit dropped by with some smaller but better quality bread boards. Problem fixed!

I wired everything up and connected the power from the computer, compiled the sketch and hit upload. I got an error telling me that the sketch could not upload! After some searching on the internet it turns out that the windows app for Arduino from the App Store is very buggy.

Uninstalled it and then downloaded the program from the official Arduino website. Installed it and the relevant updates required to get the Arduino connected. Finally I could get this to work. I didn’t work! Well not as intended. Time to check had I connected everything correctly. Again!

Example of taking out one component and how it affected the circuit.

This video has time lapse taken over a number of hours showing how I had to change to a new breadboard. I also had some issues around software updates for the Arduino itself. At the end I finally manage to get the circuit to work.

I did try the other speaker sketch but ran into issues immediately. Hope to get this under control by next class!

Creative Coding Crash Course 1.1 Self Portrait,and learning the fundamentals!

This week the assignment I had to do involved learning some fundamentals of coding and trying to change my original self portrait. It was going to be several days of frustration as I have zero coding experience!

For my original sketch I created a wheelchair and user motif, my challenge was to try and do the following.

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.

Did I do this? Yes and no! I did manage to do get a sketch created with an element controlled by a mouse but it was not my portrait sketch. I did manage to create a sketch that one element changed or was different every time I ran the sketch. I didn’t mange to create a sketch with an element that changed over time, independently of the mouse. However I did manage o learn how to animate my original self portrait with what I learned from this weeks video tutorials!

I really struggled with learning about variables which meant many hours of repeatedly watching the videos until some of the information stuck, then I just repeated exactly what was going on in the tutorials to really try to grasp the lessons. It was a laborious process but I feel like I am starting to understand!

This is the code I created to declare elements of the sketch. In order to make the elements move I had to apply a speed declaration to each of the elements too! I am sure that this can be done much more quickly and much more easily! I got it to work however!

This video shows how the animation works. Where I ran into some problems was when I tried to apply the same speed variable to all of the elements. It didn’t work at all. What I had to do then was create an individual speed variable for each element and then had to further apply the speed variables to specific points on some of the elements. For example on the arm2 element I had to apply the speed9 variable at x1 and x2 to get it to move correctly! It took a while to do all of the elements once I figured this out.

This image shows how I applied the variables as part of the draw function. This was a steep learning curve!

https://editor.p5js.org/Joycey210/sketches/UsquPh_zR

This is the link to the sketch of my updated self portrait.

https://editor.p5js.org/Joycey210/sketches/SYgifJsX0

This sketch is the one I used the mouse to control the sketch. The mouse click reset the sketch.

https://editor.p5js.org/Joycey210/sketches/_8GPC7yqs

In this sketch I tried some more experimentation with moving elements with the mouse while implementing object literals!

It’s been a challenge for me as a person with zero coding but I hope that I can grasp things a little quicker as a result of learning the fundamentals!