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
The p5.js programming language was actually derived from Processing – a flexible software sketchbook specifically aimed at teaching the novice how to use code to create visual artwork. Processing.py was developed specifically for use in Python, and likewise p5.js was introduced as a JavaScript based library to bring that same level of animation to online applications and websites.
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
The numbers don’t lie – jQuery is by far the most popular JavaScript library used today with an astounding 95.7% of JavaScript based websites using it, compared to p5.js which has a measly 0.1% share.
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
ACCESSIBLE DOCUMENTATION
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.
THE COMMUNITY
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.
THE CONS
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:
As a library that works by overlaying on top of JavaScript, p5.js does a pretty good job of easily adding that extra oomph to websites. It’s the simple things like changes in colour and shape as you scroll over options, sounds popping off with each click, and embedded video that can really make a website pop.
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.
2 – CODING SELF GENERATING ART WITH JAVASCRIPT & P5JS:
This Udemy course focuses on the self-generating art side of things, and combining both the JavaScript and p5.js libraries to really get those creative juices flowing – great if you think you’re ready for more advanced content.
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.
Next Steps
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!