Creative Coding Final Project

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.

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.

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.

One thought on “Creative Coding Final Project

  1. Noel, this is a fantastic project with a solid concept. You had us all cracking up in class this week. I’m so curious to see the enclosure you plan to design for the show.

    Thank you for explaining your development process in your blog post. Great strategy to build out a p5-only version before merging it with the Arduino code.

    I notice that there’s a variable for the fill color of the paddle that is mapped to the window height. The map function has one extra argument in there for the target range. Removing that extra number will allow the paddle color to change color as it bounces, if you still want that to happen.

    You’ve mentioned that you intend to review the material and the videos after the summer session ends. For additional practice, here are some interactive practice questions that move through much of the same material that we covered in class: You also might try our worksheet practice questions again if you’re not bored with them.

    Thank you for all your participation and contributions to the conversations in class this summer. It was a pleasure to have you in class, and I look forward to what you do next in Low Res!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s