Processing vs p5.js specifically for brand design

Hi there,

I’m a brand designer, with not so much experience with coding. I want to learn creative coding to help me create flexible and interactive brand design systems.

I’ve done a p5.js tutorial class which I followed, but I felt like I wasn’t really absorbing it so much but was advised that I should switch to processing as I’m not a coder and for creating patterns/shapes for brand design systems it could be better.

Just wanted to get other opinions as I’ve read lots of pros and cons for processing vs p5.js, but still not sure based on what I need to use it for.

Thanks!

Hi @andylawrencelevy,

Welcome to the forum! :wink:

What do you mean by that? Is it the quality of the tutorial or the how the concepts were explained?

For me Processing and p5.js are quite similar in a sense that they offer both a similar API (set of functions) to draw, process, display and interact with the user / other types of hardware.

The big difference is that p5.js is web based which means that you have access to the whole Web ecosystem which includes: JavaScript (the programming language), browser APIs, HTML / CSS, online APIs and services, NPM packages, Typescript, front-end frameworks (React, Vue, Svelte…) and so much more (3D, fonts, animation, network…).

On the other hand Processing was made using Java so you can use libraries that are more “low level” and close to the actual hardware you are running on. You can also use powerful libraries and the Java ecosystem for building applications.

For design and generative art it doesn’t really make a difference except if you are doing performance intensive work / advanced 3D visualization…

Here is an example of creative coding sketches I made using both Processing and p5.js (you can find both versions of the sketches) without too much trouble:

As a final word, I would personally go for p5.js because the web is so much flexible and rich when it comes to design and interactivity. :wink:

5 Likes

Hey Joesphh,

Thanks for the reply!

The course was great quality. I followed it all, but then found afterwards it was a struggle to remember anything that I’d learned. Like I said, my coding knowledge is very basic which is why someone recently advised me to go back to Processing first before doing more p5.js, but I guess everyone has a different opinion on what is easier etc.

I’m pretty much trying to just do work that will help me with my brand design skills, even though I know I’m going to be super basic at it.

Thanks,
Andy

1 Like

The advice I would give is to first learn the basics of programming (logic, conditions, loops, functions…) and then you can use any language like JavaScript or Java to use p5js and/or Processing depending on your needs.

The Coding Train’s video are awesome to get started with Processing:

2 Likes

I suspect you will find the same in all programming languages. I have been programming for decades and I still have problems remembering programming languages / algorithms / concepts that are new to me. The problem is that to remember these things you have to use them often, repetition is the key and that takes time and patience.

A few years back I started to learn Javascript by creating one or two simple applications from scratch (i.e. no p5.js, no ProcessingJS and no third party libraries) and it was a struggle to create the basic boilerplate code for an application so I went back to Java. Now I have used Java for 20 years but 6 months ago I decided to try again and this time use p5.js. Now I still consider myself a Javascript novice but I have been able to create some nice stuff with p5.js (you can see some of it here).

So I have decided to use p5.js as my main language. It will take a long time for me to use the language fluently but I will use it in preference to Java.

For “flexible and interactive brand design systems” I would think p5.js is more useful because it works with the Internet out of the box but at the end of the day you must make your own choice.

3 Likes

Thank you! This was the one I was about to start, but was just trying to figure out if I should do the processing stream or the p5js but I think I will start here!

2 Likes

Thank you for that info, really helps!

That advise has its merits!

Even though my fave language is JS, learning Java 1st can discipline you about being aware which datatype a variable is holding.

Also Java excels in compiling & debugging, b/c it detects right way if we’re passing a wrong datatype to a function or assigning a wrong datatype to a variable or container.

B/c Java & JS share so much in common, and Processing & p5js share most of their API, anything we learn from either can be easily adapted to the other.

So if you’re having difficulty on debugging and/or still needs to learn about datatypes, try out Processing’s Java Mode 1st.

You can always learn JS, or even Python, later once you’re comfortable w/ Java syntax.

3 Likes

This is a good point, thank you for this!

1 Like

I strongly agree with @GoToLoop, learning a statically typed language (type errors are being detected at compile time / check time) is very valuable because it catches (some) bugs before running the program and make refactoring easy because you know where it breaks if you type it well.

These days programmers are mostly moving to more strict typed languages / type checkers like TypeScript for JavaScript, MyPy and type annotations for Python or RBS for Ruby… and this is for practical reasons :wink:

For example with p5js and TypeScript, you can use:

2 Likes