Preface A Model A Medium A History Variables Functions Control Loops Classes
Source Overview


“Being process-oriented, not product driven,
is the most important and difficult skill for
a designer to develop.”

Matthew Frederick. 101 Things I Learned in Architecture School.

Humans Think in Categories

So far, we have been defining and manipulating what we call primitive data types to write our programs. These primitive data types are the bread and butter of programming languages and come in-box. In strongly typed languages such as Processing, they are expressed with the keywords int, float, boolean, byte...etc. Now, there is only so far we can go with primitive types and there comes a time when we want to make our own data types, combining various data to express more complex concepts. We have in part already done this with functions. However, we are going to take this a step further and study a concept that enables us to define a structure that combines both data with functions or what we call more specifically methods*. Welcome to the world of classes and data abstraction.

Primitive Data Types: Java Primitive Types
JS Primitive Types

* We call functions that belong to a class, methods. No difference otherwise.

In brief, a class is an ensemble of data and methods, a structure that enables us to combine compound elements and define what we call an abstract data type. That may all sound very grand but the concept is rather simple. Classes are a means for classification. In order to grasp what a class is, try to see it as a class in biology where we organise things in specific categories. For example, in the animal kingdom there are many different classes of animals each with their own specific characteristics. We know that all mammals have lungs, are warm-blooded and have hair and fur. These are some of the characteristics that all mammals share and by which we define what a mammal is. A class is therefore a means to organise things that share common features.

In the realm of programming, we have the possibility to organise concepts that share common features. Let's have a look at the basic steps for working with classes.


There are three important steps to creating a class:
1). Data fields - what data belongs to our class.
2). Methods - what operations do we apply to our data.
3). The class constructor - a means for creating objects with our class.

To create a class we need to use the keyword Class followed by a given name. As in declaring a variable, we decide upon the name of the class. Within this structure we define the data fields and the methods that belong to this class. It's always good practice to think about these two parts of our class before writing it in code. We need to understand clearly what we want our class to do. What is it's objective if you like. From here we need to define the various data and methods that will enable us to obtain that objective. Let’s have a look at a very simple example.

To begin with, let's imagine a really simple class for a bouncing ball. Our ball will be just an ellipse. Our ball will have a position, a size, and some value for simulating speed.

class keyword   ‹class name› ‹fields› ‹methods›

Eg 1. JavaScript
class Ball {
    this.x = 200;
    this.y = 200;
    this.dia = random(5, 50);

  ellipse(this.x, this.y, this.dia, this.dia);


Eg 2. java
class Ball {
  float x;
  float y;
  float dia;
      this.x = 200;
      this.y = 200;
      this.dia = random(5, 50);

  void display(){
  ellipse(this.x, this.y, this.dia, this.dia);


Source Code
Sketch: Class_01

You can also execute this sketch with P5js's online editor

Note that there is a difference in syntax and in the declaration structure between the JavaScript and Processing example. In our JS example, the data fields are declared as part of what is called the constructor. Whereas, in Processing these data fields are declared outside this structure which is labeled with the same name as our class. Note also that we must declare the return type for our method in Processing, which in this case returns a void. Finally, class names are always declared with a capital letter.


Now, after a little observation, you may be wondering why we need a class to do such a simple thing. Indeed, we could have programmed this without using a class and that would have been fine if all we needed were one or two bouncing balls. However, if you had to create a hundred, the task of programming this becomes a little harder. Use a FOR loop I hear you say. Well, that is a viable answer and solution but imagine you want to have control over each of these balls, give each a specific colour, size or behaviour. Perhaps one will move left and the other right. Calling a simple function within a FOR loop does not give us the same flexibility as a class. Let's have a closer look at what we are doing when we make use of our class.

‹object› ‹methods›

Eg 1. JavaScript
let theBall;
theBall = new Ball();
theBall. display();

We first declare what is called an object, theBall. We decide upon the name of the object. Secondly, we instantiate this object - we create an instance of our class. Finally we call our methods on our object. These are the three main steps in using our class. The class is a blueprint of an abstract data structure. An object is an instance of that class.

The above described paradigm is what we call object-oriented programming and it is precisely this concept that enables us to create dynamic data types of our own conception and for which we have considerable control. Object-oriented programming is an essential part of taking programming in Processing & P5js to the next level. It is from here we can develop far more complex, flexible and better organised systems. The concept is equally important for understanding and using third party libraries within these two frameworks and for which their are a plethora of possibilities. Libraries add functionality to these frameworks, for example we have libraries dedicated to 3D geometry, sound, computer vision, animation ...etc. What is important to understand is that each library is essentially a collection of classes. Being able to harness their functionality depends on understanding classes and the creation of objects.

In the next chapter we will look at harnessing a little of that OOP power, creating numerous objects to create a fanfare of colourful bouncing balls.



Various authors. Classes in JavaScript
Mozilla Foundation. 2019

Shiffman Daniel. Classes in Processing.
Learning Processing. 2008

Shiffman Daniel. Defining a Class Part I.
YouTube. 2015

Shiffman Daniel. Defining a Class Part II.
YouTube. 2015