p5.js Interview Questions
Move the mouse to change the direction of the light. Directional light comes from one direction and is stronger when hitting a surface squarely and weaker if it hits at a a gentle angle. After hitting a surface, a directional light scatters in all directions.

``````const radius = 200;

function setup() {
createCanvas(710, 400, WEBGL);
noStroke();
fill(200);
}

function draw() {
noStroke();
background(0);
const dirY = (mouseY / height - 0.5) * 4;
const dirX = (mouseX / width - 0.5) * 4;
directionalLight(204, 204, 204, dirX, dirY, 1);
}â€‹``````
Display a box with three different kinds of lights.

``````function setup() {
createCanvas(710, 400, WEBGL);
noStroke();
}

function draw() {
background(0);

// ambient light
ambientLight(0, 255/4, 0);

// to set the light position,
// think of the world's coordinate as:
// -width/2,-height/2 -------- width/2,-height/2
//                |            |
//                |     0,0    |
//                |            |
// -width/2,height/2--------width/2,height/2

// blue directional light from the left
directionalLight(0, 0, 255, -1, 0, 0);

// calculate distance from center to mouseX
let lightX = mouseX - width / 2;
let lightY = mouseY - height / 2;

// red spotlight
// axis located at lightX, lightY, 500
// axis direction of light: 0, 0, -1
spotLight(255, 0, 0, lightX, lightY, 500, 0, 0, -1);

// rotate on X axis
rotateX(-PI/4);
// rotate on Y axis
rotateY(PI/4);

// place box on (0, 0, 0), size 100
box(100);
}â€‹``````
The `ellipse()` function draws an ellipse to the canvas. It requires four arguments where the first and second arguments are the x and y positions of the center of the ellipse. The third and fourth arguments are the width and height of the ellipse.
The `circle()` function draws a circle to the canvas. It has three required arguments where the first and second arguments are the x and y positions of the center of the circle. The third argument is the width (and height) of the circle.
The `triangle()` function draws a triangle to the canvas. It has six required arguments: the x and y positions for each of the triangle’s three vertices.
The `quad()` function draws a quadrilateral to the canvas. It has eight required arguments: the `x` and `y` positions for each of the four vertices.
The 'width' and 'height' variables contain the width and height of the display window as defined in the `createCanvas()` function.

``````function setup() {
createCanvas(720, 400);
}

function draw() {
background(127);
noStroke();
for (let i = 0; i < height; i += 20) {
fill(129, 206, 15);
rect(0, i, width, 10);
fill(255);
rect(i, 0, 10, height);
}
}``````
The code inside the `draw()` function runs continuously from top to bottom until the program is stopped. The code in `setup()` is run once when the program starts.

``````let y = 100;

// The statements in the setup() function
// execute once when the program begins
function setup() {
// createCanvas must be the first statement
createCanvas(720, 400);
stroke(255); // Set line drawing color to white
frameRate(30);
}
// The statements in 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.
function draw() {
background(0); // Set the background to black
y = y - 1;
if (y < 0) {
y = height;
}
line(0, y, width, y);
}â€‹``````
The `fill()` function sets the color used to fill a shape with the specified color. It must be called prior to drawing the shape. The default fill color is white.

``````function draw(){
// Sets the fill color of the circle to blue
fill(0, 0, 255);
circle(100, 100, 25);
}``````
The `noFill()` function sets the fill color of a shape as transparent. It must be called before drawing the shape.

``````function draw(){
// Sets the square to have transparent fill
noFill();
square(50, 50, 25);
}``````