Processing

This marks the last day of the Processing project!

Please use the "processing" filter, above, to isolate the posts from this brief.

Evaluation

I don't usually evaluate assignments, like this, but this module's been great, an experience I'll remember for a while. Meeting Seb was cool, being taught by him was... fantastic! Now I'm even more confused as to what I want to do in the future...

Last Day Polish

With just a few hours before deadline day, I am glad to have had the whole day to polish my working game based on the feedback I received.

The changes I've made are as follows:

• Added soundtrack mute functionality!
• Reduced default soundtrack volume
• Tweaked green saturation
• Created custom texture for background

Result

Main Menu



In-Game



Game Over

Helping Hand

This evening, I gave Sam a hand with an issue he was having with his player jump functionality. We solved it together in the early hours of the morning!

Testing & Feedback: Sam and Dave

Over Skype, I managed to get a few friends to test my game and give me some independent feedback.

Sam Scaife

Feedback

• Soundtrack too loud!
• Felt aesthetics could be polished

Dave Grant

Feedback

• Soundtrack too loud!
• Suggested a mute button
• Said it was difficult (what a noob!)

Thanks guys!

A Playable Prototype

So, it's the morning of my birthday, but I have a little time to play-test my game.

I booted it up and constantly tried to beat my top score, and I did, but I also felt that with each run the player unit (helicopter) behaviour needed tweaking. Currently, it was quite difficult to control. With enough runs, I managed to find a sweet spot for velocity and gravity.

With value tweaks in order, I soon found out there was another issue making it hard to play. The gravity, which I was simply reversing to make the helicopter lift was being added too quickly - reaching a too higher value the longer the mouse was held. It wasn't the speed that this value was changing which was the problem, just how high the value was going. With a few new revisions to my helicopter class, I found that simply constraining the gravity, plus or negative, to a value of five made a huge difference to the playability of my game.

Expect some third party testing tomorrow!

An Iterative Approach

With each challenge this module's brought, I've given an iterative approach; this game is certainly no different and should benefit especially from this style of workflow.

Iterative development is defined as building functionality over time. For example, when [you] have a project, [you] continue to add features, interactivity, enhancements, and functionality—one item at a time.

Source: http://www.adobe.com/devnet/articles/designer_developer_workflow.html

Stages of Development

• Working game states; menu, game, game over
• Write block class and test
• Spawn world blocks using Perlin noise
• Make world blocks scroll infinitely
• Write helicopter class and test
• Spawn helicopter with initial behaviour
• Add block object collision checking
• Test world collisions thoroughly
• Spawn extra blocks, randomly, as obstacles
• Test obstacle block collisions thoroughly
• Write score system
• Format, display and test score
• Add best score to score system
• Format, display and test best score
• Improve type aesthetic by using a custom font
• Tweak font size and leading using Fibonacci number sequence
• Improve game aesthetic by colouring world
• Embed retro 8-bit soundtrack
• Create helicopter graphic using Photoshop and embed

Time for real play-testing, which my following posts will cover!

Lesson Five Personal Game Hints

During the last half of the lesson, Seb wrote a simple game to aid us in the process of writing our own. He showed us how to build a simple in-game and game over state, a score system and how to detect moving collisions.

Towards the end of that session, he stood infront of the whiteboard, pen in hand, and went around each of us, asking what our game concept was. Seb gave each one of us personalised feedback to ensure we were a-okay before we set off to write our games!

Feedback

Seb knew what Helicopter was, I didn't have to explain - what a surprise! He figured I'd want a cave and suggested that I used Perlin noise as the algorithm to produce the random, smooth scape I required.

...as demonstrated above, we can use a random number generator to produce values with uniform and non-uniform distributions. However, in each of these cases, there is no relationship between a given random and the next random produced in sequence by the generator. Perlin noise (invented in the 1980s by Ken Perlin), however, allows us to produce a naturally ordered ("smooth") sequence of numbers.

Source: http://www.shiffman.net/teaching/nature/week-1/


Source: http://freespace.virgin.net/hugo.elias/models/m_perlin.htm

Having not used Perlin noise before, I knew it'd be a challenge, but one that'd pay off.

Lesson Five

Final assignment set.

You mission, should you choose to accept it*, is to make a simple game prototype!

Using your new found code skills, like animation, collision detection, basic logic and managing arrays of custom classes, I want you to create a fun game.

It doesn't need an intro page or instructions, it only requires a game play element, and a game over state.

The focus should be on fun and simplicity. There's no point in making a really complicated game if it's not fun!

In order to achieve fun, adjust the speed that things move, how the game is controlled, and how it looks.

It can be abstract, so shapes and lines are OK. Just try to pick nice colours, and have other graphical niceties, like trails and particle effects. Sound effects can also help. (hint : http://thirdcog.eu/apps/cfxr )

Good luck!

* you don't really have a choice :)

Source: http://www.openprocessing.org/classrooms/?classroomID=1197

The Lesson

In todays lesson we brushed up on some fundaments and had a look at translate; in doing so, we covered stacks and push/pop methodologies. I've embedded a video below which explains this well.

Stacks



From the example below, we can learn how both stacks and translate are used. The colour gradient helps us understand, visually, what's going on behind the scenes.

Result

First, we use pushMatrix, this is good practice when using translate as it allows us to revert to the previous matrix, simply, by using popMatrix. With that in mind, we translate X-0 and Y-0 to the center using translate(width / 2, height / 2). Now we can work from, what's known as, the Cartesian Coordinate System.


Source: http://quibb.blogspot.com/2011/03/manifolds-coordinates.html

Every square now drawn at X-0, Y-0 now spawns in the center instead of the upper-left-hand corner. All that's required now is to push another matrix to the stack and draw a number of squares using a loop, rotating them each 5 degrees (in this example) and reduce their scale by 5 percent per iteration. Afterwards, we pop the stack, returning to our previous matrix, the Cartesian Coordinate System and pop again to return to the default matrix. The colours of each square are changed upon each iteration of the loop giving us the nice effect seen below!

Lesson Four

Our first lesson back after Christmas was based around recapping what we'd already learnt, and thus had no assignments or exercises set. I'd remembered what we were taught. Below, I've embedded one of the two example files of the day.

Recapped

Variables
Data Types
Conditionals

We also recapped positioning, animation and collision.

In the first half of todays lesson, we recapped the following concepts:

• Arrays
• Functions

We also walked back through Object Oriented Programming.

Presumably, the above was to prepare us for our next and final feat! Seb was about to teach us how to create a particle system.

The term particle system refers to a computer graphics technique to simulate certain fuzzy phenomena, which are otherwise very hard to reproduce with conventional rendering techniques. Examples of such phenomena which are commonly replicated using particle systems include fire, explosions, smoke, ... etc.

Source: http://en.wikipedia.org/wiki/Particle_system

Having spoken to Seb between lessons, I already knew that he considered what we were about to do, the litmus test of programming languages! Writing a particle system in any langauge requires the use of fundamental programming concepts, and, more notably, the use of objects!

Result

In the following example, the partical emitter is set to be relative to the mouse position. Each partical is an object, so it's crafted from a partical class. The partical class allows us to set up our partical system; we can change how each partical looks and how it behaves. The behaviour is defined through physical properties, specifically velocity, gravity and friction. I shan't go into programmatic detail as the examples would be complex and ruined by the formatting on my blog.

Seb, for the first time, spoke about performance in this session. This requires some understanding of how a computer program operates on a hardware level. With our partical emitter, each partical we create is allocated space in the R.A.M. (Random Access Memory), and as we're creating tens to hundreds every so frame, the possibility of hogging system resources is high! To deal with this, we must ensure that once a partical object cannot be seen it's destroyed or recycled.

The Game-Loop

In a previous post, from the reading of 'Programming Interactivity', I said I wanted to cover the 'Game-Loop' concept futher in my blog. This is that post!

Almost every game can be thought of as having one main function that contains all the game logic, and which is run either when the user does something, or after a certain amount of time. This cycle of running the same core function over and over again is called the game loop, and is crucial to understand for any sort of game development.

Source: http://active.tutsplus.com/tutorials/games/understanding-the-game-loop-basix/

At the heart of all games is a cycle which runs over-and-over; this is necessary, because, unlike a typical program, a game is required to listen, calculate and draw to screen constantly! For each iteration of the loop, certain elements are required to be run in sequence - they are as follows:

• Input: Check for user input and dispatch any keystrokes or mouse clicks detected.
• Resume: Check all paused coroutines for any that need to be resumed. If their time is up, resume them right where they left off.
• Update: Update all Elements, which will advance their positions, fire events, check for collisions, etc.
• Draw: Render all visible Elements to the screen.

Source: http://chalicegames.com/orb/wiki/index.php/Orb

Similar Games as Inspiration

I've basically decided on which game I'd like to cover, but I want to be sure. Below, I've rounded up some extra-popular arcade games, which share the same retrospec as my decision. If anything, having covered these should help me create a similar experience when it comes to tuning my own.

During the late 1970s, video arcade game technology had become sophisticated enough to offer good-quality graphics and sounds, but it was still fairly basic (realistic images and full motion video were not yet available, and only a few games used spoken voice) and so the success of a game had to rely on simple and fun gameplay. This emphasis on the gameplay is why many of these games continue to be enjoyed today despite their technology being vastly outdated by modern computing technology.

Source: http://en.wikipedia.org/wiki/Golden_age_of_arcade_video_games

Space Invaders
1978

Considered the game that revolutionized the video game industry. The first blockbuster video game, it established the shoot 'em up genre, and has influenced most shooter games since.

Galaxian
1979

Created to compete with Space Invaders. Featured a color screen and had aliens attack in swooping formation. It also featured levels and boss encounters.

Lunar Lander
1979

First Atari game to use vector graphics.

Asteroids
1979

Atari's most successful coin-operated game.

Battlezone
1980

Custom cabinet with novel dual-joystick controls, using two 2-way joysticks for movement, and periscope-like viewer.

Source: http://en.wikipedia.org/wiki/Golden_age_of_arcade_video_games#List_of_most_popular_games

Possible?

I wasn't sure I could pull this off, so I did some initial research covering a doubt of mine.

Level Concept

I had some concerns of how to replicate game states, or levels and wanted to figure out how to do it before I started. I wanted a Menu state, a Game state and a Game-Over state; that's what Helicopter required.

After some Googling, I came across the right concept and a previously answered question that told me just what I needed to know.

Question

What are best practices to add gameplay, to specific level? I have some event types, and my game logic now looks like. OnEnterSensor is virtual and is different for each level(01,02 ...). Game type platformer and what about other types of games and their logic description.

Answer

The data you loaded and parsed can be accessed just as you've indicated, using standard conditional logic. If you're looking for conciseness, there are other ways to do conditional logic:

• switch keyword is one (found in most imperative-style languages), while the ?: operators are another. Neither is much more elegant than if, except for small sets of conditionals.
• There is a more elegant way that takes two forms: function pointers (also known as "functors" or in C#, "delegates"), or the structural equivalent frequently used in OO languages, the Strategy Pattern.

Source: http://gamedev.stackexchange.com/questions/21359/how-should-i-add-level-specific-gameplay-code-to-a-level

Initial Game Idea

After a little time to think over what was being asked of us, one main game idea kept coming back to me. I usually start by bouncing ideas off friends and people from class, this idea, especially, seemed to stick as a wise choice.

I already figured that with a week remaining, the game'd have to be simple - not simple to the extent it'd be unfun! Some of the most popular game concepts derived from old arcade games. It was the arcade, retro style I wanted to pursue.

Helicopter

Helicopter was my initial idea; it has a great concept that's fun time-and-time again. The game is based around a side-scrolling cave which you have to fly through, but it has a twist. Your helicopter's failing and there are obstacles in the way.

The helicopters position has to be righted by clicking the mouse button. The game is based around up and downward movement to get as far as you can by dodging obstacles; if you hit one, it's game over and you have to start again! Old school.


Click image to enlarge

The original Helicopter can be played at http://www.helicopter-game.org/.

"Programming Interactivity"

Through recommended reading, I looked up the book 'Programming Interactivity', by Noble, J., and skimmed through a few of the chapters I was interested in. I was pleased to find this was one of the more technically oriented books; it even touched upon Interactive Development using C++.

Interactivity

Ten years ago, the idea of artists or designers writing code or designing hardware was almost unheard of. Today, not only has it become commonplace, but it has become and important arena of expression and exploration. The dialogue between technology and design is a vital and vibrant one that shaped art and technology alike.

Interaction could be defined as the exchange of information between two or more active participants. The writer and video game designer Chris Crawford describes interaction as "an iterative process of listening, thinking, and speaking between two or more actors.

...human computer interaction, computer human interaction, or experience design. All mean more of less the same thing; designing a system of some sort that a person can interactive with in a way that is meaningful to them.

The following quote is particularly interesting; I plan to cover the 'Game-Loop' in another post.

There is another key concept in interaction design that you should understand: the feedback loop. The feedback loop is a process of an entity communication with itself while checking with either an internal or external regulatory system.

Processing

What can you do with Processing? Becuase Processing is built in Java and runs using Java, it can do almost anything Java will do, and although Java can't quite do everything you'll see in computational art and design, it certainly comes close.

Source: Noble, J. (2009) Programming Interactivity

Time Management

We're two-thirds of the way through the Processing assignment, which means we have just two more weeks of Seb. At this point in the assignment, especially after receiving the brief, I felt it was necessary to be able to visualise the remaining time.

I've taken a screenshot of my 'time-sheet' and embedded it below.

Time-Sheet


Click image to enlarge

Processing Brief

Today, we were also handed our brief. I've highlighted key criteria so that I can refer to it as-and-when needed.

The Brief

During this module you will be taught Processing and learn the very basics and begin to develop your programming skills. You will be given a series of exercises to do in the class and some projects to do outside of the class. You will be asked to upload these projects onto the Open Processing website classroom. The projects can be developed and pushed as far as you can like. You must also research how Processing is used and comment on projects that have used this kind of programming. Your research should include some interactive projects. You must demonstrate your learning development on your blog through commentary and a posting of classroom assignments.

Learning Outcomes

• Evidence of an ability to orchestrate a range of skills that may be hand, computer based and technical.
• An ability to generate a personal language in response to design and or production problem.
• An ability to comprehend, research, explore and resolve a brief of a complex nature.
• A synthesis of practical, technical and theoretical considerations as evidence in students finished work.
• The facility to manage time, resources and concurrent demands.

Lesson Three Assignment

Assignment Brief

Using the interactive stripes as an example, I want you to create a Button object. It can be rectangular or circular, it's up to you.

Then I want you to make an array of the buttons.

They should move around the screen and when they reach the edges, they either bounce off or loop around to the other side of the screen.

When you click on a button, it changes colour. When you click it again it reverts to its original colour.

You have until the end of Tuesday 10th January.

Source: http://www.openprocessing.org/classrooms/?classroomID=1197

My Answer

I was inspired by the simplicity of this assignment and wanted to try something whacky! Instead of purely getting my buttons to collide with the contraints of the canvas, I wanted to see if I could get them to collide with each other as well.

I archived a working copy of my buttons without independent collisions, just in case I couln't produce a working version of my inspired idea on deadline day.

Process

Up until this point, I'd read a lot on how to handle multiple collisions, of which, these resources were the most helpful:

• http://processing.org/learning/topics/bouncybubbles.html
• http://stackoverflow.com/questions/345838/ball-to-ball-collision-detection-and-handling
• http://processing.org/learning/topics/circlecollision.html

Even though I'd not read otherwise, I was adamant I could avoid the complexities of physics and just have the buttons reverse direction once they'd collided; doing this'd mean they'd seem to bounce off one another. After adapting my intial button class to detect and handle collisions in this manner, I gave it a whirl - it worked, and it looked ok! After some testing, I realised there was an intermittent issue; something was causing the buttons to get stuck. This one was beyond me, so I decided to write a question on Stack Overflow in the hope someone could tell me what was going on.

My Question

This is something I'm trying to do for a university assignment and I'm quite new to it, but I've done a lot of reading on the subject. Please could someone to explain, in the simplest terms, how to do what I'm trying to do, so that I can understand what needs to happen?

I have an array of objects, each draw a circle to the screen; I have them bouncing within a bounding box but now I'd like them to collide.

I wrote the method below, which is working... but only just. The balls occasionally get stuck and 'jitter' on one another and I have no idea why this is happening.

I also pasted a link to my code, and then waited...

Answer

You cannot just reverse the direction in which your object is moving, because the collision may happen almost from behind it, in which case the reversal will put it again in collision course against the object which collided with it. That explains the jitter that you see. You need to consider the direction from which the collision occurred, and adjust your direction vector accordingly, using the related physics formulas for what is known in physics as "elastic collisions".

Here, check this out: http://en.wikipedia.org/wiki/Elastic_collision

It took a whopping 11 minutes for that answer! And he was so right...

I've learnt a huge amount in this process, one being not to bypass the complexities of physics, namely Elastic Collision.


Source: http://en.wikipedia.org/wiki/Elastic_collision

Result

I decided to submit the inspired version to show what I'd accomplished.

Lesson Three

Todays lesson was brilliant, we ended up covering some advanced concepts of coding, specifically OOP! A.K.A. Object Oriented Programming.

Object-oriented programming (OOP) is a programming paradigm using "objects" – data structures consisting of data fields and methods together with their interactions – to design applications and computer programs.

Source: http://en.wikipedia.org/wiki/Object-oriented_programming

Concepts

Arrays

An array is a container object that holds a fixed number of values of a single type. The length of an array is established when the array is created. After creation, its length is fixed.

Each item in an array is called an element, and each element is accessed by its numerical index. As shown in the above illustration, numbering begins with 0. The 9th element, for example, would therefore be accessed at index 8.

Source: http://docs.oracle.com/javase/tutorial/java/nutsandbolts/arrays.html

I like to think of an array as a table, a table which can store an arbituary piece of data that can be accessed through its index key. Seb gave a good example of an array, which he stored each our ages and linked them to an associative index, our names. Each age could then be accessed by the persons name.

Functions

A subroutine (also called procedure, function, routine, method, or subprogram) is a portion of code within a larger program that performs a specific task and is relatively independent of the remaining code.

Source: http://en.wikipedia.org/wiki/Subroutine

Functions are a fairly simple concept; they allow us to run set pieces of code whenever they're called. For example, we could write a function which you passed two numbers to when you called it and it would add those numbers together and return the answer. The numbers passed could be different each time, but the function would be the same.

Classes and Objects

A class, for example, is like a blueprint for a house. It defines the shape of the house on paper, with relationships between the different parts of the house clearly defined and planned out, even though the house doesn’t exist.

An object, then, is like the actual house built according to that blueprint. The data stored in the object is like the wood, wires, and concrete that compose the house: without being assembled according to the blueprint, it’s just a pile of stuff.

Source: http://net.tutsplus.com/tutorials/php/object-oriented-php-for-beginners/

Using the result of todays lesson, I shall cover an explaination of both classes and objects below.

Result

The below, Stripes, example depicts the use of multiple objects created from one class. The Stripe class is a blueprint for each stripe, technically, that means each stripe is an object. As you can see, the stripes behave and look the same - they've all been created from the same class. When they're created, custom parameters can be passed to change certain aspects of the object; in this case we can give each object an X-Axis position and a colour, which is why you'll notice these are the two differences between each stripe.



In todays lesson, Seb also set us an assignment; I'll cover that in the following post.

Lesson Two

Our first lesson back after Christmas was based around recapping what we'd already learnt, and thus had no assignments or exercises set. I'd remembered what we were taught. Below, I've embedded one of the two example files of the day.

Recapped

• Variables
• Data Types
• Conditionals

We also recapped positioning, animation and collision.

Result