18th Feb 2019

Introduction to P5.js


Written By, Vishal Kacha


  • p5.js is a JavaScript library that starts processing to make coding accessible for artists, designers, and beginners for today’s web.
  • p5.js is a full set of drawing object functionality. However, you’re not limited to your drawing canvas, for this, p5.js has an add-on library that makes it easy to interact with other HTML5 objects.
  • p5.js programs generally run in any browser. JavaScript interpreters are open-source and freely available and anyone can use it for free.

Get Started

  • There are mainly two functions we will use in program.
  • setup( ) and draw ( ), they are basically already in sketch.js file.
  • The setup() block runs for creating a program that does not need a loop running code repeatedly. The draw() block runs repeatedly, and is used for animation or create the Shape, Objects, Drawing, etc…


  • P5.js is a full conversing Processing into javascript code and all the functions will be translated, and you’ll be writing in JavaScript.
  • You write javascript code directly, and it performs code like any other javascript file you include on your website.
  • P5 can be extended with add-on libraries.



  • Draw triangle is a plane created by connecting three points (X,Y,Z).
  • First Point Specify Two Arguments (x1,y1), Second Point Specify Two Arguments (x2,y2), Third Point Specify Two Arguments (x3,y3).
  • Another Point (tx, ty) is the translation point that translates the object.

Syntax: triangle(x1, y1, x2, y2, x3, y3);





  • Display new object with triangle shape by using class, variable, function.



  • Add animation effect by using mousePressed(), mouseDragged, mouseReleased() functions.


Demo Link: Click here


I hope this blog might help you to understand the few functions of p5.js. We would dig into other functions & bring light on it in later blogs. I would like to thank Sudev Kiyada for being so supportive to complete this blog.

Written By,

Jr. Web Designer at Yudiz Solutions Pvt. Ltd