For my final project in Creative Coding I am using my hard learned, very limited skills combined with my efforts in Arduino to create a game that is impossible to win! This project may be seen as a metaphor for my efforts at coding a game that is impossible for me to win!

The past couple of weeks we learned a massive amount about the power of P5.js and it really opened my eyes to an incredible amount of possibilities once I have developed my skill set further. There are so many things to learn and the versatility of using P5.js with Arduino really excites me.

I felt that I wanted to create something that was whimsical and fun by combining the 2 pieces of software and the ability to use hardware as an interface. The code I put together for the P5 sketch is relatively straight forward. I brought together some ideas taught to us by Ellen and combined that with some code from David that allows the Arduino to communicate with the P5.js sketch.

The main part of the sketch for the game is simple in its premise. It is pretty much pong in reverse where the objective is to move a ball across the x axis on the screen into an end zone while avoiding a paddle which moves up and down the y axis on the screen. The ball can also be moved along the y axis too if required.

The paddle part uses a conditional statement to move across the screen. So I wouldn’t confuse myself and get into trouble I created a sketch which was only the paddle moving. I also used windowWidth and windowHeight properties for the canvas but will probably revert to a particular size for the game. I would then use this sketch later in the Frankenstein method to make the version of the sketch that would be used for the game. This is the sketch for the paddle.

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

I then transplanted this sketch into the sketch that allows Arduino to communicate with P5.js. This is where the fun really began!

I had spent a lot of time trying the various sensor inputs on Arduino and my objective was to create an unexpected interaction, a dislocation of expectation in military parlance. I wanted there to be an enemy stopping you from completing the task at hand of getting the ball across the line but it wasn’t going to be where you thought it would be. When you are distracted with your efforts to get the ball into the goal on the screen my intent was to have a physical intervention prevent you from achieving this.

I selected an FSR to be the input for the ball to move on the x axis. The FSR works by force or pressure being applied to the sensor which changes the resistance in the sensor, the measurement of this resistance equates to the distance the ball is moved. So more pressure applied the further the ball moves. The reason for this was that when the force was released from the FSR the ball would immediately go back to its default position, ready to be moved again by the player. The FSR was the control for the x axis and there is a rotary potentiometer for the y axis. In reality the control of y axis via the potentiometer is completely useless and just gives the user the illusion of control. The FSR is where the real action happens!

So there is a physical interaction by way of an FSR and a rotary potentiometer controlling the ball on the screen and there is a paddle that is trying to prevent you from scoring by getting the ball into the end zone. The next stage was to create the physical interaction to prevent you from reaching the end zone. I used a servo motor to create this interaction.

What I found a little bit confusing was switching between P5 and Arduino I would often forget to put in different things like commas and then nothing would work! it was doubly confusing when I would put in something and there was no error thrown because it was doing something just not the correct thing! This I am sure will get better with practice though.

I started to work on mapping the FSR to the servo motor which would also correspond to the position of the ball on the screen. Basically I mapped the servo to activate before the ball reached the paddles. Then I placed the servo beside the FSR so that when you apply force to the FSR the servo is activated. when the servo is activated its arm pushes your finger off the FSR. This physical interaction occurs while you are concentrating on the screen and is completely unexpected if you ignore the hum of the servo!

Here is the complete code for the game so far. It incorporates the code required to get Arduino to connect to P5.js which is work David Rios produced.

https://editor.p5js.org/Joycey210/sketches/6fH6dZ98n

I still have some work to do on this project such as noise reduction on the sensors and some experiments with the ball on the software side. I also have to finish building the controller which will be used for the game. This will be ready over the next day or so for the Show A Thing Show on Saturday.

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!

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.

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!