Chapter 22. Particle Systems and Handling Screen Touches

We already have our real-time system that we implemented in the previous chapter using a thread. In this chapter, we will create the entities that will exist and evolve in this real-time system as if they have a mind of their own.

We will also look at how the user can draw these entities to the screen by learning how to set up the ability to interact with the screen. This is different than interacting with a widget in a UI layout.

Here is what is coming up in this chapter:

• Adding custom buttons to the screen

• Coding the Particle class

• Coding the ParticleSystem class

• Handling screen touches

We will start by adding a custom UI to our app.

Adding custom buttons to the screen

We need to let the user control when to start another drawing and clear the screen of their previous work. We also need the user to be able to decide whether or when to bring the drawing to life. To achieve this, we will add two buttons to the screen, one for each of these tasks.

Add these new properties to the code after the other properties in the LiveDrawingView class:

// These will be used to make simple buttons
private var resetButton: RectF
private var togglePauseButton: RectF

We now have two RectF instances. These objects hold four Float coordinates each, one coordinate for each corner of our two proposed buttons.

We will now add an init block to the LiveDrawingView class and initialize the positions when the LiveDrawingView instance is first created, as follows:

init {
   // Initialize the two buttons
   resetButton = RectF(0f, 0f, 100f, 100f)
   togglePauseButton = RectF(0f, 150f, 100f, 250f)
}

Now we have added actual coordinates for the buttons....

Implementing a particle system effect

A particle system is a system that controls particles. In our case, ParticleSystem is a class we will write that will spawn instances (lots of instances) of the Particle class (also a class we will write) that together will create a simple explosion-like effect.

Here is a screenshot of some particles controlled by a particle system as it may appear by the end of this chapter:

Just for clarification, each of the colored squares is an instance of the Particle class, and all the Particle instances are controlled and held by the ParticleSystem class. In addition, the user will create multiple (hundreds) of ParticleSystem instances by drawing with their finger. The particle systems will appear as dots or blocks until the user taps the Pause button and they come to life. We will examine the code closely enough that you will be able to amend in code the size, color, speed, and quantities of Particle and ParticleSystem instances.

Note

It is left as an exercise for...

Handling touches

To get started with screen interaction, add the OnTouchEvent function to the LiveDrawingView class as follows:

override fun onTouchEvent(
   motionEvent: MotionEvent): Boolean {
  
   return true
}

This is an overridden function, and it is called by Android every time the user interacts with the screen. Look at the one and only parameter of onTouchEvent.

It turns out that motionEvent has a whole bunch of data tucked away inside it, and this data contains the details of the touch that just occurred. The operating system sent it to us because it knows we will probably need some of it.

Note that I said some of it. The MotionEvent class is quite extensive; it contains within it dozens of functions and properties.

For now, all we need to know is that the screen responds at the precise moment that the player's finger moves, touches the screen, or is removed.

Some of the variables and functions contained within motionEvent that we will use include the following:

• The action property...

Running the app

Now we get to see the live drawing app in action and play with some of the different options we left commented out in the code.

Run the app with small, round, colorful, fast particles. The following screenshot shows a screen that has been tapped in several places:

Then resume the drawing, as shown in the following screenshot:

Make a kid-style drawing with particles that are small, white, square, slow, and of a long duration, as shown in the following screenshot:

Then resume the drawing and wait for 20 seconds while the drawing comes to life and changes:

Summary

In this chapter, we learned how we can add thousands of self-contained entities to our real-time system. The entities were controlled by the ParticleSystem class, which, in turn, interacted with, and was controlled by, the game loop. As the game loop was running in a thread, we learned that the user can still interact seamlessly with the screen and the operating system will send us the details of these interactions via the onTouchEvent function.

In the next chapter, our apps will finally get a bit noisier when we explore how to play sound effects.