Blog / News

P5 JS client-side library for creating graphic

18-02-2017 Umair Iftikhar

p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Hello world

There are two main functions you will use in your program. The setup() block runs once, and is typically used for initialization, or for creating a program that does not need a loop running code repeatedly. The draw() block runs repeatedly, and is used for animation.

For your first "Hello World" program, create a setup() block and add one line:

function setup() {

  line(15, 25, 70, 90);

}

If you view this in your browser, you should see a single line.

Adding a draw() block enables you to incorporate animation. In the example below, a variable is updated every time draw() runs, moving a circle across the screen.

var x = 0;

 

function setup() {

  background(100); 

}

 

function draw() {

  ellipse(x, height/2, 20, 20);

  x = x + 1;

}

There is a full set of 2D drawing methods, to create and styles graphics, text, and images.

createCanvas

By default, the drawing canvas has a size of 100x100. If you want to set a custom size, use the createCanvas() function. It is a good idea to always make this the first line in setup(). The code below sets the canvas to size 600x400:

function setup() {

  createCanvas(600, 400);

  line(15, 25, 70, 90);

}

createCanvas() will create a new drawing canvas in the size specified and append it to the html page you are working with. If there is other content in the body of your html page, it will add on to the page after that, so you may not see it at the top of the window.

The canvas will also be affected by any existing css (styling) on the page, including default set by your browser. For example, a lot of browsers have a default padding around the end of the page. If you are noticing that your canvas isn't all the way at the upper left corner of your window, this is probably why. To fix this, you can add a line to the <head> of your html file that overrides the default padding, like this:

<style> body{padding:0; margin:0;} </style>

If you would like to specify a location for the canvas, rather than appending directly to the end, you can use the parent() method. In the <body> of your html file, create a container where you would like your canvas to get inserted, with ID of your choice:

<div id='myContainer'></div>

Then use a variable to store a pointer to the canvas you created, and call .parent() on this variable:

function setup() {

  var myCanvas = createCanvas(600, 400);

  myCanvas.parent('myContainer');

}

The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example below. See this reference for the native canvas API.

function setup() {

  drawingContext.shadowOffsetX = 5;

  drawingContext.shadowOffsetY = -5;

  drawingContext.shadowBlur = 10;

  drawingContext.shadowColor = "black";

  background(200);

  ellipse(width/2, height/2, 50, 50);

}

 

"This article is writer’s personal opinion and doesn’t represent Organization Policy. This blog is for students and teachers of Career Institute and they can have their own views on different topics."


Top