![]() While p5js is certainly beginner-friendly, seasoned coders also appreciate its convenience and expressive power. In the end, whether you opt for p5js or plain JavaScript will depend on your purposes. Easel.js: part of the CreateJS suite, it was designed to make it easier to work with the HTML Canvas, while also keeping things performant.Pixi.js: a small and fast library with a very efficient rendering engine.What if you find yourself in an uncertain middle ground, where p5js seems too bulky and slow for your purposes, but diving into pure JavaScript seems a little intimidating? Well, there are some alternatives. Less focused resources: while there are certainly lots of videos, books and tutorials, there’s less of a roadmap if your interest is creative coding specifically.Verbosity: Sometimes it can be a little long-winded compared to p5js for the same visual result (but the same could be said versus any library).Difficulty: its steeper learning curve means it’s not quite as beginner-friendly. ![]() Satisfaction: this might be a more subjective reason, but you can’t deny that it is often more satisfying to program something without the use of libraries.Documentation: being a web standard, Canvas doesn’t come up short in the documentation department, the Mozilla site offering the most comprehensive resources.The HTML Canvas however is a W3C web standard, which is about as future-proof as things can get in the fast-paced world of the web. Future-proof: although p5js doesn’t show signs of going away any time soon, libraries do come and go.Power: I don’t mean this in the ‘mmmwhahahaha’ sense of the word (well, maybe I do a bit) but once you know the Canvas API, you have a powerful and efficient set of tools at your disposal for any web project.Deeper understanding: it’s often better (if not necessarily more convenient) to know how things work under the hood if you’re really interested in a technology.And while p5js might seem fast enough (for simple sketches you’d be hard-pressed to tell the difference), at scale, that can change. More specifically, let’s outline the pros and cons of the HTML Canvas API, which is the underlying set of native JavaScript drawing functions that p5js actually uses. Now, let’s get to pure (or vanilla) JavaScript. Prototyping: While it might be good for prototyping, it would be an inefficient for inclusion in a web application.Compatibility: due to said global variables, it doesn’t play well with other libraries.Some bad practices: the use of global variables, for instance, isn’t a good programming practice.Speed: Its size makes it significantly slower than vanilla JavaScript, particularly for large sketches.Size: By any standards, it’s a large library (minified and without the add-ons, the core clocks in at nearly 800kb).Hides complexity! Sometimes simplifying isn’t necessary, and knowing the functions that p5js relies on under the hood gives you more control.Hides complexity: Simplifies many drawing operations that would otherwise be trickier to master.Convenience: It’s easy to get up and running quickly sites like and the main p5js website have editors with built-in support and syntax highlighting.Documentation: the p5js website has a very comprehensive and well laid-out reference with lots of examples.In particular, check out Dan Shiffman’s infectiously enthusiastic video tutorials, Lauren McCarthy’s Getting Started with P5.Js or Tariq Rashid’s Make Your Own Algorithmic Art. Resources: Lots of high-quality books and tutorials are readily available.Large community: Several forums exist where you can get help and advice, and it has an active github repository with lots of contributors.Beginner-friendly: It definitely achieved its goal of being approachable to the uninitiated.In 2013, Lauren McCarthy ported it to the web, and since then its community and contributors have grown considerably.įrom the get-go, both Processing and p5js (both part of the umbrella Processing Foundation) were designed to be approachable to artists, designers, educators and anyone else at the start of their coding journey. p5js is based on the original Java library Processing, created by Ben Fry and Casey Reas back in 2001. Creative coding can sometimes go by other names, like code art, generative art, generative design, or algorithmic art. This is a question I gave quite a lot of thought before embarking on my Canvas API tutorials, so I’ll try to offer as comprehensive (but concise) a comparison as I can.įirst of all, what is p5js? Simply put, it is a JavaScript library for creative coding.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |