Code Snippets
By using Processing we have been able to create the Simon News board-game step by step.
Array
This first code snippet displays the import of the use of the library ddf.minim which can be used to read and understand sounds that can be added to a processing application. Below this displays our Array which initialises the amount of audio samples that we will be using along with the different types of audio samples such as a theme tune, a verb action and ending.
Initialising Images
This code snippet initialises the ID names of each image that will be used within the processing sketch. Each of these images provide a piece of the interface to the Simon News Application including the layout and the action buttons that will be used for the user to interactive with the game.
Setting up the Array - For Audio
The next step is to create the void setup() function which will handle the set arrays according to the various audio samples we have gathered. The snippet(s) provide the use of the array names from the initialising in the above code to randomly play the audio samples depending on which button is pressed by the user. The more audio samples the array name has, the more random generation is created allowing the board-game to be more useful for users to play for a longer period of time. The imported minim library provides the useful role in allowing us to load each audio sample with the code: minim.loadSample("",); This allows us to import the audio samples into the array giving us clear coding efficiency.
The size of the processing application is also added to the void setup().
Drawing The Processing Stage
The void draw() function is used to view the visual properties of the defined initialised objects within a processing sketch. It provides us with the option of choosing the background colour of our sketch which is black or background(0);. From here we can load the images to the sketch from our initialised names from the code snippets above. For example to show the simon board-game image, we include:
simon = loadImage("simon.png");
image(simon, 270, 150);
These two lines of code takes the initialised name from above and loads the image and provides the coordinates and size of the image to add to the sketch. Thus creating our background image.
The section below the background and image draw code shows an if statement which generates a keyPressed method. This means that when the user presses a certain key on the keyboard, the code will generate an output like an audio sound and will display a highlighted object to show the user that they have just selected that object. The a,b,c and d letters which were initialised in the array code section play the role in section of code by loading the image and providing a highlighted effect on the sketch.
if (key=='z'||key=='Z') {
a = loadImage("themebutton.png");
image(a, 270, 150);
This selection of code is similar to creating the background image but is only visible when the user presses a key.
(When user presses a button it will highlight (Blue is currently highlighted))
Not only the if statement generates a highlighted image, it also includes the functionality to play the selected sounds from random. The different buttons are chosen the different array names for the generated sounds. This code snippet tells itself to generate a random sound from the selected array.
int index = 0 ;
index = int(random(themetune.length));
themetune[index].trigger();
delay(100);
This code is very useful in providing the sound clip to be generated by random every time the user selects the same button. It will give them a different random audio sample each time they choose a button.
Improvement to Interaction - Adding mouse interactivity
To add better interactivity for the user we have added another if statement which provides us with a mousePressed functionality. It works in the same way as when keyPressed in generating a highlighted button the user selected along with the audio sample being played by random and taken from the array.
The snippet of code below shows when when the mouse cursor is clicking on the selected button, the highlighted colour will appear and the random audio sample is played. However, due to Processing having no actual button code or GUI, we have to rely on position coordinates when using mousePressed functionality through an if statement.
The beginning of each line for the buttons begins with this:
if (mouseX >512 && mouseX <> 300 && mouseY
mouseX and mouseY determine the positions of where the mouse cursor clicks can respond to the button images on the sketch. The number values display exactly where the button can be clicked from horizontal and vertical axis. So once the mouse cursor is clicked in these areas, the same functionality applies to the keyboard presses as mentioned.
