Monday, 17 December 2012

Fun games


This in an Internet game called Curve Fever

It can be found here http://curvefever.com/ 

It il a multi player game where other people can play against each other online. It is simple yet fun. The game involves the player to move about collecting different power ups which either effect you or the other players. the aim is to avoid crashing into other player and be the last one standing. points are given to to best players.




This in an Internet game called Ice Temple

It can be found here http://www.miniclip.com/games/ice-temple/en/

This game allows the player to control 2 different characters with the arrow keys and W,A,S,D keys.
one character is made of fire and can only go in the fire pits, he will die if he touches water.
the other character is made of water and can only go in water, she will die if she touches fire.
they have to help each other out by pulling  levers to help each other out to collect diamonds and get to the checkpoints. It is simple yet addictive.



















This in an Internet game called Snow Line


It can be found here http://www.miniclip.com/games/snow-line/en/

This game involves the player having to draw a line with a pencil to create a path for Santa  The path needs to be in  the right place to enable Santa to collect the presents and get to the checkpoint. If the path is drawn wrong then Santa will stop moving or fall over. This game makes it quick and easy to retry if the line is drawn wrong. it evolves problem solving skills and slight accuracy with drawing the path.




















What makes a game fun?


  • Make it easy to replay
  • Simple controls
  • Make it challenging, so the player wants to continue
  • But not too challenging, so they don't want to give up
  • Good looking illustrations 
  • Sound effects 


Computer and videogames are potentially the most engaging pastime in the history of 
mankind.  This is due, in my view, to a combination of twelve elements: 
1. Games are a form of fun.  That gives us enjoyment and pleasure.
2. Games are form of play.  That gives us intense and passionate involvement.
3. Games have rules.  That gives us structure.
4. Games have goals. That gives us motivation.
5. Games are interactive.  That gives us doing.
6. Games are adaptive.  That gives us flow.
7. Games have outcomes and feedback. That gives us learning. 
8. Games have win states.  That gives us ego gratification.
9. Games have conflict/competition/challenge/opposition. That gives us 
adrenaline.
10. Games have problem solving.  That sparks our creativity.
11. Games have interaction.  That gives us social groups.
12. Games have representation and story.  That gives us emotion. (Prensky, M 2001)


Microsoft’s Encarta World English Dictionary (2000) defines “fun” as
1. amusement: a time or feeling of enjoyment or amusement Just for fun, we wore silly 
hats.  
2. something amusing: something such as an activity that provides enjoyment or 
amusement Skiing is fun for the whole family.  
3. mockery: playful joking, often at the expense of another What's said in fun can still 
hurt.  (Prensky, M 2001)


These state what makes a game fun
1. Rules 
2. Goals and Objectives 
3. Outcomes & Feedback 
4. Conflict/Competition/Challenge/Opposition  
5. Interaction, and 
6. Representation or Story.   (Prensky, M 2001)




Prensky, M. (2001). Fun, Play and Games: What Makes Games Engaging. In: Hill, M Digital Game-Based Learning . MN: Paragon House Publishers. p05-1-05-31.









Homework

These eyes were created using the mapping function. the eyes X and Y are controlled by the mouse X and mouse Y. The mapping creates an offset so for example when the mouse is at x 0 the eyes position will be at x 200. when the mouse x is at x 600 the eyes will be at x 400. It creates boundaries that the eyes position stay inside. 


This doesn't seem to work embedded on the blog. if you click on the link, you can view it in open processing  this was created using the same method as the example above. the only difference is I have replaced the ellipses with images to give it a better look and feel.


This example doesn't seem to work properly either. Embedding it doesn't seem to find the images. this uses an combination of the mapping function. particle arrays and a mouse over with a mouse pressed function.


Tutorials in class

These are all the tutorials that Seb demonstrated with us during class. with all these tutorials I know all the basics to coding with processing.


This is using a simple function which adds 1 to the x any y position on every frame drawn. this causes the rectangle to move down the page diagonally. once it reaches the the bottom corner an if statement is used to reposition the x and y back to 0.

This uses and if statement which makes the ellipse show on mouse pressed. the position for x and y is controlled by the mouse position. because the background colour is inside the setup function it only draws the background once. this gives the affect of lots of ellipses being drawn.

This uses a combination of a class and an array. the class holds all the properties of the rectangle ( x and y position, width and height). the array list is then used to call up the rectangle class and draw it in different x positions 3 times. A Boolean statement is then used to define whether the mouse is inside the rectangle width and height.  if true the colour will change, if false it will stay as it is.


These particles are drawn with an array. the particle size are generated at random sizes between 0 and 2. velocity is applied to the x and y positions to make the particles move. the velocity is generated at random speeds too to make them look more natural. An array is cycled through generating a new particle every frame. there is a maximum number of particles generated before they are deleted, this stops processing slowing down from to much data. the maximum amount for these particles is 5000.


This example is using a for loop to create an ellipse through a range of HSB (hue, saturation, brightness) colours. It uses the map function to cause the ellipses to increase in size when the mouse rolls over them. we use 'dist' (distance) to work out how far away the mouse is away from each ellipse.


This is using a class to contain the data for the particles. It has gravity, fade and shrink added to it. Gravity causes's the particles to float up, fade causes the opacity to fade out and shrink causes them to get smaller in size. the particles class is called up with an array which counts through all the particles to draw them and apply the effects to every particle.


This is using the same particle technique as about but with the x and y positions controlled by the mouse position. It is them activated by the mouse press. With the properties tweaked it gives the affect of an explosion.


This is using float variables to hold the properties of the shape. It adds  the grow property to the width and height to make it get larger on every frame. it uses a counter to keep it between  0 and 600.


This is using the float variables to store the properties in.  an if statement is used to choose between red and blue. the if statement say it the rectangle reaches a set size then shrink. then when it reaches the next set size, grow.


This is using an array to draw out the rectangles with a different x position each time. it then uses the if statement to cycle through the array and decide whether the mouse is inside or outside each rectangle. if the mouse is inside the width and height of the current rectangle then the set colour will change.


This is using easing by multiplying the speed by a percent. this means that when the speed reaches the mouse position it will slow down by a little bit each time it passes. this will happen until the number reaches zero then the trail will end.


This uses an if statement with else if. it detects whether the mouse position is in the top corner then if its not it cycles through each corner to find where the mouse is. depending on which corner the mouse is in the colour of the rectangle will change.


This i an example of a basic pong game. it is using float variables to hold the properties for the ball. The speed is added onto the position in both x and y to make it move around the screen. An if statement is then used to make the ball bounce back in the opposite direction if it hit the edge of the screen. this is done by saying if the ball position plus the radius is equal to width or height, -speed away from position.
the bat it just a rectangle with the x and y position added to the mouse x and y. An if statement is then used to   to find whether the ball is inside the width and height of the bat. if it is bounce off, if not it will go outside the edge of the screen.

Sunday, 9 December 2012


Learning the Basics

This was the first lesson with processing. It was a good introduction to get familiar with drawing the basic shapes. I learnt how to set-up the page with size dimensions then started creating within the draw function. 

This example was to introduce colour with opacity. it uses RGB followed by opacity eg. 
fill(255,0,0,200);


this Exercise was toget tha hang of drawing the basic shapes with:
rect();
ellipse();
line();



This was a good exercise to get used to the grid system of x and y. I planned my image out on graph paper first before applying it into processing. I used a combination of lines, rectangles, ellipses and bezier curves


PixelPhones

After looking at Seb's work I got a better understanding of what could be done with processing. These examples involved the user to  be interactive with the work. I feel like I will start to understand processing more thought once I start having ago at it myself.

http://seb.ly/work/pixelphones/

PixelPhones is an open-source platform that can turn smart phones into individual pixels of a massive audience-sized display.

Lunar Trails

http://seb.ly/work/lunar-trails/





PixelPyros -Digital fireworks 

http://seb.ly/work/pixelpyros-digital-interactive-fireworks/


http://areweinthefutureyet.com/

Here is an example of processing using a screen  shot from back to the future. It uses processing to generate the current date and time to the viewer.


The start of processing Module

To get started with processing I have looked at what it is and what is possible with this coding language. here is a brief write up of what processing is.

"Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production." Fry (2012).

Before this module I did not know what processing was. I have looked at examples of what can be achieved with processing top get a better understanding of it. Here are some examples of peoples work created with processing.

City Symphonies


A traffic simulation is used to power the movement of vehicles through different sections of road networks in London. From a street level perspective the motions of traffic combine the sounds to create sound scapes that are unique to the place and time. The roadside becomes a new context for sound – the city is the score. McKeague. (2012)





Solar, with lyrics



Solar, with lyrics. from flight404 on Vimeo.

Weird Fishes: Arpeggi



Weird Fishes: Arpeggi from flight404 on Vimeo.


Magenetic ink, test render 01




Magnetic Ink, test render 01 from flight404 on Vimeo.

Flint ball



Flint ball from flight404 on Vimeo.


Memo Akten - Ameoba Dance








All these examples are very inspiring to what can be achieved with processing. I do find them far to complex to get a vision of what I might be able to achieve though. All these examples look like it would take years of practice to get this good. I need to see some basic examples to get a better understanding of the concept.




Fry, B and Reas, C. (2012). Processing. Available: http://processing.org/. Last accessed 9th Dec 2012.

McKeague. (2012). City Symphonies. Available: http://markmckeague.com/work/city-symphonies/. Last accessed 9th Dec 2012.