About the course

Articles

Assignments

Resources

Exercises

There are many ways of getting data into a Processing sketch from importing a simple image, 3D geometry or importing spread sheet data and the list goes on. But amongst the simplest and most versatile methods of getting external data into Processing is by means of a text file. A text file imported into a […] Read more – ‘Using External Data’.

This is the second part of the Button Class Exercise (see part one) Object instantiation is not a new concept to you as you have already instantiated objects from the PImage class. The process of instantiating an object from our Button class will follow a very similar pattern. Since we want this object to be […] Read more – ‘Button Class: Part 2 Object Instantiation’.

This is the first part of the Button Class Exercise (see part two) If we wanted to create a class for a button, that we will call Button. This class will have fields that will contain certain information about the object instantiated from the class such as the color of the button, it’s size and position. The class […] Read more – ‘Button Class: Part 1’.

As mentioned a class typically consists of method definitions and various fields (which we also refer to as member variables) that store information about the current state of the object instantiated from the class. The term fields refers to variables that are members of a particular class, and as a result are encapsulated data that […] Read more – ‘Intro to Objects’.

Open a new script and enter the code in the following code. Don’t worry about if you don’t understand all the instructions in the function blocks – a few more new concepts are being introduced here we’ll step through: int diam = 10; float centX, centY; void setup() { size(500, 300); frameRate(24); smooth(); background(180); centX […] Read more – ‘Growing Circle’.

First we took a basic line and reconstructed it the hard way in order to alter that line in interesting random ways. Now we’re going to do the same with the circle. You know the drill, first we draw a circle the hard way: // a simple circle drawn by rotating dots around a constant […] Read more – ‘Drawing Circles (the hard way)’.

This is a small sketch that helps us understand the potential of the random() function and one can start using randomness in their work quickly. size(600,600); smooth(); int circleNum = 50; noStroke(); for (int i = 0; i<= circleNum; i += 1) { fill(random(255), random(255), random(255), random(255)); ellipse(random(width), random(height), random(width), random(width); } Next is an […] Read more – ‘Random Circles’.

The setup() function must always precede the draw() function, and is used to define the initial properties of the sketch such as the size of the sketch. The size() function when used within an active mode sketch must always follow the setup() function before any other statements. If we had images to display in our […] Read more – ‘Experimentation’.

Our smile drawn with the arc() function looks fine but needs a bit of work. Although you cannot see it the arc actually has a fill. In order to see the fill we will first have to remove or hide the ellipse, but we’re happy with the way the ellipse looks so instead of deleting […] Read more – ‘Editing the smile’.

You might have noticed that the ellipse is looking a bit pixelated and not very smooth this effect is known as aliasing and is often counteracted with the effect of anti-aliasing which creates the impression of a smoother looking rendering. Fortunately in Processing we have a function that is made exactly for the purpose of […] Read more – ‘Aliasing’.

Processing is a language that was made to create visual representations of your code really easily, and as a result the developers of Processing have provided us with pre-configured functions for drawing primitive shapes much like you would expect in a drawing program. Shapes such as rectangles, ellipses and triangles amongst others are known as […] Read more – ‘Hello World 1.2’.

You might have noticed that the text is supposed to be in the center of the Display Window but looks more like it’s leaning to the right hand side of the window. Processing allows us to align text relative to the coordinates we specified for the text() function’s X and Y parameters. The relative positions […] Read more – ‘Formatting Text’.

Hello Display Window: Hello World 1.1 In the revised version of our Hello World Program we will start using the Display Window, firstly to display the original character set “Hello World” then to display a few shapes too. The text() function The text() function is the first function we will use to draw to the […] Read more – ‘Hello World 1’.