Skip to content
Related Articles

Related Articles

Improve Article

p5.js | Introduction

  • Difficulty Level : Easy
  • Last Updated : 25 Jun, 2020
Geek Week

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

    Credits:

  • Lauren McCarthy (creator of p5.js)

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!

My Personal Notes arrow_drop_up
Recommended Articles
Page :