NL / EN

LESSON 2: MODDING

INTRODUCTION

It would be impractical and an enormous amount of work if you were to write every bit of code yourself. By using the principles of Object Oriented Programming we can extend code without having to make everything from scratch.


Object Oriented Programming (OOP) uses 2 key concepts with which we will also be working: classes and objects.You can compare a class with a recipe. A class describes everything related to an object: how it should behave, what it should look like, et cetera. As an example you could think of a cake. To make a cake you need a basic recipe, the superclass, and to vary your cakes you do not need to rewrite the entire recipe. So if you want your cake to contain raisins, you simply add these to the recipe. In OOP you can extend a class by using subclasses. A subclass ‘inherits’ all the characteristics (behaviour, appearance, etc.) of a superclass, and is able to veer from it. In the example above, the ‘cake’ is the superclass, and the ‘cake with raisins’ is the subclass.

Let’s first test this by going through all the steps, starting from step 1!

STEP 1

Like in the previous lesson we will start with the basics of any Processing sketch: a setup and a draw function. In the setup function we can already specify the size of our window, and in the draw we will be begin by entering the background colour.

void setup() {
    size(400, 400);
}
 
void draw() {
    background(0);
}

STEP 2

The first thing we will now do is describe the ‘ordinary’ cake in code. To keep it simple we will draw our cake as a white circle. We can do this by creating a new class with the name Cake. This class is created alongside setup and draw, because class and subclass get their own setup and draw. The class called Cake now gets a draw function in which we start to draw our cake. Remember that all we have done so far is write the recipe, we haven’t yet made our cake, so this sketch will not be doing anything for now.

class Cake {
    void draw() {
        ellipse(width / 2, height / 2, 100, 100);
    }
};
 
void setup() {
    size(400, 400);
}
 
void draw() {
    background(0);
}

STEP 3

Then we can start making a new cake, one that follows the ‘recipe’ of the basic cake with which we will be working. We’ll create this right before the setup function. Because we create this cake here, it can be used from anywhere within the programme. We can now draw the cake in the draw function.

class Cake {
    void draw() {
        ellipse(width / 2, height / 2, 100, 100);
    }
};
 
Cake regularCake = new Cake();             // create a regular cake
void setup() {
    size(400, 400);
}
 
void draw() {
    background(0);
    regularCake.draw();    // draw the cake
}

STEP 4

To make a cake with raisins we need the basic recipe to start; we do this by creating a subclass. The keyword extends indicates that the class that comes before this word is a subclass of the class that is mentioned after the word. In this case, the class RaisinCake is a subclass of Cake. This means that a RaisinCake contains all the characteristics of an ‘ordinary’ Cake, but that we can extend these. RaisinCake is empty for now, so there is no difference yet between Cake and RaisinCake. Instead of making an ordinary Cake (once again above setup) we are now making a RaisinCake. This RaisinCake will then also be drawn in the draw function.

class Cake {
    void draw() {
        ellipse(width / 2, height / 2, 100, 100);
    }
};
 
class RaisinCake extends Cake {                           // RaisinCake is a subclass of Cake

};
 
RaisinCake raisinCake = new RaisinCake();
 
void setup() {
    size(400, 400);
}
 
void draw() {
    background(0);
    raisinCake.draw();
}

STEP 5

The final step is to extend the ordinary Cake that we made as a basic recipe, and draw the actual raisins. Like Cake, RaisinCake has a draw function. The line super.draw() draws the superclass, in our case, the Cake. Then we can add the raisins, by using the ellipse function a number of times, to turn our cake into an actual RaisinCake. Try to adapt the arguments of the ellipse functions (the numbers behind your ellipse that determine its position) and see what happens

class Cake {
    void draw() {
        ellipse(width / 2, height / 2, 100, 100);
    }
};
 
class RaisinCake extends Cake {     // RaisinCake is a subclass of Cake
    void draw() {
        super.draw();
        ellipse(170, 200, 10, 10);
        ellipse(230, 210, 10, 10);
        ellipse(180, 190, 10, 10);
        ellipse(210, 180, 10, 10);
    }
};
 
RaisinCake raisinCake = new RaisinCake();
 
void setup() {
    size(400, 400);
}
 
void draw() {
    background(0);
    raisinCake.draw();
}

END OF LESSON 2

Congratulations! You now have a basic grasp of OOP and drawing shapes in Processing. In the next lesson we will look at how to create animations in code.