Introduction to P5.js

Overview

  • 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…

Benefits

  • 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.

Example

Step:1

  • 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);

triangle.js

index.html

p5_js_image1

Step:2

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

p5_js_image2

Step:3

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

Video:

Demo Link: Click here

Conclusion

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.

mm

Vishal Kacha Jr. Web Designer

I am a Front end devloper at Yudiz Solutions Pvt Ltd - a leading Web, Mobile Apps and Game Development company. I wrote this blog to share my knowledge and ideas to others. I am always eager to learn latest technology and find the tricky and optimized ways to make the things easy and faster.

Comments are closed.

Top