Open In App
Related Articles

p5.js Introduction

Like Article
Save Article
Report issue
p5.js is a JavaScript library used for creative coding. It is based on Processing which is a creative coding environment. The main focus of processing is to make it easy as possible for beginners to learn how to program interactive, graphical applications, to make a programming language more user-friendly by visualizing it. The advantage of using the JavaScript programming language is its broad availability and ubiquitous support: every web browser has a JavaScript interpreter built-in, which means that p5.js programs can be run on any web browser. Also, Processing is that language which emphasizes on feasibility for programmers to create software prototypes very quickly, to try out a new idea or see if something works. For this reason, Processing (and p5.js) programs are generally referred to as “sketches.” Preferred Editors The official documentation of p5.js suggests to use Bracket or Sublime and then include the JavaScript files, finally lead us to work like any other programming language. But the online p5.js Web Editor is the best alternative. It is based on a web-based programming environment. Difference between P5.js and JavaScript? JavaScript is a core language that provides all the features to build any functionalities into browsers. It can use Loop, Function, Conditional, DOM Manipulation, events, canvas, etc. Hence, by using it to develop and design any framework. p5.js is a library of JavaScript. P5.js is running on Pure JavaScript provides some functions that make JavaScript user life easy to draw in the web.   Example:
function setup() {
  createCanvas(400, 400); //Canvas size 400*400
function draw() {
  background('blue'); //background color blue

Output: setup(): It is the statements in the setup() function. It executes once when the program begins. createCanvas must be the first statement. draw(): The statements in the draw() are executed until the program is stopped. Each statement is executed in sequence and after the last line is read, the first line is executed again. Reference:
  • Lauren McCarthy (creator of p5.js)

  • Cassie Tarakajian (creator of p5.js web editor)

Last Updated : 24 Dec, 2021
Like Article
Save Article
Share your thoughts in the comments
Similar Reads