Google News
logo
p5.js Interview Questions
When the background() function is called with a numeric argument between 0 and 255, the background color will be set to a grayscale value, with 0 being pure black and 255 being pure white.
function setup(){
  // Sets the background color to white
  background(255);
}
The setup() Function : At the beginning of a p5.js program, the p5.js library automatically executes the setup() function. The setup() function should not be explicitly called in the sketch.
function setup() {
    // Runs once at the beginning of the p5.js sketch
}
Uses of the setup() Function : The setup() function typically contains code that defines the initial state of the sketch, such as the canvas size, background color, and initial values of global variables.
let beginSize;
 
// Initializing the canvas size, background color and beginlSize value
function setup() {
  createCanvas(800, 600);
  background(220);
  beginSize = 5;
}
The draw() function is automatically called after the setup() function, which runs once at the program’s start. The draw() loop infinitely runs the code block inside the function from top to bottom.
 
function setup(){
  // Runs once at the start of the program
}
function draw(){
  // Loops infinitely after setup() is run
}
The p5.js canvas uses a coordinate system to describe space. The origin, (0, 0), of the canvas is the top-left corner of the canvas.
Canvas
The canvas coordinate system is described using ordered pairs, (x, y), where the x coordinate is the distance from the left edge of the canvas and the y coordinate is the distance from the top edge of the canvas.
Coordinate System
A color value can be represented in various ways with p5.js. It can be given as:
 
* Gray value as one numeric value between 0 and 255.

*
RGB (Red, Green, Blue) value as three numeric values between 0 and 255.

*
RGBA (Red, Green, Blue, Alpha) value as four numeric values between 0 and 255.

*
Hexadecimal value as a string.

*
HSB (Hue, Saturation, Brightness) value as three numeric values between 0 and 360 for hue and between 0 and 100 for saturation and brightness.

Colors
Points and lines can be used to draw basic geometry. Change the value of the variable 'd' to scale the form. The four variables set the positions based on the value of 'd'.
Points and Lins
function setup() {
  let d = 70;
  let p1 = d;
  let p2 = p1 + d;
  let p3 = p2 + d;
  let p4 = p3 + d;

  // Sets the screen to be 720 pixels wide and 400 pixels high
  createCanvas(720, 400);
  background(0);
  noSmooth();

  translate(140, 0);

  // Draw gray box
  stroke(153);
  line(p3, p3, p2, p3);
  line(p2, p3, p2, p2);
  line(p2, p2, p3, p2);
  line(p3, p2, p3, p3);

  // Draw white points
  stroke(255);
  point(p1, p1);
  point(p1, p3);
  point(p2, p4);
  point(p3, p1);
  point(p4, p2);
  point(p4, p4);
}
Variables have a global or function "scope". For example, variables declared within either the setup() or draw() functions may be only used in these functions. Global variables, variables declared outside of setup() and draw(), may be used anywhere within the program. If a function variable is declared with the same name as a global variable, the program will use the function variable to make its calculations within the current scope.

Variaable Scope
let a = 80; // Create a global variable "a"

function setup() {
  createCanvas(720, 400);
  background(0);
  stroke(255);
  noLoop();
}

function draw() {
  // Draw a line using the global variable "a"
  line(a, 0, a, height);

  // Use a local variable a in for loop
  for (let a = 120; a < 200; a += 3) {
    line(a, 0, a, height);
  }

  // Make a call to the custom function drawAnotherLine()
  drawAnotherLine();

  // Make a call to the custom function drawYetAnotherLine()
  drawYetAnotherLine();
}

function drawAnotherLine() {
  // Create a new variable "a" local to this function
  let a = 320;
  // Draw a line using the local variable "a"
  line(a, 0, a, height);
}

function drawYetAnotherLine() {
  // Because no new local variable "a" is set,
  // this line draws using the original global
  // variable "a" which is set to the value 20.
  line(a + 3, 0, a + 3, height);
}​
The rect() function draws a rectangle to the canvas. It takes four arguments: the first two arguments are the x and y positions of the top left corner of the rectangle. The third argument is the width, and the fourth argument is the height.
Rectangle
The square() function draws a square to the canvas. It has three required arguments: the first two arguments are the x and y positions of the top left corner of the square. The third argument is the width (and height) of the square.
Square