p5.js | Introduction

p5.js is a JavaScript library used for creative coding. It is based on processing which is a creative coding environment. It is originally developed by Ben Fry and Casey Reas. 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 in 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 as 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 which 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 develop and design any framework.
p5.js is a library of JavaScript. P5.js is running on Pure JavaScript provides some function that make JavaScript user life easy to draw in web.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

function setup() {
  createCanvas(400, 400); //Canvas size 400*400
}
  
function draw() {
  background('blue'); //background color blue
}

chevron_right


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: 1. https://p5js.org/



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.