Using charcoal, pencils, and paintbrushes to create animations and artwork is so 2000 and late. Programming is a lot more than building websites and forging applications – it can be pretty, too.
So what is P5JS and what are 5 things you need to know about it?
It’s time to pack up the palette, and hang up the easel. This is the digital age, and capturing the fleeting interest of a short attention spanned teen is becoming so difficult that it’s a case of if you can’t beat them – join them.
Being able to express thoughts and creativity through coding is where the big money will be in the next decade and beyond. Just think of how much the average landing page of a website has changed since the inception of the internet, or even how it’s morphed in recent years to this interactive, moving beast full of interactive graphics that come to life as you scroll across them.
P5.js is just one such tool you can use to achieve some pretty funky things on the internet, and it’s one that has a lot going for it, gaining popularity amongst developers for just that reason.
1 – WHAT IS P5JS
It came out in 2014, and was open-source from the get go – Programming as an organization believing that tools and software should be accessible to everyone who wants to learn how to draw without drawing.
It’s taught from kindergarten right up to university level, and is a powerful tool for artists, designers and programmers despite having a gentle learning curve that’s easily achievable. The only limit to what you can create with p5.js is your imagination really, it’s just that comprehensive of a library.
2 – WHAT P5JS IS USED FOR
It helps to think of p5.js with a certain metaphor in mind, in this case – imagine that p5.js is an artist’s sketchbook. Instead of drawing and painting instruments – we have code at our disposal.
Sketching a line onto a page in the notebook is pretty much the same process that happens when a single line of code describes how p5.js has to draw a line on the screen. Parameters such as length, line thickness, and what you’d refer to as the “outline” of the image have to be clearly defined in the same way as you have to mentally picture what you’re drawing with a pencil or paintbrush. Additional lines of code define shape, curve, and where the lines intersect or terminate.
Other lines of code that follow affect things like color, shading, texture, and other effects – this is your easel. Finally, a third block of code deals with all the animations, actions, movements, and special effects – in the same way that you’d use a flip book to create a moving pictures cartoon. Only it takes you 1/100th of the time because we’re in the 21st century and not the 19th.
HTML5 is used to add in objects like text, video and webcam inputs, sounds, and things like that. Entire animated short films can be created just by coding – provided you’re good enough.
3 – WHY P5JS IS POPULAR
There’s a reason for this though – jQuery is a pretty general-purpose library, and although extensive and packed with features, it really can’t do animation nearly as well as a specialist framework like p5.js.
It seems pretty weird to say that p5.js is becoming more popular, but it’s absolutely the case. It caters for the beginner and veteran equally well, and if you know what you’re doing, can create some amazing visuals. Not only that, it’s pretty much designed in a way to make user interaction with the visual elements as simple as possible – not to mention it’s quicker.
4 – THE PROS
The p5.js reference documentation on their official website is both thorough and exhaustive, fully and comprehensively covering any and all topics about the many facets of the framework. Oh yeah, they give you pretty detailed examples of the code too – bonus.
Open-source programming language communities are, for the most part, generally happy to help and point someone in the right direction – and this is no exception. The silver lining is that since p5.js is based on the Processing language, and lines of code can easily be converted between the two, you have that extra 15 years of Processing know-how from veteran programmers at your disposal too.
THE LEARNING CURVE
As we’ve already mentioned, this is by and far, the easiest to learn visual programming language there is – bar none. Designing extremely complex graphics after just a few days of learning p5.js is an outcome that is within the reach of most users.
TEACHES BASIC CONCEPTS
Because it’s an extension of the Processing language, p5.js inadvertently teaches other concepts that go beyond just creating visuals – like how to connect other electronic devices to your code, incorporate sound effects to accompany user interaction, embedding live webcam feeds, and much more.
WHAT, NO RENDERING?
There’s only really one big downside to p5.js and it’s the elephant in the room at the moment – no rendering. Though the community has been lobbying for a change, currently there is a distinct and glaringly obvious lack of pre-defined user interface element objects within the library itself. You have to pretty much write all the code for any objects you want to include with the animation, making sure to integrate it properly in the animated loop. Especially frustrating and disappointing for those looking to build user interfaces full of awesome interactive moving parts.
How It Helps:
How To Learn P5.JS
In our opinion, these are the 5 best online resources to learn p5.js – a full range from absolute beginner to grisly programming veteran. Hey, most of them are even free!
1 – THE PROCESSING WEBSITE:
Remember how we mentioned the outstanding p5.js documentation? Your first point of call has to be to go check out the Processing website and absorb all that knowledge to really get a handle on the basics.
3 – INTRODUCTION TO PROGRAMMING FOR THE VISUAL ARTS WITH P5.JS:
If you’re still stuck scratching your head after reading over all that p5.js documentation, perhaps a change of perspective is required in the form of this Class Central course that not only focuses on the basics, but why designers and artists should be using programming.
4 – GETTING STARTED WITH P5.JS:
This course is beneficial if you’re more of a visual learner, with a heap of animated examples of how to perform functions and how changes in the code change what’s displayed on the screen.
5 – LEARN P5.JS:
Code Academy is a fantastic collection of professional grade crash courses in a whole heap of programming languages, and definitely worth a look if you’re looking at p5.js as a vehicle to bolster your career, and not just a hobby to do in your spare time.
We hope this article helped you learn more about P5.JS and why you should give it a try!
If you enjoyed this article you may also enjoy Erlang and 5 Things You Need to Know About It or 5 Reasons Why D3.JS is The Best Framework.
Kofi Group offers a multitude of resources to help you learn more, improve your career, and help startups hire the best talent. If you are interested in learning more get in touch today!