Tutorialspoint.dev

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:

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



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter