Skip to content

Learning to Program with Processing and P5js

Published:

There are many methodologies and languages for learning to program, which is why the first thing a person who wants to learn to program faces is choosing a language or development platform.

Nowadays with an internet connection we have access to a large amount of information, manuals and tutorials, but we may still be in doubt about which language to choose.

Programming languages were born from the need to solve a specific problem, so not all are the same, nor do all serve for everything.

On several occasions I’ve seen the frustration of people who want to learn to program when they encounter the following code to print Hello, World! to the console.

// Print Hello, World! in Java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
  }
}

I believe the best way to learn is by playing and enjoying, so a language that shows us the results in a visual way will encourage us to keep playing and learning.

Processing

A language we can use to squeeze out our creativity is Processing based on Java and originally designed to make programming accessible to artists, designers, educators and beginners.

Processing offers us a development environment (multiplatform) to start seeing results from the first minutes.

This is an example of “Hello, World!” in Processing:

void setup() {
  size(500,400);
}

void draw() {
  background(10, 80, 100);
  ellipse(mouseX, mouseY, 80, 80);
}

The result is a circle that we can move with the cursor.

Hello, World!

The result we get is much more visual and interactive.

Looking at one of the examples included with Processing we can get an idea of the power and fun of learning to program with this language.

Mirror

Mirror by Daniel Shiffman

There’s a large Processing community and documentation that you can find on the official website processing.org, you can start with the Hello Processing tutorial.

Hello Processing

P5js

P5.js is a JavaScript library that starts with the original goal of Processing, but adapted to the web. Created by Lauren McCarthy and with support from the Processing Foundation, it allows us to program with JavaScript with the same philosophy as Processing, but in this case for the browser.

Example of “Hello, World” in P5.js

With P5.js we see the result in the browser, so we can use Codepen for the example (select the JS tab to see the code).

In this case we also have a growing community, very good documentation and many examples. Most of the examples we have in Processing are being ported to P5.js, as well as the Hello p5* tutorial.

A slightly more complex example is this pixelated joystick, where with few lines of code we get a very visual result.

Conclusion

I believe that selecting a language where the result is very visual and interactive will facilitate learning. I’ve been able to verify this with one of my children, who by the second day was already drawing shapes and creating mazes with lines of code ;)


Previous Post
CSS Books
Next Post
Agile Design with TDD