ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 1 of 13
Assignment 2 – Graphics Demos
Due Date: 11:55pm, Wednesday of Week 12
This assignment will test your Android multimedia development skills and is worth 20% (Type A) of your overall
course mark.
Android Development
This assignment requires you to develop an Android application using the Android Studio Integrated
Development Environment (IDE). Your application must perform. all tasks listed in this document, and be capable
of running on any Android device with a minimum API version of 22 (Android 5.1 "Lollypop") up to the latest
version of Android.
Your application should be created to display correctly on an emulated Google Pixel device (1080x1920 in portrait
mode) however you should make all efforts to ensure that the application runs and operates correctly (as defined
later in this document) in a largely display resolution independent manner.
The images and piano sample as well as a small Utils classes are provided for use in your project in the same
archive as this document. Place the Utils class in the same location as your main activity and change the package
name in the first line of the class to match your project's package name.
Do not add any additional activities or features that are not outlined in the specifications that follow. You will
not be marked higher for additional functionality; instead you will be penalized for not matching the program
specifications!
Plagiarism Policy
The Federation University policy on plagiarism can be found at the following location:
http://policy.federation.edu.au/university/student_plagiarism/ch01.php
I highly recommend that you familiarise yourself with what is and what is not considered plagiarism, but I'll
summarise the key aspects below:
• Do NOT share code with fellow students. The university is very serious about this, see above.
• You may, and are in fact encouraged to, discuss the project with your fellow students. The goal of this
course is that you learn how to create good, high-quality Android applications – and that your
understanding then flows into the exams where you'll be asked questions on Android application
development. That won't happen if you don't code it yourself and learn through doing!
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 2 of 13
Application Specification
Project Settings
Your Android application should have the following settings:
Minimum SDK: API 22
Target / Compilation SDK: API 27 / Latest
Project/Application Name: FedUni Graphics Demos
For example, FedUni Graphics Demos 12345678
Company URL: federation.edu.au
Application Description
Your assignment is to write an Android application containing four activities which demonstrate a few simple
multimedia effects using a combination of the Processing library (for two of the activities) and the Android audio
capabilities (in the third activity).
The created activities will be as follows:
- A MainActivity which displays a list of the below activities which the user can click on to launch,
- A SnowActivity which uses Processing to display an image of a mountain scene along with a number of
particles of various sizes and colours which drift across the screen at varying speeds simulating snow
falling. This activity is not interactive.
- A SmokeActivity which uses Processing to display an image of a bonfire and allows the user to draw
trails of smoke particles which rise upwards, rotate and fade out. This activity is interactive and uses
multi-touch to generate a particle at the location of each touch event once per frame.
- A PianoActivity which displays an image of a piano (this does not use Processing) and allows the user to
play notes by tapping or dragging their finger on the piano keys as displayed on the screen.
Setting Up Your Project
When you create your new Android Studio project, view the project in "Project"
mode (rather than the default "Android" mode) and open the build.gradle file for
the app (as shown to the right) and add the following line to the dependencies
section to import the Processing library:
implementation 'org.p5android:processing-core:4.0.2'
At this point you may also want to right click on any folder of the project and select
New > Folder > Assets folder to add an Assets folder to your project. Copy the files
bonfire_background.png, middle_c.wav, mountain_background.jpg and
smoke_particle.png to this folder ready to be used by your application.
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 3 of 13
Although you don't have to, you may want to add separate snow, smoke and piano sub-packages to your
project so you can keep it nicely organised with just the relevant files for each activity in each package, like
this:
Activity 1 – The Main Activity
The main activity simply displays a list of the other three activities, and allows the user to click on an item in the
list which will then launch the relevant activity:
Figure 1 - The initial screen of the FedUni Graphics Demos application (MainActivity).
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 4 of 13
Don't forget to add elements to the applications manifest to allow each of the SnowActivity,
SmokeActivity and PianoActivity activities to launch! Add android:screenOrientation attributes to each of
these so that the main and snow activities runs in portrait mode, the smoke activity runs in portrait mode
with no actionbar (i.e. add android:theme="@style/Theme.AppCompat.Light.NoActionBar") and that the
piano activity runs in forced landscape mode (i.e. sideways).
In the same archive as this document you will find the source code for a Utils.java class which should be
placed into your main package alongside your MainActivity. This class which provides two randRange
functions which return a random value between the minimum and maximum values supplied (these comes
in int and float versions). Use these randRange functions to generate random values between your
desired minimum and maximum values wherever random numbers are required!
Activity 2 – The SnowActivity
The SnowActivity displays a texture loaded from a provided image as a Processing PImage. This activity requires
three classes:
- A SnowActivity class which extends AppCompatActivity. When launched this has a LinearLayout that acts
as the holder for the processing PFragment,
- A SnowSketch class that extends Processing's PApplet class and contains the settings(), setup() and
draw() methods used to animate the snow particles, and
- A SnowParticle class which is just a standard class that holds the location, speed, colour and size of each
snow particle.
When the activity starts it should instantiate inflate its layout which is just
a single LinearLayout called snowLinearLayout. Once done, you can
instantiate a static SnowSketch object and display it inside that
LinearLayout. Look at the week 11 lecture materials (slide 46 onwards) to
see how to embed a processing sketch inside an activity.
The SnowSketch should have an array of 300 SnowParticle objects, two
static ints we'll call screenWidth and screenHeight, and a PImage object
called backgroundImage which will hold the background image. The
SnowSketch class has only three methods: - settings(), setup() and draw().
In the settings() method we just call size(displayWidth, displayHeight); to
set the size of the sketch. Note that displayWidth and displayHeight are
Processing variables available to us because the SnowSketch class extends
PApplet.
In the setup() method we'll assign displayWidth to our static screenWidth
variable, and displayHeight to our static screenHeight variable. These
public static variables will be used by the SnowParticle class later. We also
want to load our background image and set it to be the size of our sketch.
We can do so like this:
Figure 2 – The SnowActivity in action – all the
white/grey snow particles drift downwards and
to the right, simulating snowfall.
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 5 of 13
backgroundImage = loadImage("mountain_background.jpg");
backgroundImage.resize(screenWidth, screenHeight);
The last thing to do in the setup() method is to instantiate the snowParticleArray then have a loop which
instantiates each of the 300 SnowParticles in that array. Each SnowParticle has a default constructor (i.e. we don't
pass any values to it).
Finally in the draw() method of our sketch we'll draw the background (important that this is the first thing we
do!), then loop over each particle where we draw it and update it (via the SnowParticle's update() method - which
just moves the particle and resets it when it hits the right or bottom of the screen). To draw the background
image, you can simply call:
image(backgroundImage, 0.0f, 0.0f);
Please note that to load the image correctly it MUST be located in the Assets folder of your project!
To set the colour and size of the snow particle you set the stroke to be the colour of the particle and the stroke
weight to be the size of the particle. For example, if we had a SnowParticle called sp we could draw and move it
like this:
stroke(sp.colour);
strokeWeight(sp.particleSize);
point(sp.x, sp.y);
sp.update();
When a snow particle goes off the right hand side of the screen or off the bottom of the screen the position is
"wrapped around", so that if it goes off the bottom of the screen it reappears at the top, and if it goes off the right
hand side of the screen, it reappears on the left hand side.
In the SnowParticle class, use the following properties and ranges of values when instantiating each
SnowParticle:
1. A float x value (i.e. horizontal location) should be a random value between 0 and the width of the
screen in pixels (use SnowSketch.screenWidth to get this),
2. A float y value (i.e. vertical location) should be a random value between 0 and the height of the
screen in pixels (use SnowSketch.screenHeight to get this),
3. A float colour value should be a random value between 128.0f and 255.0f (e.g. middle-grey and
white),
4. A pair of float xSpeed (horizontal) and ySpeed (vertical) values which should be random values
between 1.0f and 3.0f, and
5. An integer particleSize value (used to change the point size that should be used to draw each
snowflake) which should be a random value between 3 and 13.
The snow activity is non-interactive, and does not dynamically create and destroy particles – it merely
instantiates an array of particles in the SnowSketch setup() method, and the same particles are 'recycled'
as they wrap around the bottom and right edges of the screen. Each time the update() method is called on
a SnowParticle the following occurs:
- The x property has xSpeed added to it,
- The y property has ySpeed added to it,
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 6 of 13
- If the x value is greater than the width of the screen it is reset to 0.0f and the y property is reset to
a random value between 0 and the height of the screen,
- If the y value is greater than the height of the screen it is reset to 0.0f and the x property is reset to
a random value between 0 and the width of the screen;
Remember that the SnowActivity must be displayed in Portrait Mode (i.e. the long axis of the phone screen
is vertical) at all times, and should not be allowed to change to Landscape Mode because it’ll stretch the
background texture so that it looks bad.
Activity 3 – The SmokeActivity
The SmokeActivity displays an image of a bonfire as the background and then allows the user to multi-touch the
screen. At the location where the user touches the screen, we instantiate a SmokeParticle object, which is
displayed as a small rectangle with a semi-transparent (smoke_particle.png) texture on it. The smoke particles
rise up the screen, increasing in size whilst also slowly rotating and fading out (i.e. their alpha property is
decreased). When the alpha property reaches zero the particle is removed from the ArrayList of SmokeParticles in
which it exists.
Figure 3 - The SmokeActivity in action when drawing a 'c' shape on the screen with one finger.
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 7 of 13
The SmokeActivity is similar to the SnowActivity in that it inflates a LinearLayout called smokeLinearLayout and
then instantiates a static instance of SmokeSketch and embeds it inside that LinearLayout.
The SmokeSketch is also similar to the SnowSketch in that it extends PApplet has just the three settings(), setup()
and draw() methods. We have TWO PImage objects this time - the backgroundImage ("bonfire_background.png")
and the smokeImage ("smoke_particle.png") which we use to draw each smoke particle - again these must be
placed in the project's Assets folder to load correctly. The SmokeSketch also holds an ArrayList of SmokeParticle
objects called smokeParticleList. The three methods operate like this:
- In the settings() method we set the size of the screen by calling size(displayWidth,
displayHeight) after which we call fullScreen(P2D) to set our sketch to fullscreen using the
Processing 2D renderer (which is faster than the default JAVA2D one).
- In the setup() method we load the two images into our backgroundImage and smokeImage objects. Don't
forget to resize the background image to the size of the screen by calling:
o backgroundImage.resize(displayWidth, displayHeight) after loading it!
- In the draw() method we perform. the following actions:
o Set the image mode to CORNER by calling: imageMode(CORNER),
o Set the colour to draw the image as opaque white by calling: tint(255, 255),
o Then draw the image at location 0.0f, 0.0f just like we did for the SnowSketch.
Next we need to check for touch events and add a SmokeParticle to the smokeParticleList for each touch
we detect. Thankfully, Processing makes this very easy for us - we can simply go:
for (int i = 0; i spIter = smokeParticleList.iterator();
while (spIter.hasNext())
{
// While there are still particles to process, grab one.
SmokeParticle sp = spIter.next();
/** WRITE LOGIC HERE SO THAT IF sp.alpha is ") 0.5
Locked to portrait orientation 0.5
Displays correct list of activities to launch (e.g. Snow Activity, Smoke Activity,
Piano Activity)
1
ListView in MainActivity launches all other activities successfully (e.g. correct
code to identified clicked item in list plus manifest configured to allow activities
to launch).
3
SnowActivity __ / 10
Locked to portrait orientation 0.5
Actionbar with title "Snow Activity" exists 0.5
Loads and displays background image correctly 2
SnowParticles (one mark per correctly implemented element):
- Correct number,
- Correct movement,
- Correct speed range,
- Correct size range,
- Correct colour range,
- Correct wrap-around behaviour,
- Written in such a way that it will display correctly on any size screen.
7
SmokeActivity __ / 13
Locked to portrait orientation 0.5
Displays in fullscreen 0.5
Loads and displays background and smoke particle images correctly 2
ITECH3106 Mobile Interface Design Development
CRICOS Provider No. 00103D Page 12 of 13
Requirement Weight Mark
SmokeParticles:
- Touch events generate SmokeParticles at the location of the touch,
- SmokeParticle objects are stored in a dynamically resizable list,
- Correct initial random size configuration,
- Particles rise up the screen at the correct rate,
- Particles rotate at the correct rate as they rise,
- Particles increase in size at the correct rate as they rise,
- Particles are textured using the correct texture,
- Particle alpha decreases each frame,
- Particles are removed from list when alpha reaches zero,
- Written in such a way that it will display correctly on any size screen.
10
PianoActivity __ / 17
Locked to landscape orientation 0.5
Correct theme (no actionbar) 0.5
Displays piano keys background image correctly 1
Correct setup of SoundPool including (1 mark each):
- Correct volume control stream,
- Ensuring there are enough demuxing streams available so that multiple
notes can overlap,
- Loading of sample, and
- Ensuring sample is completely loaded before attempting to play it.
4
Piano Operation:
- Single touch playback of note on touch event [1 mark],
- Sample plays at a different speed for each white key on the piano in correct
musical scale [1 mark],
- Mapping between touch location and white keys such that piano will
function on any sized screen [2 marks],
- Black keys are mapped to input in a manner which works on displays of any
size [1 mark],
- ACTION_MOVE events do not re-trigger playback of same note [2 marks].
- Multi-touch events are catered for so that chords can be played [2 marks],
- SoundPool is constructed appropriately for devices running API 20 or lower
and API 21 or higher [2 marks].
Assignment mark total (out of 45)
Contribution to course (out of 20 marks)
ITECH3106 Mobile Interface Design Development