Page 1

Introduction “Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context.” “Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It’s intended for artists, designers, hobbyists and anyone interested in creating interactive objects or environments.” As I learn about Processing and Arduino a blog will be being kept of videos, photos, comments and inspiration that I come across. These can be viewed at

User Interactions 50 photographs were taken to better understand what methods of interaction are commonly used. Of the 50 images it was found that pushing or pressing was the most common method. The least common methods included squeezing and rolling. It is important to understand how humans commonly interact to discover the successes of these which can then be adopted and implemented into other forms of design which has not so far been entirely user base, such as technology which until now has been based around the designer/engineer. It is important in this age to design for everyone and not just a small percentage of people.

Basic Processing During the first week of Processing we did some simple exercises to get used to the interface. One thing that was important to remember was that the canvas worked in a grid system and it was possible to locate or plot an item using coordinates. This was simple. The thing that threw me was that the origin was at the top left instead of the bottom left as typical in ordinary maths application. This took some getting used to. Another thing we learned was the basic set up of Processing. Initially you can set variables and introduce libraries. Then you create a setup which the program will read once. Then you create the draw function which will be where you write the changing parts of the program.

Adding Text The image right shows a simple example of using text in processing. To just have default text on the screen all you have to write is : text(“hello”,40,120); This will type “hello” at the defined location on the canvas. However if you want to use a font and change the size of the text there are two ways to do it. As shown above you set the font as a variable PFont. Then type loadFont into the set up procedure and then before writing the text that you want in the draw procedure you type textFont(a,80); Above you can see that the text is a bit pixelated. That’s because the font has been drawn at size 80 but is only saved at 48 which means that it is being stretched.

Dice Project This was the first week long project that we were set. In class we went through creating the dice step by step. It was created using a random function and switch case. This meant that there were six “cases�. In each case you would construct each face of the dice and via the random function, each time the mouse was moved the dice would roll and land on a random face. Our task was to personalise this experience and change the aesthetic of the mouse. I simple made a box the exact size of my wireless mouse and put a track down it that the infra red could sense. So when the user shook the box the dice would roll. Additionally, for personalisation the user could type their names into the computer and it would appear above their dice roll. As evident in the last picture it was possible to create a sense of competition with this very simple idea.

Music Box Project After learning how to incorporate audio files into sketches on Processing we were set the task of creating a musical instrument. I decided to create a Juke box. There was an option to choose from nine songs. The playing of these could be operated by either clicking on one of he boxes or using the keyboard to choose when to play a particular song or pause it. It was possible to mix songs to create new melodies. Although the aesthetics of this week long project aren’t polished there was a great deal of learning achieved in this. It was with this project that I realised that if I spent long enough with programming I could probably work out the ma

Micro Pet Project This was a project completed in class. At 10 am we were briefed to create a micro pet similar to the tamagotchi. The pet had to respond to the user and allow the user to form some sort of human interaction. In the end we had about 3hrs. The image on the left shows our initial pet. It responded to being “clicked” on different body parts. Its response would be a colour and song output. For example if you clicked its tummy (like rubbing a dogs belly), the dog would turn yellow (happy) and play “Happy” by Pharrell Williams. It turned out that we were allowed another week to develop it and do further user testing which is when we developed it into the middle picture. The third picture shows some basic user testing.

Brief “Your investigation will lead you to the design of an everyday technological gaming experience with a specific focus on the relationship, interaction and communication between, object and user, and, user and object. The responsive final output of the experience must be implemented using Processing. Your task within the design of your final outcome will be on both the game controller and also the game itself. You may choose to re-design an existing game or design a new game through Processing.� This was taken from the brief document and was the basis of the game that I designed. The project allowed me to further explore Processing and creating hardware to compliment the software design.

Game Research From research it was discovered that basic games which require very little commitment or rules are generally called “casual games.� Examples of existing casual games include pac man, solitaire, bejewelled and farmville. What is interesting about casual game is that they are most likely to be used by women and people who would not normally consider themselves as gamers. They involve a very simple game play that you don’t need any special skills to play. They will often be used when the user has a spare moment on the bus or during a lunch break. There are several genres that can be used in casual games. These include, puzzle games, hidden object games, adventure, strategy, action, word/trivia and board/card games.

Imagery It was important to ensure that the imagery reflected the light hearted approach of the game. It is also a simple game and therefore the backgrounds were kept simple and two dimensional to match the simplicity of the game. Initially the colours were quite dark and the clouds were very “cloudy�. This was then developed to have softer, pastel colours to fit in better with the game. A sheep pen was also added to provide a visual representation of the score instead of it merely just being a number.

Concept The game starts with a menu screen. This screen inroduces the user to the aesthetic of the game. The main colours are blue, green and yellow. It’s quite fun and light hearted in appearance. This screen also introduces the user to the character whom the user is helping by playing, in this instance the character is Meg, the border collie. By using a dog as the character in the game it engages with the users instincts to help and engage with animals. Using a dog is far more effective than using an inanimate object or simply just the cursor. The game works by clicking on the sheep. Each time the user clicks on a sheep, that sheep disappears and for the user, it appears to move into the sheep pen. After a sheep has been herded, another one appears at a random place on the field which the user the herds and so on.

Using Processing The code for this can be retrieved from the tumblr page mentioned in the introduction. The code was broken up into the three main section. The initialisation where variables were set up. These included: images, time and scores. The setup included: The size of the canvas, loading of images and loading parts of the score programming. The draw section included: All the functions to make the game work correctly so that if the start button was pushed the game would start correctly and the timer would start and that the score would reset with every game played.

User Testing The game is very laid back and does not require much thought or energy to operate. The dog character, Meg, makes the game more appealing and on a subconscious level makes the user want to play it more than if it were inanimate. Do they want to use it again? The user enjoys playing this game and enjoys the challenge of trying to beat their high score and therefore is likely to play it again and again. Is there anything within it that they might become attached to? Although, only a little bit, the user does become attached to the dog. When they finish a game several users commented that they needed to help Meg herd more sheep, which seems quite extreme considering the short length of the game but evidently the user does form some sort of attachment with the dog and/or the game.

Physical Considerations The mouse is a key component of the game. However, a mouse is such a well know piece of hardware that it doesn’t add anything to the user experience. Therefore for this game a cover has been designed and made for the mouse. I simply represents Meg, the character. The ears are made from black material and you can put your finger into the left one, much like a finger puppet. This adds another dimension of fun and is very practical as it allows the user to access the left click of the mouse. The mouse cover may appear to be quite long but after user testing it became apparent that this was necessary for the hand to rest on. It was difficult to operate the mouse when the hand couldn’t rest easily.

Success? The game was a success. Everybody who played it enjoyed it and found it easy to use while still being challenged to herd more sheep. If more time was available to develop it further the main development would be to include a score board so that each user could see what their highest score was and compete against other players to get the highest score.

Arduino Arduino is a fantastic electronics platform which allows designers, artist and hobbyists to use electronics in a more user friendly way. It’s not necessary to solder for many projects, all that is required is some wires and pins to plug in and start creating circuits. The board is Italian and has a digital side which contains five PWM pins which can be used like ordinary digital pins but are powered by a pulse which can be useful in many ways including dimming an LED. There is also an analogue set of pins and a set of power pins which gives the user the choice of using 3.3V or 5V. All the digital and analogue pins can be programmed as input or output pins. The board is plugged into the computer and programmes which are written on arduino software can be uploaded to the board which will direct the electricity in the correct way. There is also a memory chip which stores the programme so that it can be run from a battery and therefore made far more portable.

Components The first image on the left shows resistors. These are important in electronics as they restrict the voltage flowing to a particular component. There are thousands of different resistors available to give very precise voltages where required. Resistor prevent the frying of boards. The middle image are simply LEDs. These have many uses and are useful to include in circuits to check that the circuit is working. LEDs have two legs. One long and the other short. The long one is positive and the short one is ground. This is how it must be wired for it to work. The third image shows basic male to male wires. These simply provide a path for the electricty to flow through. These come in all colours and sizes. There is no difference between the wires of any colour but universally red is normally used to link the power source and black is used for ground. Wires can be male to male, male to female, female to female and male to male.

Components The first image on the right is a PIR or a Passive Infrred Sensor. This is a sensor which detects movement, It has a dome fixed over the top to allow a greater spacial diameter. This sensor is easily wired with three pin and will give a high/low output which makes it easy to program too. PIRs often have two pots attached to them which allows the designer to change the sensitivity and the time between reading. The middle image shows a potentiometer. A pot is a variable resistor which means that it is possible to change its resistance by turning the know. The third image shows a mini servo motor. This motor is also simple to wire. It will rotate 90 degrees and the speed at which it turns can be adjusted.

Creating a Basic Circuit Creating a basic circuit is easy. The arduino board must be connected to a power source. Either a battery or a computer. A red wire is plugged into the 5V pin and stretched across to the breadboard. The breadboard has two channels that run vertically up the board. One negative and the other positive. In between the two sets of channels there are many sockets which are connected horizontally in groups of 5. So, the wire which is attached to 5V should be plugged into the positive channel on the breadboard. Another wire should then be plugged in somewhere alone the positive channel and then the other end plugged in on the same row of 5 as the LEDs long leg. A black wire should be plugged into a GND pin and the other end to the negative channel on the bread board. Another wire should then be plugged in anywhere along the negative channel while the other should be plugged into the short legs row of five. This will turn the LED on as the circuit is complete.

Morse Code One of the simplest things that can be done in with arduino is making an LED turn on and off. The length of time that it is on or off is easily changed by adding in delays. Morse code is based on short and long sounds/flashes which are composed in different ways for each letter to make them identifyable. Therefore it is possible to write words in morse code with arduino. This is a small sample of code for the morse code exercise. digitalWrite(led,HIGH); delay(1000); digitalWrite(led,LOW); delay(2000); //The letter A digitalWrite(led,HIGH); delay(500); digitalWrite(led,LOW); delay(500);

Light Dependent Resistor A light dependent resistor or an LDR is a resistor whose resistance varies under different lighting conditions. We used it in class in a basic circuit. It was hooked up to an LED and when the light intensity was low the LED flashed faster and if the light intensity is high the LED flashes slowly. An LDR is connected to the analogue side of the board as the LDR reads values in between 0 and 1 and gives an output accordingly.

Assignment 2 Brief Using the Arduino microprocessor you are asked to design an object which exhibits the human response characteristics to an input factor, based upon a specific human response to stimuli (see table below). You may choose one of the input response characteristics below or choose your own stimuli and response if you desire. Physical Object The physical embodiment of your design will consist of a cube measuring 10cm * 10cm * 10cm in size.

Deliverables: -A final working prototype model (submitted to School Office) -An associated printed single A2 project poster (submitted to School Office) -A 1 minute film demonstrating the object working in situ (submitted digitally)

Hui and Steven Project After learning to use the LDR we were set a one week project to create something which used the LDR in it’s outcome. Chloe (my partner) and I brain stormed lots of ideas before decideing to create a narrative invlolving a fish and a shark. A red LED was put inside the fish to represent the heart beat. If the fish’s tail goes into the sharks mouth the heart beats faster. By using a narrative we were able to create a fun and interesting project with opportunities for development.

Inspiration For the second brief we looked at how arduino was used in different projects. The picture on the right involves a box whuch is used as a fortune telling machine. When the user pushes the button the arduino sends a random fortune to the LCD screen. Similar to a magic 8 ball. The middle picture is a table which responds to conversation. Different light patterns appear in different location depending on what is said and how it is said. This creates an interesting visualisation of how technology can be used to represent human interactions. The third pictures shows a “My Biopod�. This is a project which uses arduino to maintain particular environments. It uses a variety of sensors to detect things such as humidity, temperature etc. and then uses these to maintain the correct levels.

Surveillance Today the UK is the most watched country in the world. We live in a society of mass surveillance. Some people think that being watched is a positive thing as in theory it reduces crime and makes people feel safer. However, people are increasingly expressing concerns that the government is encroaching upon human rights and that we have very little privacy left. The image on the far right is a sign that most people will be very familiar with in the UK. The book in the middle is a classic dystopian outlook at how society will develop if surveillance gets out of hand. 1984 by George Orwell tells the story of Winston who is being constantly watched and have no power to rebel or live their own lives. Children are brought up to be aware of people who might be going against the government and to report them, even their parents.

Camera Box Idea After researching surveillance, my group decided that we would like our box to make a comment on mass surveillance. We thought about personifying security cameras and imagined how people would behave if it was their job to constantly be watching people. We considered many attitudes but decided to develop the idea that people would get very bored sitting watching people all day, everyday. It’s in the human nature to criticise other people and pass judgement on them so the idea was to incorporate this into the box. So, our aim was to create a box that looked like a camera, and “took a picture of people” and then displayed comments about each person who walked passed on an LCD at the back of the box.

Software The initialisation of the camera box involved including the liquid crystal library, declaring each pin on the LCD, and setting variables for the time and the options of statement for the lcd to display randomly. The setup for this concept involved initiating the random function and explaining which pins were inputs and which were outputs. The loop section stated that when the PIR reads high, that the LED should go on for 50 miliseconds and then turn back off. (This flashes the led which imitates a camera flash) It then states that a random statement out of the ones mention in the initialization should be displayed until the sensor reads high again.

Hardware LCD- We used an LCD to make the platform to display the thoughts on. To do this we had to wire 8 pins to the arduino to make it backlit and display the appropriate text. Because there were so many wires it was difficult to keep a solid connection so we decided to solder the wires. To do this we stripped back the wires and pretinned them.- An LCD is quite vulnerable to heat damage and therefore it was important to only have the soldering iron on for as short a time as possible. Pretinning makes the wires easier to solder and makes for a neater finish too. We also used a PIR to detect people walking past. So for this project we used, a LCD, PIR, LEDs, Potentiometer and many wires.

Prototype While prototyping different materials were used to make the box. Eventually we settled on a cardboard box, neatened up the edges with gum tape and painted it with black acrylic paint. This gave a decent finish for proving the concept. We cut holes for the PIR, LCD and the LED. Initially we hoped to put a transparent film over the PIR to make it more like a lens but the PIRs sensitivity was severly reduced so we chose to leave this as it was and use the interesting surface of the PIR and make it look like the camera lens. The box was kept simple and inconspicuous to mimic the look of surveillance cameras. While working on the design we learned to solder as mentioned above.

Final Model The final model was made of corrugated cardboard. 5 sides were cut out and taped together and then finished gum tape. To allow easy access for plugging in the battery it was decided that the box should have a removable lid. The lens was surrounded by a silver circle to give it a more polished finish. The LCD was placed at the back of the box and angled downwards to better mimic the way a human thinks. Generally humans keep their judgemental thoughts to themselves and at “the back of their mind�. We then decided to place a small mirror under the lcd to make it more visible. This also displayed the text back to front and therefore reiterated that it was a computer mimicing human actions.

Graphics Our group decided to use basic geometric shapes to create an interesting presentation background which conveyed the surveillance theme. This was inspired by the cover of George Orwells 1984 which depicted Big Brothers eye which is always watching you. The box is being displayed on a shelf in the “beam of light�. This throws up an interesting thought about how even surveillance cameras are being watched. Everyone is being watched, listened to and followed. The small images show the developement and design iteration of our design.

Baby bot idea The concept of Baby Bot came from spending a weekend with my nephew. He is wild. However as soon as he falls asleep he looks so angelic that you just want to go over and cuddle him but as soon as he wakes you remember why you wanted him to sleep in the first place. So, at times when caring for a baby you can’t win. When you want to cuddle it, it starts screaming or being hard work and when they are awake you want them to sleep so you can get some peace. So the idea of Baby Bot was born. The box mimic this behaviour of a baby/toddler. When you watch it from afar it glows blue and its eyes are closed. It looks cute. As soon as you get close to it, it wakes up, starts wailing and goes bright red.

Software The initialisation for baby bot stated that the servo library should be included and set up the variables for the different pins and timing. There was also a variable set up for different states so that when the servo was in use it wouldn’t keep turning. If the PIR got through a loop and the PIR still read high that the motor would stop and not return to where it started. The setup declared which pins were inputs and which were outputs. It also specified times for callibrating the sensor. The loops section was almost divided into two. Two different states (1 and 0). This was to tell the motor what to do if state 1 was true which prevented the motor from constantly moving back and forth.

Hardware For this project a PIR was used which detected when people are nearby. The built in pots were altered to reduce the sensitivity as the box will be displayed in a room which might get quite busy and therefore it was important to ensure that both states (high and low) could be observed. A servo motor was used. This allowed the eyes to rotate and open or close. An active buzzer was also used. This allowed it to simply be wired like an LED. If PIR == High, digitalWrite buzzer, HIGH.

Prototype When making models for this box we tried various different forms. Including cardboard walls with holes in them and open sides. In the end we built a wooden fram and cover the gaps with tracing paper. This allowed the light to easily shine through. The base can be removed allows the contents to slide in and out. This works well for proving the concept. However, perhaps as a development and for a more polished finish, a plastic might be used for the sides.

Final Model The final model was made using the wooden frame which was made in the iteration stage. All the contents were put in one side and holes were cut in the front for the eyes. This meant that the arduino board which had to slide in against a side was facing the back and therefore wasn’t on full view to observers.

For the presentation, the little shelf that holds Baby Bot was made and little spars were put on to mimic a baby’s cot. The box was also fitted with a nappy which added to the cute factor and allowed the PIR to be hidden well.

Graphics This presentation poster was designed to keep in tone with the idea that the box is our baby. We chose his gender and were excited to create him. This poster mimics the excitement and fun that comes with a new baby, whether that is a real baby or a box which mimics a baby. Dummies and other baby accessories were added to the background to further use the new baby imagery which helps to prove our concept. The photos describe the development and iteration process of our design.


Denise Alla


1 685 400

Pie booklet denise allan  

A booklet detailing what I have learned this semester in our Prototyping and interactive experiences module.