p5.js Function Tutorials

Learn 101 p5.js functions with AI-powered examples and prompts

Tutorials provided by xelsed.ai · Interactive tutorials on p5js.ai →

Math

`abs()`

beginner

The abs() function computes the absolute value of a number or the absolute difference between two nu...

`add()`

beginner

The add() function in p5.js is used to combine numbers or colors by performing addition. Creative co...

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`atan2()`

intermediate

The atan2() function computes the angle (in radians) between the positive x-axis and the point (x, y...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`ceil()`

beginner

The `ceil()` function in p5.js rounds a number up to the nearest integer. Creative coders utilize th...

`circle()`

beginner

The `circle()` function in p5.js allows you to draw a perfect circle on the canvas at specified coor...

`clamp()`

beginner

The `clamp()` function restricts a value to a specified range. This is useful in creative coding for...

`constrain()`

beginner

The constrain() function in p5.js helps you limit a value to a specific range. For creative coders, ...

`cos()`

beginner

The `cos()` function calculates the cosine of a given angle, expressed in radians. Creative coders u...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`createVector()`

beginner

The createVector() function is a powerful tool for creating 2D or 3D vectors, which are essential in...

`degrees()`

beginner

The degrees() function converts an angle from radians to degrees, which is often more intuitive for ...

`dist()`

beginner

The `dist()` function calculates the distance between two points in a 2D space, which is essential f...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`floor()`

beginner

The floor() function in p5.js is used to round a number down to the nearest whole integer. Creative ...

`frameCount()`

beginner

The frameCount function in p5.js keeps track of the number of frames that have been displayed since ...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`lerp()`

intermediate

The `lerp()` function stands for linear interpolation, allowing you to calculate a value that is a s...

`limit()`

beginner

The `limit()` function constrains a number to a specified range, ensuring that it doesn't exceed set...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`map()`

beginner

The `map()` function in p5.js is a powerful tool for transforming a number from one range to another...

`max()`

beginner

The max() function in p5.js takes multiple values and returns the largest one. Creative coders use i...

`min()`

beginner

The min() function in p5.js returns the smallest value from the given parameters. Creative coders us...

`mult()`

beginner

The `mult()` function in p5.js is used to multiply numbers together, allowing creative coders to gen...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`normalize()`

beginner

The normalize() function transforms a number from one range to another, making it easier for creativ...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`pow()`

beginner

The pow() function raises a base number to the exponent power, allowing for versatile mathematical c...

`quad()`

beginner

The `quad()` function draws a quadrilateral shape on the canvas, defined by four vertices. Creative ...

`radians()`

beginner

The `radians()` function converts degrees into radians, which is essential because many trigonometri...

`random()`

beginner

The `random()` function in p5.js generates random numbers within a specified range, which is essenti...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`round()`

beginner

The round() function in p5.js is used to round a number to the nearest integer. Creative coders use ...

`sin()`

beginner

The `sin()` function computes the sine of an angle given in radians. Creative coders use it to creat...

`sqrt()`

beginner

The `sqrt()` function calculates the square root of a number, which is a fundamental mathematical op...

`sub()`

beginner

The sub() function is used to subtract one number from another. As a creative coder, you might use i...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

Colors

`alpha()`

beginner

The alpha() function in p5.js allows you to control the transparency of colors, adding depth and dim...

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`beginShape()`

intermediate

The `beginShape()` function in p5.js starts the definition of a custom shape using vertices. It's es...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`blendMode()`

intermediate

The `blendMode()` function in p5.js allows you to define how colors from one layer interact with tho...

`blue()`

beginner

The `blue()` function in p5.js allows you to specify the blue component of a color, which is essenti...

`brightness()`

beginner

The brightness() function in p5.js is used to extract the brightness value from a color, allowing cr...

`circle()`

beginner

The `circle()` function in p5.js allows you to draw a perfect circle on the canvas at specified coor...

`color()`

beginner

The `color()` function in p5.js is essential for creating colors that can be used for filling shapes...

`colorMode()`

beginner

The `colorMode()` function in p5.js allows you to set how colors are interpreted in your sketches. B...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`fill()`

beginner

The fill() function in p5.js sets the color that is used to fill shapes drawn on the canvas. Creativ...

`filter()`

beginner

The filter() function in p5.js allows you to apply visual effects to images, shapes, or the entire c...

`get()`

beginner

The `get()` function in p5.js retrieves the color of a pixel or a region of pixels from the canvas. ...

`green()`

beginner

The `green()` function in p5.js is used to create and manipulate color values specifically for the g...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`hue()`

beginner

The hue() function in p5.js allows creative coders to define and manipulate colors based on their hu...

`lerpColor()`

beginner

The `lerpColor()` function in p5.js allows you to interpolate between two colors, creating smooth tr...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`noFill()`

beginner

The noFill() function in p5.js is used to disable the filling of shapes, allowing you to create outl...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`quad()`

beginner

The `quad()` function draws a quadrilateral shape on the canvas, defined by four vertices. Creative ...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`saturation()`

beginner

The saturation() function is used to control the saturation level of colors in p5.js. Saturation ref...

`stroke()`

beginner

The stroke() function in p5.js is used to set the color of the outline of shapes drawn on the canvas...

`strokeWeight()`

beginner

The strokeWeight() function in p5.js controls the thickness of the outlines drawn around shapes. Cre...

`tint()`

beginner

The `tint()` function in p5.js allows you to apply a color filter to images and shapes, modifying th...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

Shapes

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`beginShape()`

intermediate

The `beginShape()` function in p5.js starts the definition of a custom shape using vertices. It's es...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`blendMode()`

intermediate

The `blendMode()` function in p5.js allows you to define how colors from one layer interact with tho...

`circle()`

beginner

The `circle()` function in p5.js allows you to draw a perfect circle on the canvas at specified coor...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`curve()`

intermediate

The curve() function allows you to draw smooth, organic curves on the canvas, which is invaluable fo...

`div()`

beginner

The `div()` function in p5.js is used to create a new HTML `

` element, allowing you to embed HT...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`frameRate()`

beginner

The frameRate() function in p5.js allows you to set the number of frames displayed every second, whi...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`noFill()`

beginner

The noFill() function in p5.js is used to disable the filling of shapes, allowing you to create outl...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`quad()`

beginner

The `quad()` function draws a quadrilateral shape on the canvas, defined by four vertices. Creative ...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`set()`

beginner

The `set()` function in p5.js is a versatile tool for modifying the properties of shapes and colors ...

`stroke()`

beginner

The stroke() function in p5.js is used to set the color of the outline of shapes drawn on the canvas...

`strokeWeight()`

beginner

The strokeWeight() function in p5.js controls the thickness of the outlines drawn around shapes. Cre...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

`vertex()`

intermediate

The `vertex()` function in p5.js is a powerful tool for creating custom shapes and paths by defining...

`width()`

beginner

The `width()` function returns the width of the current canvas in pixels. This is particularly usefu...

Transformations

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`circle()`

beginner

The `circle()` function in p5.js allows you to draw a perfect circle on the canvas at specified coor...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`pop()`

intermediate

The pop() function in p5.js is used to restore the previous transformation state of the canvas. This...

`push()`

beginner

The push() function in p5.js saves the current state of the canvas, allowing you to apply transforma...

`quad()`

beginner

The `quad()` function draws a quadrilateral shape on the canvas, defined by four vertices. Creative ...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`resetMatrix()`

intermediate

The `resetMatrix()` function in p5.js resets the current transformation matrix to the identity matri...

`rotate()`

beginner

The rotate() function in p5.js allows you to rotate shapes around a specified origin point. This is ...

`scale()`

beginner

The `scale()` function in p5.js allows you to resize shapes and images on the canvas. It’s essential...

`translate()`

beginner

The `translate()` function in p5.js is used to change the position of the origin (0, 0) of the canva...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

Events & Input

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`frameRate()`

beginner

The frameRate() function in p5.js allows you to set the number of frames displayed every second, whi...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`interactivity()`

beginner

The interactivity() function is essential for creating engaging experiences in creative coding, allo...

`keyCode()`

beginner

The `keyCode()` function in p5.js returns the code of a key pressed on the keyboard. Creative coders...

`keyPressed()`

beginner

The keyPressed() function in p5.js is an essential tool for capturing keyboard input, allowing creat...

`keyReleased()`

beginner

The `keyReleased()` function is triggered when a key is released on the keyboard. It allows creative...

`keyTyped()`

beginner

The `keyTyped()` function in p5.js allows you to detect when a key has been typed, enabling interact...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`mouseDragged()`

beginner

The `mouseDragged()` function in p5.js allows you to detect when the mouse is being moved while a mo...

`mouseMoved()`

beginner

The `mouseMoved()` function in p5.js is triggered whenever the mouse moves within the canvas area. T...

`mousePressed()`

beginner

The `mousePressed()` function in p5.js is an event handler that triggers when the mouse button is pr...

`mouseReleased()`

beginner

The mouseReleased() function triggers when the mouse button is released. Creative coders use it to c...

`mouseX()`

beginner

The mouseX() function in p5.js returns the current horizontal position of the mouse cursor relative ...

`mouseY()`

beginner

The `mouseY()` function in p5.js retrieves the current vertical position of the mouse cursor on the ...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`touchStarted()`

beginner

The `touchStarted()` function detects when the user first touches the screen on mobile devices or to...

`touches()`

beginner

The `touches()` function detects if a touch event occurs at a certain point on the canvas, allowing ...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

Images

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`blendMode()`

intermediate

The `blendMode()` function in p5.js allows you to define how colors from one layer interact with tho...

`copy()`

intermediate

The `copy()` function in p5.js is used to copy a portion of the canvas and paste it in another locat...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`createGraphics()`

intermediate

The `createGraphics()` function generates off-screen graphics that can be drawn on the main canvas, ...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`filter()`

beginner

The filter() function in p5.js allows you to apply visual effects to images, shapes, or the entire c...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`image()`

beginner

The image() function in p5.js allows you to draw images onto your canvas, making it a powerful tool ...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`loadImage()`

beginner

The loadImage() function is used to load images from a URL or file into your p5.js sketch, allowing ...

`loadPixels()`

intermediate

The loadPixels() function in p5.js allows you to access and manipulate the pixel data of the current...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`preload()`

beginner

The preload() function in p5.js is used to load external files like images or sounds before the prog...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`tint()`

beginner

The `tint()` function in p5.js allows you to apply a color filter to images and shapes, modifying th...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

`updatePixels()`

intermediate

The updatePixels() function is essential for directly manipulating pixel data in a p5.js sketch. It ...

Typography

`arc()`

beginner

The arc() function draws a portion of an ellipse defined by its center, width, height, and start and...

`background()`

beginner

The `background()` function sets the color of the canvas before drawing any shapes or images. This i...

`bezier()`

intermediate

The bezier() function in p5.js creates smooth curves that can connect multiple points in a visually ...

`createCanvas()`

beginner

The createCanvas() function is fundamental in p5.js, as it establishes the drawing space where all v...

`draw()`

beginner

The draw() function in p5.js is called continuously in a loop, allowing for dynamic and interactive ...

`ellipse()`

beginner

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size....

`endShape()`

intermediate

The `endShape()` function is used to create complex shapes by connecting vertices defined by `vertex...

`heading()`

beginner

The `heading()` function in p5.js is used to set the size and style of text headings in your sketche...

`height()`

beginner

The height() function in p5.js is used to set or get the height of the canvas in your creative codin...

`line()`

beginner

The line() function in p5.js draws a straight line between two specified points on the canvas. This ...

`noStroke()`

beginner

The noStroke() function in p5.js disables drawing outlines around shapes. This allows creative coder...

`noTint()`

beginner

The noTint() function in p5.js removes any tint that has been applied to the images drawn with the i...

`noise()`

intermediate

The noise() function generates smooth, continuous random values over a specified range. Unlike the b...

`pixels()`

intermediate

The 'pixels()' function in p5.js allows you to manipulate the individual pixels of the canvas direct...

`point()`

beginner

The `point()` function is used to draw a point on the canvas at a specified location, defined by its...

`rect()`

beginner

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational to...

`red()`

beginner

The `red()` function in p5.js is used to define the red component of a color in various contexts suc...

`text()`

beginner

The `text()` function in p5.js allows you to display text on the canvas at specified coordinates. Cr...

`textSize()`

beginner

The `textSize()` function controls the size of text drawn on the canvas in p5.js. Creative coders us...

`triangle()`

beginner

The triangle() function in p5.js allows you to create triangles by specifying the coordinates of the...

p5.js Function Tutorials

Try These Functions with AI

Math

abs()

add()

arc()

atan2()

background()

bezier()

ceil()

circle()

clamp()

constrain()

cos()

createCanvas()

createVector()

degrees()

dist()

draw()

ellipse()

endShape()

floor()

frameCount()

height()

lerp()

limit()

line()

map()

max()

min()

mult()

noStroke()

noTint()

noise()

normalize()

pixels()

point()

pow()

quad()

radians()

random()

rect()

red()

round()

sin()

sqrt()

sub()

triangle()

Colors

alpha()

arc()

background()

beginShape()

bezier()

blendMode()

blue()

brightness()

circle()

color()

colorMode()

createCanvas()

draw()

ellipse()

endShape()

fill()

filter()

get()

green()

height()

hue()

lerpColor()

line()

noFill()

noStroke()

noTint()

noise()

pixels()

point()

quad()

rect()

`abs()`

`add()`

`arc()`

`atan2()`

`background()`

`bezier()`

`ceil()`

`circle()`

`clamp()`

`constrain()`

`cos()`

`createCanvas()`

`createVector()`

`degrees()`

`dist()`

`draw()`

`ellipse()`

`endShape()`

`floor()`

`frameCount()`

`height()`

`lerp()`

`limit()`

`line()`

`map()`

`max()`

`min()`

`mult()`

`noStroke()`

`noTint()`

`noise()`

`normalize()`

`pixels()`

`point()`

`pow()`

`quad()`

`radians()`

`random()`

`rect()`

`red()`

`round()`

`sin()`

`sqrt()`

`sub()`

`triangle()`

`alpha()`

`arc()`

`background()`

`beginShape()`

`bezier()`

`blendMode()`

`blue()`

`brightness()`

`circle()`

`color()`

`colorMode()`

`createCanvas()`

`draw()`

`ellipse()`

`endShape()`

`fill()`

`filter()`

`get()`

`green()`

`height()`

`hue()`

`lerpColor()`

`line()`

`noFill()`

`noStroke()`

`noTint()`

`noise()`

`pixels()`

`point()`

`quad()`

`rect()`

`red()`

`saturation()`

`stroke()`

`strokeWeight()`