Unit 57 Human Computer Interfaces for Computer Games

Workshop 2

Screen Shot 2015-12-01 at 14.21.26

We started by listing the steps of brushing our teeth to make it easier when working out pseudocode.

Screen Shot 2015-12-01 at 14.24.56

Here is the pseudocode for brushing your teeth.

Screen Shot 2015-12-01 at 14.42.13

Here’s the pseudocode for a 3D cup drawing

Here is the final code and the result of the code.


For this task we had to follow a YouTube tutorial to make a button, or in are case a make shift switch out of 2 wires, change something on Processing. This task was fairly complicated but the tutorial made it a lot easier to understand since we just had to copy and paste most of the code.

Screen Shot 2015-12-02 at 15.24.32

Here is the Processing code.

Screen Shot 2015-12-02 at 15.24.48

Here is the Arduino code.

Screen Shot 2015-12-02 at 15.23.54

Here is Processing when the button isn’t activated.

Screen Shot 2015-12-02 at 15.24.03

Here is Processing when the button is activated.


Different ways to Interact with Games


Source Date: 05/01/16

Joysticks were one of the first ways to interact with games when they were first being created apart from keyboard and mouse. The joystick allows for more precise movements and doesn’t rely on a binary form of input. Now joysticks/flight sticks are used for flight simulators because you can move the more advanced models in three different axis which allows a lot of control for these games.


Source Date: 05/01/16

Here is how a basic two axis joystick works.

Gesture Control


Source Date: 05/01/15

Gesture control is when a camera or webcam is used to to motion track your gestures to input a command. This hit the mainstream market when the Xbox Kinect was released and made it easy for the average person to access motion tracking and allowed you to play games with this technology.

Voice Commands/Recognition


Source Date: 05/01/16

Voice recognition is when a microphone picks up your voice and then are recognised by the device and then used to do a function on the device depending on what command you have said. This became more frequently used with new technologies such as Siri for iPhone.

Touch Screen


Source Date: 05/01/16

Touch screen technology has revolutionised the way we use devices today. Almost every phone that is released in the last couple of years has included a touch screen of some sort. Touch screen allows users to control their device with either their finger tips or a stylus. This makes the users experience intuitive and easy to learn.



Source Date: 05/01/16

The keyboard was the first input used for computers. It is ideal for submitting text and performing complex tasks on the computer. The inputs on all the buttons are either on or off but keys can be used in combination with each other to make more complex actions.



Here is a video I made that shows how FaceRig works.

The camera or webcam detects your face and places white dots on your key features of your face such as the outline of your face, your nose and the mouth. It also targets your eyes and marks them with a red dot. The dots update position every time the position of your face moves. These dots are then mapped to the virtual character and you are then able to control the character with your movements.



Project Proposal


BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design ( Interactive Media)


Learner Name: Owen






Specialist Area: Interactive Design



Date:     20/01/16


Section 1


Working title:





What you will work towards producing: (Detailed description of your proposal)

I will be creating a joystick that will control a game in Processing.





Section 2

Influences, starting points and contextual references:

I was influenced by previous joystick design such as those used for the very first games and flight sticks that are used for flight simulators.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I looked into how a basic joystick works and the electronics involved to make one work.

Section 3

Intended techniques, non digitial and digital processes:

I will be making my joystick out of wood and will be using an Arduino to control it.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Research

Week 2: Generate ideas and develop prototypes

Week 3: Produce outcome

Week 4: Produce outcome and evaluate


Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will self evaluate my work and I will let others critique my work.

Ideas Generation

Joystick Idea


Here is a drawing for a basic joystick design. I also need to find a way of adding resistance to the joystick.


Here is a basic cardboard prototype of a joystick.


This gif shows four directions of movement on the joystick.


I added cork on the end of the joystick so it’s easier to hold and becomes more ergonomic.


I added four direction arrows to show the directions of the joystick.


Here is a gif showing how the joystick will control the player on screen using paper.

Colours for Direction Arrows

Here is a variety of different colours that could be used for the colours of the arrows. I feel that the brighter colours on the top row would work best for the arrows because they have a high level of contrast compared to the lighter versions and darker versions.

Ideas Development


Here is the plan for 3D designing the parts needed to make the joystick.

Top Surface

Here is the top panel of the joystick box.

Assembly Box

Here is how the box will assemble.

Inside Part

Here is the part that will go inside the joystick box.

Inside Box

Here is what the bottom of the box looks like with the part inserted.

Box with RodBox with Rod2

Here is the box with the rod for the joystick.

Assembled Joystick 1

Here is the assembled joystick.

Assembled Joystick 2

I decided to increase the size of the ball on top on the joystick. I feel this will make the joystick easier to control and more ergonomic.

The only problem I have at the moment is that I don’t know how I will support the joystick and allow it to move freely while keeping it in the same place because at the moment the joystick is just floating.


Produce Outcome


Here is the basic system for each player movement in Processing. When the two wires are not connected the Arduino sends the value “0” to Processing which changes nothing on the software. When the wires are connected the Arduino sends a “1” to Processing and then this can be used to activate a function, in my case this will be used to move the character in one direction. I will make the Arduino send different numbers to Processing for different directions.


Here are the six pieces of wood that are used to make the box of my joystick. The four squares on the right are the sides of the box, the woodgrain piece on the top left is the lid of the box and the piece below is the internal piece. The lid will have a hole drilled in the centre so that the joystick can be placed through it, however, I have not decided on the size of the joystick yet. Also I need to think of a way to hold the joystick in place and create a pivot point in the lid. I could either use a rubber grommet or I could use some sort of two axis gyroscope/gimble. I also need to create a square shape in the internal piece of wood.


I have arranged these pieces of wood in this way so that all the pieces of wood can be the same size and it saves time when cutting them out.



I am currently undecided on the height of the internal piece because I need to know the length of the joystick first.



I decided to get a larger breadboard so I have more space to work with.


Here is the keyboard I have decided to take apart so I can salvage the button/keys for my project.



I realised if i was going to just use the buttons I would have to remove the circuit and the plastic casing to hold the circuit.


I removed the piece of plastic from the keyboard and then attached it to the buttons below the keyboard. I then plugged in the keyboard to the computer and it performed like it did before. Now I need to work out how to use these keyboard switches in my joystick. If I go ahead with this method I won’t need to use an Arduino since I can just use keyboard inputs instead.


I improved the Arduino movement system so that it can control three way movement in Processing.


I added the final direction to my movement system, however I have a problem. This problem is that some of the directions move faster than others which is odd because all of the values for the speed of the movement are the same, plus there is some latency with the movement.

Screen Shot 2016-01-26 at 16.04.12

I managed to fix the problem of lag by reducing the amount delay between each loop on the Arduino. This means the Arduino updates 20 times a second approximately. Also this fixed the speeds of the movement.

Screen Shot 2016-01-26 at 16.15.31

Here is the movement code from Processing. I feel I need to make the “game” more interesting because at the moment it is just a rectangle moving in four directions.

After some more testing it seems that the with delay set to 50 it seems very unreliable so I set it back to 100.

I have tried adapting my basic controls and applying it to other games I have found on the website OpenProcessing.com. The first game I tried was a version of Snake.

Screen Shot 2016-01-27 at 15.09.46

This wasn’t very successful because the game required quick responses and there was a large amount of lag between touching the wires together and the snake actually responding. I decided to try out a slower paced game which was Frogger because I think it would be easier to control.

Screen Shot 2016-01-27 at 14.36.37

In this game you have to control the frog and make it cross the roads safely. This was much easier to control so I think I will go for this when demonstrating my joystick.


I managed to get four buttons which I will use for my joystick, instead of connecting two wires together.



I threaded the copper wire through the holes in the button.


Then I soldered the wires to the buttons so they would stay connected. I also soldered the white wire with the breadboard pins so I could easily connect the buttons to the breadboard without soldering.


Next I tested out if the button worked with the Arduino and it worked successfully so i repeated the process for the rest of the buttons.


After fixing all four buttons to the Arduino I tested them all together and they all worked successfully.

However, I found that the contact points that I soldered were very weak and were prone to snapping frequently. So I had to solder them again.


I found the centre of the vertical line of each side of the box when it was assembled. I had to offset it slightly due to the construction of the box.



I then managed to fit the buttons into the holes drilled into the wood and they were a perfect fit.



Here is what the box looks like with all of the buttons together.


When moving around the soldered wires, I noticed they had all snapped off due to a mixture of my soldering skills and the wire being too thin and brittle. So I decided to get some new tools to get a better result.


I got a new soldering iron because the previous one wouldn’t reach a high enough temperature to melt the solder consistently.


I also got these new wire strippers that removed the wire casing effectively and quickly which increased the speed of this task significantly.


Here are all the successfully soldered wires and buttons.


I tried insulating some of the wires but it wasn’t successful so I decided to leave this.



These are the triangle that will support the box in the corners and will direct the joystick into place. Below is the process of constructing the box.







Here is the box.

Here is a video I captured of the prototype working. I used a piece of PVC pipe as the joystick and use my hand to hold it in position. I think this worked fairly well and displayed my idea successfully although there were a few technical difficulties when setting it up for presentation but they were solved quickly by just running the program on my computer.

Final Evaluation

Overall I feel this project went well although I definitely found it a lot harder than the previous projects. I made sure my base idea was actually achievable because it would mean I would actually have something to show and if I finished early I could improve on my idea rather than having something unfinished or not working.

If I was to do this task again I would have definitely finished the aesthetics of the box by finishing the lid and making a support to hold the joystick. I would have also made the joystick more ergonomic. Some other small details I would have changed would have been making the cable management more organised, this would have including insulating all of the soldered connections and maybe wrapping up all of the cables into one neat cable. Another idea was to have more 360 degrees of directional movement, this would be achieved my using variable resistors to measure how much the joystick has been moved. This would have created a far smoother experience and would have been more intuitive to use.

The final product worked well although it has room for improvements so if I had more time I would continue working to refine this piece.


Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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