# Getting Started How to get up and running with p5-python-web To get started, go to [code.strivemath.com](https://code.strivemath.com/).

⬆ This is the basic starter template - you can begin coding right away and don't need an account to start {% code overflow="wrap" lineNumbers="true" %} ```python def setup(): createCanvas(400,400) def draw(): background("red") drawTickAxes() ``` {% endcode %} * Code put into setup() will execute once, when the canvas initializes. * Code put into draw() will execute repeatedly, 60 times per second. Each execution is called a frame. * Try out putting some code - for example from the Shapes section - into the setup() and draw() functions and see what happens! Happy Coding 😁 {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Simple mode Use the p5 Python starter template, but without the hassle of starting with setup(), or worrying about the difference between setup() and draw()

## Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Fhe374wntMmaIqSpPMDvj%2Ftest.gif?alt=media\&token=ad265548-f2d4-49d3-9b58-24df4a7257e1) ```python background(frameCount%255) drawTickAxes() circle(400,bounce(0,height,10),20) ``` ## Description Allows the user to use p5 in the draw function only. This eliminates a lot of the confusion to do with setting up the canvas, or scope of variables. Of course, this has its downsides - the inability to create tailored dynamic variables or change the size of the canvas are two that come to mind. # Shapes the fundamental feature of p5 is that drawing shapes is easy! 2D and 3D shapes are available


2D			2D	beginShape.PNG
3D			3D	torus full.gif


rect() - Rectangle	rect()	rectangle.PNG
triangle() - Triangle	triangle()	triangle.PNG
point() - Point	point()	point.PNG
line() - Line	line()	lline.PNG
ellipse() - Ellipse	ellipse()	ellipse.PNG
circle() - Circle	circle()	circle.PNG
arc() - Arc	arc()	arc.PNG
quad() - Quadrilateral	quad()	quad.PNG
beginShape() - General Polygon		beginShape.PNG

## How are 2D Shapes drawn? In 2D mode, shapes are defined by a sequence of **vertices** that are then **connected into edges** to form a **closed region**.

The region can be filled with any color using [fill()](/p5-python-web/reference/colour-and-outline/fill), and the edges can be colored using [stroke()](/p5-python-web/reference/colour-and-outline/stroke). ### Shortcut to common shapes Some shapes have a **known configuration of vertices** (for example, we all know what the vertices of a square look like), and this gives us an **advantage to use other simpler information** (like the center of the square, and the length of its sides), and from that, we can calculate all the other vertices. Shapes like [circle()](/p5-python-web/reference/shapes/2d/circle), [ellipse()](/p5-python-web/reference/shapes/2d/ellipse), [arc()](/p5-python-web/reference/shapes/2d/arc), [square()](/p5-python-web/reference/shapes/2d/square), [rect()](/p5-python-web/reference/shapes/2d/rect) offer that shortcut. You can always resort to using [beginShape()](/p5-python-web/reference/shapes/2d/beginshape), [triangle()](/p5-python-web/reference/shapes/2d/triangle), or [quad()](/p5-python-web/reference/shapes/2d/quad). #### Vertices

``` quad(x1, y1, x2, y2, x3, y3, x4, y4) ``` #### Shortcut

``` rect(x, y, size, size) ``` {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # point() Point - Draws a point with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Fx3oasD4KGcYQ9ha9iCrv%2Fpoint.png?alt=media\&token=db2eef7c-23a3-425f-91ac-3210a4705684) ```python point(200,200) ``` ### Syntax ```python point(x, y) ```

Input	Description
x	x co-ordinate of the point
y	y co-ordinate of the point

### Description **point()** draws a point on the canvas, using the inputs to determine the **x** and **y** coordinates of its position. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # line() Line - Draws a line segment with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FXQNbqxMt6GJMMqpYMUcI%2Fline.png?alt=media\&token=eb2cae76-077f-4e57-baa4-9139a510b7d6) ```python line(100,100,300,300) ``` ### Syntax ```python line(x1, y1, x2, y2) ```

Input	Description
x1	x co-ordinate of the first endpoint of the line
y1	y co-ordinate of the first endpoint of the line
x2	x co-ordinate of the second endpoint of the line
y2	y co-ordinate of the second endpoint of the line

### Description **line()** draws a line on the canvas, using the inputs to determine the position of the 2 endpoints (the points on either end of the line segment.) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # rect() Rectangle - Draws a rectangle with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FkVi1mrlT1AgD96ZsqhpD%2Funtitled%20$9$%20$1$.png?alt=media\&token=e6d3fe90-f143-4b82-999e-45d420a78678) ```python rect(100, 150, 200, 100) ``` ### Syntax #### Basic Inputs ```python rect(x, y, width, height) ```

Input	Description
x	x co-ordinate of the bottom left corner
y	y co-ordinate of the bottom left corner
width	width of the rectangle (length in x direction)
height	height of the rectangle (length in y direction)

#### Curved Corners Optional Inputs ``` rect(x, y, width, height, topleft, topright, bottomright, bottomleft) ```

Input	Description
x	x co-ordinate of the bottom left corner
y	y co-ordinate of the bottom left corner
width	width of the rectangle (length in x direction)
height	height of the rectangle (length in y direction)
bottomleft	radius of circle of curvature for the bottom left corner
bottomright	radius of circle of curvature for the bottom right corner
topright	radius of circle of curvature for the top right corner
topleft	radius of circle of curvature for the top left corner

### Description **rect()** draws a rectangle on the canvas, using the inputs to determine the position and dimension of the shape. The corners can be given a curvature in order to draw a **'rounded rectangle'**, but the base and height of the rectangle must always be parallel to the x-axis and y-axis respectively - this can only be changed separately with a rotation. ## Modes By default, the **x** and **y** inputs refer to the bottom left corner of the rectangle. This can be changed using `rectMode()`, with an input of **CORNER**, **CORNERS**, **RADIUS** or **CENTER.** #### rectMode(CORNER) This is the default mode. The code: ```python rect(x, y, width, height) ``` will use **(x,y)** as the bottom left corner coordinates and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FH7jnWwV1HrCuiLhMKYZf%2Fimage.png?alt=media\&token=d359c24f-f9ba-48ae-ae2d-e40186b83c0a) #### rectMode(CORNERS) This mode is for specifying the coordinates of opposite corners. The code: ```python rect(x1, y2, x2, y2) ``` will use **(x1,y1)** as the bottom left corner coordinates and **(x2,y2)** as the top right (diagonally opposite) corner coordinates. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Ff8nM5e2QGvkKSTqcBCv6%2Fimage%20$1$.png?alt=media\&token=7f95123f-0849-4db6-8d2e-d2fa50ed0f50) #### rectMode(CENTER) This mode is for specifying the **center** of the rectangle together with the **width** and **height**. The code: ```python rect(x, y, width, height) ``` will use **(x,y)** as the center coordinates and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FJ1FmcfCIdaaSCnFmX8NF%2Fimage%20$2$.png?alt=media\&token=bbe1c159-f4ce-44fb-b885-aecb3ca9500f) #### rectMode(RADIUS) This mode is for specifying the **center** of the rectangle together with **half the width** and **half the height**. The code: ```python rect(x, y, wRadius, hRadius) ``` will use **(x,y)** as the center coordinates and **wRadius \* 2** and **hRadius \* 2** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FGC1q5mTekbZbdSklMi8e%2Fimage%20$3$.png?alt=media\&token=40ccbbe5-d6db-4c23-90ea-4edb9834f00a) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # square() Square - Draws a square with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FhUrs6DIaJBC0VLWTquqU%2Fsquare%20plain.png?alt=media\&token=82d8e73e-7ba5-4d3a-be73-fdedc7e7062a) ```python square(100, 100, 200) ``` ### Syntax ```python square(x, y, length) ```

Input	Description
x	x co-ordinate of the bottom left corner
y	y co-ordinate of the bottom left corner
length	length of the square (length in x direction and y direction)

### Description **square()** draws a square on the canvas, using the inputs to determine the position and dimension of the shape. The corners can be given a curvature in order to draw a 'rounded square', but the length and height of the square must always be equal to one another. Also, the length and height need to be parallel to the x-axis and y-axis respectively - this can only be changed separately with a rotation. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # triangle() Triangle - Draws a triangle with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F9U3pB9v8zK6p2AXkjmAM%2Fspaces_qbs7pgU3AVBY06Rl9M31_uploads_Ggln3ASl0agPEHKqHvd1_triangle.png?alt=media\&token=02eaf7b8-9ffa-4185-ae67-6e183b88af55) ```python triangle(100, 100, 200, 300,300,100) ``` ### Syntax ```python triangle(x1, y1, x2, y2, x3, y3) ```

Input	Description
x1	x co-ordinate of the left corner
y1	y co-ordinate of the left corner
x2	x co-ordinate of the middle corner
y2	y co-ordinate of the middle corner
x3	x co-ordinate of the right corner
y3	y co-ordinate of the right corner

### Description **triangle()** draws a triangle on the canvas, using the inputs to determine the positions of the 3 corners. Even though this is the simplest 2D shape, it takes the most complicated form of input, since total freedom to specify the shape is given. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # circle() Circle - Draws a Circle with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FDhGZaznqp1LEsKUCV79t%2Fcircle.png?alt=media\&token=b1196a5b-6c9e-4b76-8c97-022a23fbc5d5) ```python circle(200, 200, 150) ``` ### Syntax ```python circle(x, y, diameter) ```

Input	Description
x	x co-ordinate of the center
y	y co-ordinate of the center
diameter	diameter of the circle

### Description **circle()** draws a circle on the canvas, using the inputs to determine the position and dimension of the shape. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # ellipse() Ellipse - Draws an Ellipse with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F7GyPOnsfr09SIP2nvSXU%2Fspaces_qbs7pgU3AVBY06Rl9M31_uploads_LG2ir8ZKuxVt6rJ5R1qr_ellipse.png?alt=media\&token=d030596d-f5a8-495f-a074-7736ab6b653d) ```python ellipse(200, 200, 300, 150) ``` ### Syntax ```python ellipse(x, y, width, height) ```

Input	Description
x	x co-ordinate of the center
y	y co-ordinate of the center
width	width of the ellipse (length in x direction)
height	height of the ellipse (length in y direction)

### Description **ellipse()** draws an ellipse on the canvas, using the inputs to determine the position and dimension of the shape. The width and height of the ellipse must always be parallel to the x-axis and y-axis respectively - this can only be changed separately with a rotation. ## Modes By default, the **x** and **y** inputs refer to the center of the ellipse. This can be changed using `ellipseMode()`, with an input of **CENTER**, **CORNERS**, **CORNER**, or **RADIUS**. #### ellipseMode(CENTER) This is the default mode. The code: ```python ellipse(x, y, width, height) ``` will use **(x,y)** as the center coordinates and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F63welyH6mKdMX7szquxJ%2Fspaces_qbs7pgU3AVBY06Rl9M31_uploads_QlBjjeydULcgrVfjyiQd_image.png?alt=media\&token=5df566ae-ec92-41ac-9b20-cc98abb99cb9) #### ellipseMode(CORNERS) This mode is for specifying the coordinates of opposite corners of the ellipse's bounding box. The code: ```python ellipse(x1, y2, x2, y2) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FIE51W2lNUm7iIUjeOHyj%2Fimage.png?alt=media\&token=3ca8d785-d2fc-4cd1-84d7-b310c364adfe) #### ellipseMode(CORNER) This mode is for specifying the **corner** of the ellipse's bounding box together with the **width** and **height**. The code: ```python ellipse(x, y, width, height) ``` will use **(x,y)** as the bottom left corner of the ellipse's bounding box and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FgnKfQUhEVamsguTXMRuv%2Fimage%20$1$.png?alt=media\&token=720ba19a-fa60-4854-b6db-4878f3a649bd) #### ellipseMode(RADIUS) This mode is for specifying the **center** of the ellipse together with **half the width** and **half the height**. The code: ```python ellipse(x, y, wRadius, hRadius) ``` will use **(x,y)** as the center coordinates and **wRadius \* 2** and **hRadius \* 2** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FJx8kQKzQqPyvD5WqGErQ%2Fimage%20$2$.png?alt=media\&token=e791c9ce-747c-4ba8-84b9-32b4942c3a38) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # arc() Arc - Draws an Arc with the given inputs ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FHo52lA1oK5yMUZfDXCVf%2F90%20degree%20arc.png?alt=media\&token=5915f9e6-54c8-4fef-91ce-875d09efa83b) ```python arc(200, 200, 300, 150, 0, 90) ``` ### Syntax ```python arc(x, y, width, height, Starting angle, Ending angle) ```

Input	Description
x	x co-ordinate of the center
y	y co-ordinate of the center
width	width of the arc (length in x direction)
height	height of the arc (length in y direction)
starting angle	counter-clockwise angle of first arc arm from the positive x-axis
ending angle	counter-clockwise angle of second arc arm from the positive x-axis

### `(x, y, width, height...)`

### `(..., Starting angle, ...)`

### `(..., Ending angle)`

### Description **arc()** draws an arc on the canvas, using the inputs to determine the position and dimension of the shape. The width and height of the arc must always be parallel to the x-axis and y-axis respectively - this can only be changed separately with a rotation. The starting and ending angle must always be given in a counter-clockwise direction starting from the positive x-axis. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # quad() Quadrilateral - Draws a Quadrilateral with the given inputs ### Example

```python quad(250,100,100,100,50,200,350,350) ``` ### Syntax ```python quad(x1, y1, x2, y2, x3, y3, x4, y4) ```

Input	Description
x1	x co-ordinate of the first corner (vertex 1)
y1	y co-ordinate of the first corner (vertex 1)
x2	x co-ordinate of the second corner (vertex 2)
y2	y co-ordinate of the second corner (vertex 2)
x3	x co-ordinate of the third corner (vertex 3)
y3	y co-ordinate of the third corner (vertex 3)
x4	x co-ordinate of the fourth corner (vertex 4)
y4	y co-ordinate of the fourth corner (vertex 4)

### Description Creates a quadrilateral with corners (vertices) at the given co-ordinates. Co-ordinates **must** be specified in clockwise or counter-clockwise direction, otherwise the resulting shape might not contain only one area. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # beginShape() Draws a polygon with any number of given vertices. ### Example

```python beginShape() vertex(200, 100) vertex(300, 150) vertex(300, 250) vertex(200, 300) vertex(100, 250) vertex(100, 150) vertex(200, 100) endShape() ``` ### Syntax ```python beginShape(FORMAT) ... vertex(x1,y1) vertex(x2,y2) vertex(x3,y3) etc. ... endShape(MODE) ```

Input	Description
beginShape()	starts the list of co-ordinates
FORMAT	contains any of POINTS, LINES, TRIANGLES, QUADS, TESS, see Description
vertex(xi,yi)	The coordinates of the i-th vertex of the polygon
endShape()	ends the list of co-ordinates
MODE	CLOSE or nothing

### Description **beginShape()** and **endShape()** allow the drawing of shapes with many corners. After beginShape() is called, **corners** (vertices) should be listed, each on a separate line. After that, **endShape()** should be called to end the list. Corners are written in their x,y co-ordinates as **vertex(x,y)** The inputs available for beginShape() are: **TESS** Connects the edges and creates a closed region. This is the **default** behavior if nothing was given.

**POINTS** Draw a set of points

**LINES** Draw a set of unconnected line segments

**TRIANGLES** Draw a set of triangles

**QUADS** Draw a set of quadrilaterals

`endShape(CLOSE)` connects the last vertex to the first one

`endShape()`


plane() - Plane	plane()	plane.PNG
box() - box	box()	box.PNG
sphere() - Sphere	sphere()	sphere.PNG
cone() - Cone	cone()	cone.PNG
cylinder() - Cylinder	cylinder()	cylinder.PNG
ellipsoid() - Deformed Sphere	ellipsoid()	ellipsoid.PNG
torus() - Donut-like Shape	torus()	torus.PNG

#### To be able to draw in 3D, `WEBGL` mode needs to be activated on your canvas. `createCanvas(width, height,`` `**`WEBGL`**`)` ## How are 3D Shapes drawn? In WEBGL mode, 3D shapes are constructed using **triangular faces**. Each face is defined by three vertices that specify a **triangular face** in space, and each face is **assigned a vector** that indicates the normal direction of the face (resulting in an upper and a lower face). This enables the face to interact with incoming light and be shaded accurately.

## Details Because a 3D shape like a sphere is constructed from triangular faces, it is not perfectly curved. The level of curvature depends on the number of faces used. In all the functions used to create 3D shapes, there are two optional parameters: `detailX` and `detailY`. These parameters specify the number of faces that the shape is divided into in the X or Y direction. ```python sphere([radius], [detailX], [detailY]) ```

```python cone([radius], [height], [detailX], [detailY], [cap]) ```

## Translated Shapes Methods introduced in this following pages all draw the shapes **at the origin** `(0, 0, 0)` by default, and they don't have parameters to specify their position. \ The common practice is to [translate()](/p5-python-web/reference/built-in-functions/translate) **the origin to where you want to the shape to be drawn**, and draw it at that new origin. To not disturb the positions of other shapes, use push() and pop(). Hence, a common block of code in `WEBGL` mode looks like ```python push() translate(100, 0, 0) sphere(50) pop() ``` {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # plane() Plane - Draws a flat 2D bounded surface in 3D ## Example

## Syntax ```python plane([width], [height], [detailX], [detailY]) ```

Parameter	Description
width	width of the plane
height	height of the plane

Example Full Code

```python def setup(): createCanvas(300,300, WEBGL) def draw(): background(255, 79, 132) orbitControl() stroke(176, 235, 51) fill(112, 88, 255) strokeWeight(2) r = frameCount rotateX(r) rotateY(-r) rotateZ(r) plane(200, 100) ```

## Description draws a plane of a specified width and height **in the x-y plane.** So, the width is the length in the x-direction, where the height is the length in the y-direction. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # box() Box - Draws a cuboid/rectangular prism ## Example

## Syntax ```python box([width], [height], [depth], [detailX], [detailY]) ```

Parameter	Description
width	length of the box in the x-direction
height	length of the box in the y-direction
depth	length of the box in the z-direction

Example Full Code

## Description draws a box of a specified width, height, and depth. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # sphere() Sphere - Draws a 2-sphere (sphere in 3D space) ## Example

## Syntax ```python sphere([radius], [detailX], [detailY]) ```

Parameter	Description
radius	radius of the sphere

Example Full Code

## Description draws a **UV** sphere with a specified radius. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # cone() Cone - Draws a cone in 3D space ## Example

## Syntax ```python cone([radius], [height], [detailX], [detailY], [cap]) ```

Parameter	Description
radius	radius of the cone
height	height of the cone
cap	a boolean to specify whether or not the cone should be closed with a cap

Example Full Code

Example Full Code

## Description draws a cone with a specified radius and height. A cap that closes the cone is drawn by default, and can be removed by setting `cap = False` {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # cylinder() Cylinder - draws a cylinder in 3D space ## Example

## Syntax ```python cylinder([radius], [height], [detailX], [detailY], [bottomCap], [topCap]) ```

Parameter	Description
radius	radius of the cone
height	height of the cone
bottomCap	a boolean to specify whether or not the cylinder's bottom should be closed with a cap
topCap	a boolean to specify whether or not the cylinder's bottom should be closed with a cap

Example Full Code

Example Full Code

Example Full Code

## Description draws a cylinder with a specified radius and height. A top or bottom cap that closes the cone is drawn by default, and can be removed by setting `topCap` or `bottomCap` to `False` {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # ellipsoid() Ellipsoid - Draws an ellipsoid/deformed sphere in 3D s\[ace ## Example

## Syntax ```python ellipsoid([radiusx], [radiusy], [radiusz], [detailX], [detailY]) ```

Parameter	Description
radiusX	radius of the ellipsoid in the x-direction
radiusY	radius of the ellipsoid in the y-direction
radiusZ	radius of the ellipsoid in the z-direction

Example Full Code

## Description draws a **UV** **deformed sphere** with a specified radius. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # torus() Torus - Draws a Torus or Donut-like shape in 3D space ## Example

## Syntax ```python torus([radius], [tubeRadius], [detailX], [detailY]) ```

Parameter	Description
radius	radius of the ring
tubeRadius	radius of the tube

Example Full Code

## Description draws a torus (donut-like shape) with a specified radius of its ring and a specified radius of the circular cross section if its tube. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Controlling the environment These functions control other aspects of the canvas, or the modes of various drawing functions {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # coordinateMode() changes where the coordinates originate from ### Examples ```python coordinateMode(TOP_LEFT) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FWpmPNB2b70Q54ZpKXbBO%2Funtitled.png?alt=media\&token=51a7f76d-cdf8-4bd9-b286-a357eefa8da4) ```python coordinateMode(BOTTOM_LEFT) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FiWv9hC55CAZGS1aOsVK9%2Funtitled%20$1$.png?alt=media\&token=5404ead8-85bc-4448-a3c8-6b1b45672467) Sets the coordinate mode to TOP\_LEFT or BOTTOM\_LEFT. Coordinate mode is set to BOTTOM\_LEFT by default. BOTTOM\_LEFT mode mimics the standard mathematical setup where coordinate (0,0) is in the bottom left and the y-axis increases upwards. ```python coordinateMode(MODE) ```

Input	Description	Value(s)	Default
MODE	coordinate mode to be set	TOP_LEFT BOTTOM_LEFT	BOTTOM_LEFTpy

see [drawTickAxes](/p5-python-web/reference/math/drawtickaxes) for more info. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # rectMode() changes the way a rectangle is drawn from the inputs By default, the **x** and **y** inputs refer to the bottom left corner of the rectangle. This can be changed using `rectMode()`, with an input of **CORNER**, **CORNERS**, **RADIUS** or **CENTER.** #### rectMode(CORNER) This is the default mode. The code: ```python rect(x, y, width, height) ``` will use **(x,y)** as the bottom left corner coordinates and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FH7jnWwV1HrCuiLhMKYZf%2Fimage.png?alt=media\&token=d359c24f-f9ba-48ae-ae2d-e40186b83c0a) #### rectMode(CORNERS) This mode is for specifying the coordinates of opposite corners. The code: ```python rect(x1, y2, x2, y2) ``` will use **(x1,y1)** as the bottom left corner coordinates and **(x2,y2)** as the top right (diagonally opposite) corner coordinates. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Ff8nM5e2QGvkKSTqcBCv6%2Fimage%20$1$.png?alt=media\&token=7f95123f-0849-4db6-8d2e-d2fa50ed0f50) #### rectMode(CENTER) This mode is for specifying the **center** of the rectangle together with the **width** and **height**. The code: ```python rect(x, y, width, height) ``` will use **(x,y)** as the center coordinates and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FJ1FmcfCIdaaSCnFmX8NF%2Fimage%20$2$.png?alt=media\&token=bbe1c159-f4ce-44fb-b885-aecb3ca9500f) #### rectMode(RADIUS) This mode is for specifying the **center** of the rectangle together with **half the width** and **half the height**. The code: **See** [**rect()**](/p5-python-web/reference/shapes/2d/rect#modes) **for examples and more info.** {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # ellipseMode() changes the way an ellipse is drawn from the inputs By default, the **x** and **y** inputs refer to the center of the ellipse. This can be changed using `ellipseMode()`, with an input of **CENTER**, **CORNERS**, **CORNER**, or **RADIUS**. #### ellipseMode(CENTER) This is the default mode. The code: ```python ellipse(x, y, width, height) ``` will use **(x,y)** as the center coordinates and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F63welyH6mKdMX7szquxJ%2Fspaces_qbs7pgU3AVBY06Rl9M31_uploads_QlBjjeydULcgrVfjyiQd_image.png?alt=media\&token=5df566ae-ec92-41ac-9b20-cc98abb99cb9) #### ellipseMode(CORNERS) This mode is for specifying the coordinates of opposite corners of the ellipse's bounding box. The code: ```python ellipse(x1, y2, x2, y2) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FIE51W2lNUm7iIUjeOHyj%2Fimage.png?alt=media\&token=3ca8d785-d2fc-4cd1-84d7-b310c364adfe) #### ellipseMode(CORNER) This mode is for specifying the **corner** of the ellipse's bounding box together with the **width** and **height**. The code: ```python ellipse(x, y, width, height) ``` will use **(x,y)** as the bottom left corner of the ellipse's bounding box and **width** and **height** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FgnKfQUhEVamsguTXMRuv%2Fimage%20$1$.png?alt=media\&token=720ba19a-fa60-4854-b6db-4878f3a649bd) #### ellipseMode(RADIUS) This mode is for specifying the **center** of the ellipse together with **half the width** and **half the height**. The code: ```python ellipse(x, y, wRadius, hRadius) ``` will use **(x,y)** as the center coordinates and **wRadius \* 2** and **hRadius \* 2** as the dimensions. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FJx8kQKzQqPyvD5WqGErQ%2Fimage%20$2$.png?alt=media\&token=e791c9ce-747c-4ba8-84b9-32b4942c3a38) **See** [**ellipse()**](/p5-python-web/reference/shapes/2d/ellipse) **for examples and more info.** {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # frameRate() changes the number of frames drawn per second ## Example ```python frameRate(10) ``` 10 frames are drawn per second so the image refreshes quite slowly ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FqhDdpWeIcQOxgx107Qzz%2Fslowfps.gif?alt=media\&token=52e4651a-67ba-412e-b3d5-219932d96e7e) ```python frameRate(60) ``` 60 frames are drawn per second so the image refreshes very rapidly ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FE82S8sYJ808ZLjp1ReO8%2Ffastfps.gif?alt=media\&token=ab161e5b-d231-479d-8acd-ae46c8c6202e) Sets the number of frames to draw every second on the canvas. For example, frameRate(10) will cause the canvas to attempt to refresh 10 times per second. The default frame rate is 60 frames per second (fps), if the device cannot draw at the specified fps, it will draw at the highest fps possible. ```python frameRate(fps) ```

Input	Description
fps	number of frames per second to be set

```python def setup(): background("grey") def draw(): fill(255,79,132) circle(mouseX,mouseY,100) ``` ### Syntax `setup()` ### Description The setup() function is called only **once at the beginning** of the program. Its purpose is to set up the **initial environment** of the program, such as canvas size, background color, to load media such as images and fonts as the program starts and any other initial values that the program needs. The `setup()` function takes no arguments, and must be defined in the program before the `draw()` function. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # draw() Renders to the canvas repeatedly, frame by frame ### Example

```python def setup(): createCanvas(400,400) def draw(): background("grey") fill(255,79,132) circle(mouseX,mouseY,100) ``` ### Syntax `draw()` ### Description The `draw()` function is automatically called **continuously** at a fixed time interval (by default, 60 times per second) as long as the program is running. It is first called immediately after the **setup()** function. The number of times draw() executes in each second may be controlled with the **frameRate()** function. Inside the `draw()` function, you can use a variety of p5 Python functions to draw shapes, lines, and text on the canvas, as well as manipulate the color, position, and size of these elements. You can also use variables to create animations or interactive elements that respond to user input. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Built-in Variables These variables are automatically available in all p5 sketches {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Environment These variables keep track of attributes of the p5 environment ## `frameCount` This variable stores how many frames have been drawn since the sketch (most recently) started. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FtvCysxmuOOtgJUKVdmm9%2FframeCount.gif?alt=media\&token=2ed39558-1002-4de0-bc55-9c04e7cc8321) For example - if the frame rate is set to 60 (which is the default) - after 3 seconds, frameCount = 180 because this is how many frames have been drawn during that time. ## `width` This variable stores the width of the **canvas in pixels**, not to be confused with the width of the window, `windowWidth`

## `height` This variable stores the height of the **canvas in pixels**, not to be confused with the height of the window, `windowHeight`

## `windowWidth` This variable stores the width of the **window**, not to be confused with the width of the canvas `width`.\ This variable changes as the window size changes.

## `windowHeight` This variable stores the height of the **window**, not to be confused with the height of the canvas `height`.\ This variable changes as the window size changes. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FAKbTsSkXq596IsPLaaFZ%2FwindowHeight.gif?alt=media\&token=6b234618-0968-4d48-ac96-c23516fdf9d9) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Keyboard These built-in variables will give you information about the keyboard. ## `key` This built-in variable stores the **value** of the **most recently pressed key.** For example, if the user presses **'m'**, then **'b'** : **key** will be equal to **'b'** ## `keyIsPressed` This built-in variable has the value `True` **if any key is pressed at the moment**. It has the value `False` otherwise. (Boolean datatype) ## `keyCode` This built-in variable stores the **key code** of the **last key** that was pressed. Here are some **built-in constants** that can be used ```python ENTER = 13 SHIFT = 16 UP_ARROW = 38 DOWN_ARROW = 40 LEFT_ARROW = 37 RIGHT_ARROW = 39 ``` In general, you can search the web for: `key code of ###` or look at [this website](https://www.toptal.com/developers/keycode). {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Mouse ## `mouseX` It tells the **x-coordinate** of the mouse relative to the **default origin** (either `TOP_LEFT` or `BOTTOM_LEFT`) in the **current** frame. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F5TKmV64bSn8VKEpbpW5w%2FmouseX.gif?alt=media\&token=c3606b45-b39e-4138-b967-4c1851dd5b7b) ## `mouseY` It tells the **y-coordinate** of the mouse relative to the **default origin** (either `TOP_LEFT` or `BOTTOM_LEFT`) in the **current** frame. ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FPQjLqHL3rCdipZ8AlIFl%2FmouseY.gif?alt=media\&token=fc1e5cf7-b3ec-4700-b667-b270f9192805) ## `pmouseX` It tells the **x-coordinate** of the mouse relative to the **default origin** (either `TOP_LEFT` or `BOTTOM_LEFT`) in the **previous** frame. ## `pmouseY` It tells the **y-coordinate** of the mouse relative to the **default origin** (either `TOP_LEFT` or `BOTTOM_LEFT`) in the **previous** frame. ## `mouseMovedX` It tells us how much did the **mouse move horizontally** since the last frame. It's then equivalent to the value `mouseX - pmouseX` ## `mouseMovedY` It tells us how much did the **mouse move vertically** since the last frame. It's then equivalent to the value `mouseY - pmouseY` ## `winMouseX` This built-in variable contains the current horizontal position of the mouse, relative to origin of the window. ## `winMouseY` This built-in variable contains the current vertical position of the mouse, relative to origin of the window. ## `pwinMouseX` This built-in variable contains the horizontal position of the mouse in the previous frame, relative to origin of the window. ## `pwinMouseY` This built-in variable contains the vertical position of the mouse in the previous frame, relative to origin of the window. ## `mouseButton` It stores the **label** of the last mouse button that was pressed. It returns one of three values `"left"`, `"right"`, `"center"`.\ When the sketch is run and nothing is pressed yet, it takes the value `0`. You can use these **built-in constants** instead ```python LEFT = "left" RIGHT = "right" CENTER = "center" ``` ## `mouseIsPressed` It returns the value `True` if **any** mouse button is **currently** pressed. It returns `False` otherwise. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Built-in Functions These functions are automatically available in any p5 sketch {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # keyIsDown() Checks whether a certain key is down ### Example

```python # W keyCode = 87 if keyIsDown(87): # move square up # ... # S keyCode = 83 if keyIsDown(83): # move square down # ... # A keyCode = 65 if keyIsDown(83): # move square left # ... # D keyCode = 68 if keyIsDown(83): # move square right # ... ```

Example Full Code

``` def setup(): createCanvas(400,400) textAlign(CENTER, CENTER) textSize(20) squareX = 175 squareY = 100 squareSize = 50 def draw(): global squareX, squareY, squareSize background("hotpink") fill(255, 255, 28) noStroke() if keyIsDown(87): squareY += 1 text('"W" is Down(Pressed) now',200,350) if keyIsDown(83): squareY -= 1 text('"S" is Down(Pressed) now',200,350) if keyIsDown(65): squareX -= 1 text('"A" is Down(Pressed) now',200,350) if keyIsDown(68): squareX += 1 text('"D" is Down(Pressed) now',200,350) stroke('black') fill (112,88,255) square(squareX,squareY,squareSize) ```

### Default inputs ```python keyIsDown(VALUE) ``` | Input | Description | | ----- | --------------------------------- | | VALUE | key code of the key being checked | ### Description The **keyIsDown()** function checks if a certain key is currently **down (Pressed)**. It returns `True` if that key is down, and `False` if it does not. (Boolean datatype) For example, `keyIsDown(`**`38`**`)`checks whether the **up arrow** is being pushed, since **38** is its keycode. Similarly, `keyIsDown(`**`UP_ARROW`**`)`checks for the same thing, because **UP\_ARROW** is a constant that stores the key code of the up arrow, other such constants include **DOWN\_ARROW**, **ENTER** and **SHIFT**. In general, you can search the web for: `key code of ###` or look at [this website](https://www.toptal.com/developers/keycode). {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # millis() Gets system's milliseconds ### Example

```python text('Milliseconds since starting this sketch:',200,250) text(millis(), width/2, height/2) ``` ### **Syntax** `millis()` ### **Description** The `millis()` function works by keeping track of the number of **milliseconds** that have passed since the program **started running**. You can use this in your program to create time-based behaviors. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # second() Gets system's second ### **Example**

```python text('Computer Seconds:',200,250) text(second(), width/2, height/2) ``` ### Syntax `second()` ### Description It communicates with the clock on your computer and returns the **current second** of the minute as an integer, ranging from **0 to 59**. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # minute() Gets system's minute ### Example

```python text('Current Minute:',200,250) text(minute(), width/2, height/2) ``` ### **Syntax** ``` minute() ``` ### **Description** The `minute()` function returns the **current minute** of the hour as an integer ranging from **0 to 59**. It takes no arguments, and simply returns the current minute of the system clock. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # hour() Get system's hour ### Example

```python text('Current Hour:',200,250) text(hour(), width/2, height/2) ``` ### Syntax ``` hour() ``` ### Description It returns the **current hour** of the day as an integer, ranging from **0 to 23**. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # translate() Shifts the entire coordinate system by a horizontal and vertical amount ### Examples ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FU9bxFNEgxHwJbFc8FE2z%2Fimage.png?alt=media\&token=b789dbc4-cd4e-436f-9704-80fe762e2230) ```python translate(100,100) square(50,100,100) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FrpwNAqEkSTLS3kC3IVu5%2FtranslateGIF.gif?alt=media\&token=25007e11-d2af-4c34-994d-148853f66e79) ```python translate(mouseX,mouseY) square(50,100,100) ``` ### Syntax ```python translate(x,y) ```

Input	Description
x	Horizontal translation (left/right)
y	Vertical translation(up/down)

**a) Translated tick axes** **b) Square moved to new position (150,200)**

### Description The `translate()` function is used to **move the origin point of the coordinate system** to a new location. When you call the `translate()` function, all subsequent drawing commands will be relative to the new origin point. This means that if you draw a shape or line at position `(50, 50)` after calling `translate(100, 100)`, it will actually appear at position `(150, 150)` on the canvas. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # rotate() Rotates the entire coordinate system around the origin ### Example

```python translate(width/2, height/2) rotate(frameCount * 0.5) trect(50, 50, 100, 100) ``` ### Syntax `rotate(angle)`

Input	Description
angle	the angle of rotation in radians/degrees depending on angle mode

What is actually happening in the above example is 👇

### Description The `rotate()` function is used to **rotate the coordinate system** by a specified angle **about the current origin**. This means that any subsequent drawing or transformation function will be affected by this rotation. **Positive** angles will rotate the plane from **+x to +y**, so: * In `BOTTOM_RIGHT` coordinate system, positive angles rotate counter-clockwise. * In `BOTTOM_LEFT` coordinate system, positive angles rotate clockwise. **Negative** angles rotate the plane from **+x to -y** {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # createSlider() Creates a HTML Slider element ### Example

```python def setup(): global slider1,slider2,slider3 slider1 = createSlider(0, 255,1) slider1.position(50,40) slider2 = createSlider(0,255,1) slider2.position(50,60) slider3 = createSlider(0,255,1) slider3.position(50,80) def draw(): global slider1,slider2,slider3 fill(slider1.value(),slider2.value(),slider3.value()) circle(200,200,200) ``` ### Syntax ``` createSlider(minimum, maximum, [initial_value], [step]) ```

Input	Description
minimum	minimum value of the slider
maximum	maximum value of the slider
initial_value(optional)	initial value of the slider
step(optional)	step size between values on the slider.

### Description `createSlider()` function can be used to create a slider control . A slider control is a **graphical user interface element** that **allows the user to select a value** within a specified range **by dragging a handle along a track.** To draw the slider control on the canvas, you can use the `draw()` function and the `value()` method of the slider object {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # createGraphics() Creates an additional canvas that can be overlaid on any other existing canvases ### Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FxpKWkTYfm7YrWu0TnBpV%2Fimage.png?alt=media\&token=cea7d291-ef2a-4433-8da8-0f3e4fe07f1e) ```python def setup(): ... global canvas2 canvas2 = createGraphics(200, 200) def draw(): ... canvas2.background(112, 88, 255) canvas2.fill(176, 235, 51) canvas2.circle(100,100,100) image(canvas2, 100, 100) ``` ### Syntax ```python createGraphics(w, h) ```

Inputs	Description
w	width of the off-screen buffer
h	height of the off-screen buffer

### Description the `createGraphics()` function is used to **create an off-screen graphics** buffer that can be manipulated and then displayed on the main canvas. The buffer is displayed on the main canvas using `image(buffer, x, y)`. Using `createGraphics()` allows you to create complex graphics that can be drawn off-screen before being displayed on the main canvas. This is particularly useful when you want to create more complex animations or drawings that would be difficult to create directly on the main canvas. #### Example: *Below program uses one background under setup() and one under draw()*

Example full code

```python def setup(): createCanvas(400,400) frameRate(7) global buffer buffer = createGraphics(200, 200) background(255, 79, 132) def draw(): noStroke() fill(255, 164, 28,100) circle(random(width),random(height),50) # drawTickAxes() buffer.background(112, 88, 255) buffer.noStroke() # buffer.drawTickAxes() buffer.fill(176, 235, 51) buffer.circle(random(20,190),random(20,190),50) image(buffer, 100, 100) ```

```python point = createVector(200, 100) circle(point.x, point.y,mouseX ) ``` ### Syntax ``` createVector([x], [y], [z]) ```

Input	Description
x	horizontal component of the vector
y	vertical component of the vector
z(optional)	depth component of the vector (in case of 3D)

### Description The `createVector()` function is used to **create a 2D or 3D vector**, which is essentially an object with `x`, `y`, and optionally `z` properties that represent a magnitude and direction in space. Once you have created a vector using the `createVector()` function, you can access its components using the `x`, `y`, and `z` properties. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Events These functions will automatically trigger upon certain events {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Keyboard


Key Press Event	keyPressed()	press gif.gif
Key Release Event	keyReleased()	release gif.gif

# keyPressed() ## Example

```python def keyPressed(): ... text(key,200,200) ``` ## Syntax ```python def keyPressed(): # execute this code when any key is pressed ... ```

Full Code Example

```python def setup(): createCanvas(300, 300) frameRate(5) fill(255, 164, 28) stroke(44, 129, 237) strokeWeight(2) w = 150 h = 150 def draw(): background(255, 79, 132) ellipse(150, 150, w, h) def keyPressed(): global w, h if keyCode == 37: w -= 30 elif keyCode == 38: h += 30 elif keyCode == 39: w += 30 elif keyCode == 40: h -= 30ython ```

## Description Like [draw()](/p5-python-web/reference/controlling-the-environment/draw) and [setup()](/p5-python-web/reference/controlling-the-environment/setup) functions, this function is a built-in function that we override. That is, it **knows when** to run, but it **doesn't know what** do? That's why in the syntax, we just seem to define it, but not call it later. So, this function runs **when a key is pressed (once it's hit, regardless if you hold it or release it later)**. Built-in variables like [`keyCode`](/p5-python-web/reference/built-in-variables/keyboard#keycode) and [`key`](/p5-python-web/reference/built-in-variables/keyboard#key) can be used to know which key was pressed. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # keyReleased() ## Example

```python def keyReleased(): ... text(key,width/2,0.2*height) ``` ## Syntax ```python def keyReleased(): # execute this code when any key is released ... ```

Full Code Example

```python def setup(): createCanvas(300, 300) frameRate(5) fill(255, 164, 28) stroke(44, 129, 237) strokeWeight(2) w = 150 h = 150 def draw(): background(255, 79, 132) ellipse(150, 150, w, h) def keyReleased(): global w, h if keyCode == 37: w -= 30 elif keyCode == 38: h += 30 elif keyCode == 39: w += 30 elif keyCode == 40: h -= 30ython ```

## Description Like [draw()](/p5-python-web/reference/controlling-the-environment/draw) and [setup()](/p5-python-web/reference/controlling-the-environment/setup) functions, this function is a built-in function that we override. That is, it **knows when** to run, but it **doesn't know what** do? That's why in the syntax, we just seem to define it, but not call it later. So, this function runs **when a key is released (regardless if you were holding it or you just pressed it before that)**. Built-in variables like [`keyCode`](/p5-python-web/reference/built-in-variables/keyboard#keycode) and [`key`](/p5-python-web/reference/built-in-variables/keyboard#key) can be used to know which key was released. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Mouse


mouseMoved()			mouseMoved()
mouseDragged()			mouseDragged()
mousePressed()			mousePressed()
doubleClicked()			doubleClicked()
mouseWheel()			mouseWheel()

# mouseMoved() ## Example

## Syntax ``` def mouseMoved(): # do stuff ```

Full Code Example

```python def setup(): createCanvas(300,300) show = False def draw(): global show background(255, 79, 132) fill(255, 164, 28) stroke(44, 129, 237) strokeWeight(10) if show: circle(150, 150, 150) show = False def mouseMoved(): global show show = True ```

## Description This function is called every time the **mouse moves** and **none** of the mouse buttons is pressed. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # mouseDragged() ## Example

## Syntax ``` def mouseDragged(): # do stuff ```

Full Code Example

## Description This function is called every time the **mouse moves** and **some** mouse button is pressed. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # mousePressed() ## Example

## Syntax ``` def mousePressed(): # do stuff ```

Full Code Example

```python def setup(): createCanvas(300,300) frameRate(10) show = False def draw(): global show background(255, 79, 132) fill(255, 164, 28) stroke(44, 129, 237) strokeWeight(10) if show: circle(150, 150, 150) show = False def mousePressed(): global show show = True ```

## Description This function is called **once** after **any** mouse button is pressed. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # doubleClicked() ## Example

## Syntax ``` def doubleClicked(): # do stuff ```

Full Code Example

## Description This function is called every time a `dblclick` event (part of the DOM L3 specification) is detected. The `dblclick` event is fired when a mouse is **clicked twice in a relatively short period of time.** {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # mouseWheel() ## Example

## Syntax ``` def mouseWheel([event]): # do stuff # work with event with property delta, like event.delta ```

Full Code Example

```python ```

## Description This function is called any time a **vertical mouse wheel** event is detected, either triggered by rolling an actual mouse wheel or by a touchpad. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Text These functions control the appearance of text on the canvas {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # text() Displays text on canvas ## Description The text function draws a text on the canvas at the specified location. The object drawn on the canvas is a shape that has an internal region which can be colored with `fill()` and a boundary which can be colored by `stroke()`. ``` text(sentence, x, y) ```

Input	Description
sentence	The content of the text. It can be any type of data, though we usually use strings.
x	the x-coordinate of the text box
y	the y-coordinate of the text box

## Examples ```python text("Hello, Strive!", 15, 25) text('This\'s been\n running for' , 15, 50) fill(255) text(f'{round(millis()/1000)} seconds', 15, 85) ```

{% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # textSize() Set size of text This function **sets or gets the current font size**. This size will be used in all subsequent calls to the [text()](/p5-python-web/reference/text/text#description) function. ``` textSize(number) ``` | Input | Description | Default | | ------ | ------------------------------ | ------- | | number | The size of the text in pixels | 10 | ## Examples ```python textSize(10) text("ABCD", 15, 25) textSize(20) text("ABCD", 15, 50) textSize(30) text("ABCD", 15, 75) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FyuHuLYpMjx2jArRxlgEe%2Fimage.png?alt=media\&token=3b5974ee-46f5-407b-a666-b44690b8c858) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # textAlign() Set how text is aligned This function controls the **alignment** of the text you create with the [text()](/p5-python-web/reference/text/text) function. It basically tell the computer how to understand the `x, y` coordinates the `text` function takes as parameter, since the text is not a point anyway.\ When you say `textAlign(RIGHT)` then call `text("Hello", x, y)` the **right edge** of the word "Hello" **becomes the** `x` value you give in the text function.\ Same thing with the vertical alignment, If you use `textAlign(RIGHT, TOP)`, the top right corner becomes the `x, y` coordinates you give in the text function.\ You need to use on the predefined constants specified below. ``` textAlign(horizAlign, [vertAlign]) ``` | Input | Description | | ---------- | ---------------------------------------------------------------------------------- | | horizAlign | Specifies the horizontal alignment, takes values **`CENTER, RIGHT, LEFT`** | | vertAlign | Specifies the vertical alignment, takes values **`CENTER, TOP, BOTTOM, BASELINE`** | ## Examples ```python textAlign(LEFT) text("ABCD", 50, 25) textAlign(RIGHT) text("ABCD", 50, 50) textAlign(CENTER) text("ABCD", 50, 75) stroke("red") strokeWeight(5) point(50, 25) point(50, 50) point(50, 75) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FXHMdXsH2i9uZkhuAmfE5%2Fimage.png?alt=media\&token=ec08afda-59c5-4786-bf1f-f7046f5eedf3) ```python textAlign(CENTER, TOP) text("ABCD", 50, 15) textAlign(CENTER, CENTER) text("ABCD", 50, 40) textAlign(CENTER, BOTTOM) text("ABCD", 50, 65) textAlign(CENTER, BASELINE) text("ABCD", 50, 90) stroke("red") strokeWeight(5) point(50, 15) point(50, 40) point(50, 65) point(50, 90) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FtLwKWP7gdxww22Wr8mDN%2Fimage.png?alt=media\&token=b557dafb-fa11-41e4-a8cd-e229b772dc67) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Math These functions give access to commonly used mathematical functions {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # drawTickAxes() Draws a grid of numbered horizontal and vertical lines showing the X and Y axes of the Cartesian plane ## Example ### *With* drawTickAxes() ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FZFwZUvcYZby1sv3pc1kJ%2FWITHaxes.png?alt=media\&token=842852c1-81d7-436b-97c8-205e89e99568) ```python background("#0F1574") drawTickAxes() ``` ### *Without* drawTickAxes() ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FQpTofaVikbKFpcNowANV%2FWITHOUTaxes.png?alt=media\&token=8ebe86b3-f924-439c-b0d5-65643c33d64c) ```python background("#0F1574") ``` ### Syntax ``` drawTickAxes( [scaleFactor], [spacing], [axisColor], [gridColor], [labelColor], [labelSize], [axisThickness], [tickThickness], [gridThickness] ); ```

Input	Description
scaleFactor	the scale factor applied to the coordinate system prior to drawing the axes
spacing	the spacing between tick marks / gridlines
axisColor	the color to draw the axes
gridColor	the color to draw the gridlines
labelColor	the color to draw the labels
labelSize	the size of the labels
axisThickness	the thickness to draw the axes
tickThickness	the thickness to draw the tick marks
gridThickness	the thickness to draw the gridlines

### Description This function draws x and y-axes with tick marks, labels, and gridlines. They are the standard cartesian coordinates {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # random() Generate a random number between two values based on a uniform probability distribution ## Example

```python circle(random(0, width), random(0, height), 25) ``` ### Syntax #### Pick a random number between two values ``` random([min], [max]) ``` | Input | Description | | ----- | ------------------------------- | | min | the minimum number of the range | | max | the maximum number of the range | #### Pick a random value from a list ``` random(choices) ``` | Input | Description | | ------- | ----------------------------- | | choices | a list of values to pick from |

Example Full Code

``` def draw(): background(255,79,132) names = ["John", "Ali", "Tamir", "Ibrahim"] actions = ["plays", "watches", "doesn't like"] things = ["football", "basketball", "chess"] orange = (255,164,28) purple = (112,88,255) blue = (44,129,237) colors = [orange,purple,blue] fill(random(colors)) text(random(names), 75, 250) fill(random(colors)) text(random(actions), 150, 150) fill(random(colors)) text(random(things), 225, 50) ```

### Description This function returns a **random decimal (float/double)** value out of a **continuous** range of numbers, between a minimum and maximum, or returns a random value out of a **discrete** list of any data types. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # randomGaussian() Generate a random number based on a Gaussian probablity distribution ## Example

```python circle(randomGaussian(150, 15), randomGaussian(150, 15), 25) ``` ### Syntax ``` randomGaussian([mean], [std]) ``` | Input | Description | | ----- | ------------------------------------------ | | mean | the mean of the distribution | | std | the standard deviation of the distribution |

```python circle(randomGaussian(150, 50), randomGaussian(150, 50), 25)a ``` ### Description This function picks a **random value from a gaussian distribution** of a specified mean `µ` and standard deviation `σ`. \ The gaussian distribution prefers those points around the mean more that others. The farther the point is from the mean the less likely it is to be picked. But how far? the standard deviation parameter specifies that.

$$ f(x) =\frac 1 {\sigma \sqrt {2\pi}}\ e^{-\frac 1 2 (\frac {x-\mu} {\sigma})^2} $$ {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # dist() Calculate the distance between 2 points ## Example

### Syntax #### In two dimensions ``` dist(x1, y1, x2, y2) ```

Input	Description
x1	the x-coordinate of the first point
y1	the y-coordinate of the first point
x2	the x-coordinate of the second point
y2	the y-coordinate of the second point

#### In three dimensions ``` dist(x1, y1, x2, y2, z1, z2) ```

Input	Description
z1	the z-coordinate of the first point
z2	the z-coordinate of the second point

```python text(round(dist(x1, y1, x2, y2)), 50, 50) ``` ```python sphere(dist(0, 0, 0, x, y, z)) x+=3*noise(2*frameCount)*random([-1, 1]) y+=4*noise(frameCount)*random([im-1, 1]) z+=noise(0.5*frameCount)*random([-1, 1]) ```

### Description Calculates the distance between two points, in either two or three dimensions. This uses the Euclidean distance, usually called the Pythagorean distance {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # linmap() Re-maps a number from one range to another. ## Example

```python # value to be mapped from the first range x1 = round(min1+(max1-min1)*sin(frameCount/10)**2) line(x1, 25, x1, 75) text(str(x1), x1, 15) # mapping the value to the second range x2 = linmap(x1, min1, max1, min2, max2) text(str(round(x2,2)), x2, 285) line(x2, 225, x2, 275) ``` ### Syntax ``` linmap(value, start1, stop1, start2, stop2, [withinBounds]) ```

Input	Description
value	the incoming value to be converted
start1	lower bound of the current range
stop1	higher bound of the current range
start2	lower bound of the newly mapped range
stop2	higher bound of the newly mapped range
withinBounds	boolean that specifies the behavior of the method if the mapped value is out of the bounds [start2, stop2]

### Description **Maps** a value from one range to another, such that the **proportions are the same.** For example, number 2.5 is mapped from the range \[0, 10] to number 25 in the range \[0, 100]. Why? Because **in both cases, the value is fourth the distance away from the starting point of the range, and three fourths away from the ending point.** Mapping 2.5 from the range \[0, 10] to the range \[10, 20] would give 12.5 for the same reason. mapping 2.5 from the range \[0, 10] to the range \[10, 30] would give 15 for the same reason. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # bounce() Returns a value that varies back and forth between 2 given limits with time. The movement is linear. ## Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Fup9jF7kvUsq0F7SWhKBg%2FNEWbounce%20$1$.gif?alt=media\&token=7651f1db-2cce-4a48-8b31-2c7397bf3e03) ```python def draw(): ... y = bounce(0,height,10) circle(200,y,20) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FKYxAEEjCa0mpTO890Zt3%2Fbounce-2.gif?alt=media\&token=31c6b499-95ca-47a8-97a9-57c2bf2f0a2a) ```python def draw(): ... y = bounce(0,height,10) x = x + 1 circle(x,y,20) ``` ### Syntax ```python bounce(edge1, edge2, speed) ```

Input	Description
edge1	value for the start/first limit of the motion
edge2	value for the end/second limit of the motion
speed	the speed of motion

### Description The `bounce` function provides a method for generating a value that changes or "varies" over time between two specific values: `edge1` and `edge2`. `edge1` and `edge2` act as boundaries. `edge1` represents the smallest value that can be returned, and `edge2` represents the largest. The function will consistently generate a new value that is somewhere between these two boundaries. The rate at which this value changes is determined by the `speed` parameter. A higher `speed` will cause the value to change more rapidly between `edge1` and `edge2`, while a lower `speed` will cause it to change more slowly. This function is useful for cases where you need a value that continuously adjusts within a specific range, such as for animations, simulations, or other dynamic processes. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # wave() Returns a value that varies back and forth between 2 given limits with time. The motion is wave-like, NOT linear. ## Example ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FtHhdB25yOWPOIr394yBn%2Fwave.gif?alt=media\&token=ffe70ae4-10d3-41b2-9eca-c3436657daac) ```python def draw(): ... y = wave(0,height,10) circle(200,y,20) ``` ![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F5TUKk0KMU2XtL4cwYiAv%2Fwave3.gif?alt=media\&token=121556e6-7cc1-444a-af41-066e55d4c466) ```python def draw(): ... y = wave(0,height,10) x = x + 1 circle(x,y,20) ``` ### Syntax ```python wave(edge1, edge2, speed) ```

Input	Description
edge1	value for the start/first limit of the wave motion
edge2	value for the end/second limit of the wave motion
speed	the speed of wave motion

### Description The `wave` function provides a method for generating a value that changes over time in a sinusoidal (wave-like) manner between two specific values: `edge1` and `edge2`. `edge1` and `edge2` act as boundaries. `edge1` is the lowest value that can be returned, and `edge2` is the highest. The function will continuously generate a new value that lies somewhere between these two boundaries, following the pattern of a wave. The rate at which this value changes follows a pendulum-like pattern and is controlled by the `speed` parameter. A higher `speed` will cause the wave to oscillate more rapidly between `edge1` and `edge2`, while a lower `speed` will make the oscillation slower. Unlike a function that changes values linearly, `wave` produces values in a smooth, cyclic pattern, similar to the rise and fall of waves on the ocean, or the swinging of a pendulum. This is especially useful for simulations, animations, or other dynamic processes where a smooth, natural, and periodic variation is needed. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Colour and Outline These functions control colors and outlines of shapes {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # colorMode() Changes how colors are specified - using (Red, Green, Blue) or (Hue, Saturation, Brightness) Example #### RGB Mode (Red, Green, Blue)

#### HSB Mode (Hue, Saturation, Brightness)

### Syntax ``` colorMode(mode, [max]) ``` or ``` colorMode(mode, max1, max2, max3, [maxA]) ```

Input	Description
mode	RGB(Red/Green/Blue) or HSB(Hue/Saturation/Brightness)
max(optional)	maximum value for each color component
max1	maximum value for red/hue component
max2	maximum value for green/saturation component
max3	maximum value for blue/brightness component
maxA(optional)	maximum value for alpha component

### Full Example

Example Full Code - RGB Mode

```python #RGB Mode def setup(): createCanvas(400,400) colorMode(RGB) global slider1,slider2,slider3 slider1 = createSlider(0, 255,1) slider1.position(50,40) slider2 = createSlider(0,255,1) slider2.position(50,60) slider3 = createSlider(0,255,1) slider3.position(50,80) def draw(): global slider1,slider2,slider3 background("grey") textSize(15) stroke('black') fill(0) text("Red",200,25) text("Green",200,45) text("Blue",200,65) fill(slider1.value(),slider2.value(),slider3.value()) triangle(100,100,200,300,300,100) ```

Example Full Code - HSB Mode

``` #HSB Mode def setup(): createCanvas(400,400) colorMode(HSB) global slider1,slider2,slider3 slider1 = createSlider(0, 360,1) slider1.position(50,height - 40) slider2 = createSlider(0,100,1) slider2.position(50,height - 60) slider3 = createSlider(0,100,1) slider3.position(50,height - 80) noStroke() def draw(): translate(width/2,height/2) global slider1,slider2,slider3 h = slider1.value() s = slider2.value() b = slider3.value() background(h,s,b) push() textSize(15) stroke(0, 0, 100-b) fill(0, 0, 100-b) text("Hue",0,-175) text("Saturation",0,-155) text("Brightness",0,-135) pop() for r in range(100, -10,-10): for theta in range(0,360,2): fill(theta,100*(r/100),100) size = 10 circle(r*cos(theta),r*sin(theta),size) push() fill(h,100*(s/100),100) stroke('grey') circle(s*cos(h),s*sin(h),50) pop() ```

### Description The `colorMode()` function is used to **set the range and mode for color** values in a sketch. It determines how colors are represented and displayed in the canvas. When the color mode is set to **RGB**, the **maximum values** for red, green, and blue are typically **255**, which represents the maximum intensity of each color channel. When the color mode is set to **HSB**, the maximum values for hue, saturation, and brightness are typically **360, 100, and 100** respectively. By default, the color mode is set to RGB with a maximum value of 255 for each color channel. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # fill() Changes color of shape interiors ### Example

```python fill('purple') circle(width/2,height/2,200) ``` ### Syntax ```python fill('NAME') ``` or ```python fill(a,b,c) ``` or ```python fill(VALUE) ``` | Input | Description | | ----- | ------------------------------------------------------------------------------------------------ | | NAME | the name of any HTML color, for example: **blue**, **green**, **lightgrey**, **skyblue**, etc... | | a,b,c | RGB or HSB values - see Description below | | VALUE | a number from 0 - 255, greyscale with 0 being black and 255 being white | ### Description Changes the color of the **interior** of all following shapes, until another fill() is called. Shapes have borders and interiors - [stroke()](/p5-python-web/reference/colour-and-outline/stroke) changes the border, while fill() changes the interior. Input can either be the name of an HTML color, a value **0 - 255** for greyscale values with **0 being black** and **255 being white**. Input can also be three numbers for the RGB or HSB color scale - see [colorMode()](/p5-python-web/reference/colour-and-outline/colormode). {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # stroke() Changes color of lines or shape borders ### Example

```python stroke('purple') circle(width/2,height/2,200) line(50,50,350,50) ``` ### Syntax ```python stroke('NAME') ``` or ```python stroke(a,b,c) ``` or ```python stroke(VALUE) ``` | Input | Description | | ----- | ------------------------------------------------------------------------------------------------ | | NAME | the name of any HTML color, for example: **blue**, **green**, **lightgrey**, **skyblue**, etc... | | a,b,c | RGB or HSB values - see Description below | | VALUE | a number from 0 - 255, greyscale with 0 being black and 255 being white | ### Description Changes the color of the **border** of all following **shapes** or **lines**, until another stroke() is called. Shapes have borders and interiors - stroke() changes the border, while [fill()](/p5-python-web/reference/colour-and-outline/fill) changes the interior. Input can either be the name of an HTML color, a value **0 - 255** for greyscale values with **0 being black** and **255 being white**. Input can also be three numbers for the RGB or HSB color scale - see [colorMode()](/p5-python-web/reference/colour-and-outline/colormode). {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # strokeWeight() Changes thickness of lines ### Example

```python strokeWeight(5) circle(width/2,height/2,200) line(50,50,350,50) ```

```python strokeWeight(25) circle(width/2,height/2,200) line(50,50,350,50) ``` ### Syntax ``` strokeWeight(w) ``` | Input | Description | Default | | ----- | ------------------------------------- | ------- | | w | The thickness of any lines or borders | 1 | {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # background() Sets the background color of the canvas ### Example

```python background('hotpink') ``` ### Syntax ```python background('NAME') ``` or ```python background(a,b,c) ``` or ```python background(VALUE) ``` or ``` background(IMAGE) ``` | Input | Description | | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | NAME | the name of any HTML color, for example: **blue**, **green**, **lightgrey**, **skyblue**, etc... | | a,b,c | RGB or HSB values - see Description below | | VALUE | a number from 0 - 255, greyscale with 0 being black and 255 being white | | IMAGE | variable name of a loaded image (see [loadImage()](/p5-python-web/reference/images-and-audio/loadimage-and-image)) to be used as an entire background across the canvas | ### Description Changes the color of the **background** of the entire canvas. Input can either be the name of an HTML color, a value **0 - 255** for greyscale values with **0 being black** and **255 being white**. Input can also be three numbers for the RGB or HSB color scale - see [colorMode()](/p5-python-web/reference/colour-and-outline/colormode). Finally, input can be the name of a loaded **image**, which will be stretched to cover the entire canvs. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # Images & Audio These functions allow external images or audio to be used in p5 sketches {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # loadImage() and image() Loads an image into the code's assets ### Example

```python def setup(): ... loadImage("http://donkeyImage.png",'donkey') def draw(): ... image(assets['donkey'],50,50,300,300) ``` ### Syntax ```python def setup(): ... loadImage("sourceURL",'NAME') def draw(): ... image(assets['NAME'],x,y,w,h) ``` | Input | Description | | --------- | -------------------------------------------- | | sourceURL | web or local URL of **image** to be loaded | | NAME | name for **variable** of image in code | | x | x co-ordinate of bottom left corner of image | | y | y co-ordinate of bottom left corner of image | | w | width of image | | h | height of image | ### Description Loads an image into memory from an external source so that it can be used in code. The **sourceURL** can be a web address (for example **""**) - this is the usual situation - or the local address if the file is stored with the rest of your code. Once an image is loaded, **image(assets\['NAME'], x, y, w, h)** can be called to draw the image at position **(x, y)** with width **w** and height **h** {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # loadSound() Loads a sound into the code's assets ### Example click the link below to play the sound. {% file src="/files/KS6VwKSQKHZL6oEEM9kO" %} Sound Effect by [UNIVERSFIELD](https://pixabay.com/users/universfield-28281460/?utm_source=link-attribution\&utm_medium=referral\&utm_campaign=music\&utm_content=121578) from [Pixabay](https://pixabay.com/sound-effects//?utm_source=link-attribution\&utm_medium=referral\&utm_campaign=music\&utm_content=121578) {% endfile %} ```python def setup(): ... loadSound("/wow-121578.mp3",'WOW') def draw(): ... assets['WOW'].play() ``` ### Syntax ```python def setup(): ... loadSound("sourceURL",'NAME') def draw(): ... assets['NAME'].play() ... assets['NAME'].stop() ``` | Input | Description | | --------- | ------------------------------------------ | | sourceURL | web or local URL of **sound** to be loaded | | NAME | name for **variable** of sound in code | ### Description Loads a sound into memory from an external source so that it can be used in code. The **sourceURL** can be a web address (for example **""**) - this is the usual situation - or the local address if the file is stored with the rest of your code. Once a sound is loaded (in the example below, using the variable **'NAME'** in code), the following functions are available to call on the sound file: | Function | Description | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | assets\['NAME'].play() | starts playing the sound | | assets\['NAME'].stop() | stops playing the sound and resets it | | assets\['NAME'].pause() | stops playing the sound and pauses it | | assets\['NAME'].isPlaying() | returns `True` or `False` depending on whether the sound is currently already playing | | assets\['NAME'].volume(**V**) |

adjusts the volume of the sound. V is a decimal value between 0 and 1.

0 is no volume, 1 is maximum volume

| {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # 3D Controls These controls allow for moving or navigating a 3D canvas (WEBGL enabled) {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # orbitControl() Allows the mouse to control the 3D camera ### Example

### Syntax ``` orbitControl([sensitivityX], [sensitivityY], [sensitivityZ]) ```

Parameter	Description
sensitivityX	sensitivity to mouse movement along the x-axis
sensitivityY	sensitivity to mouse movement along the y-axis
sensitivityZ	sensitivity to mouse movement along the z-axis

### Description Allows movement around a 3D sketch **using a mouse or trackpad**. * **Left-clicking** and dragging will **rotate** the camera position **about the center of the canvas** (not necessarily `0, 0, 0`, as you might have moved your camera before) * **Right-clicking** and dragging will **shift** the camera position without rotation * **Rolling the mouse wheel or the trackpad** (scrolling) will move the camera **closer or further from the center of the canvas.** This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling `orbitControl(1,1)`. **To reverse direction of movement** in either axis, enter a negative number for sensitivity. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # translate() Translates the 3D coordinate system ### Example

### Syntax ``` translate(x, y, [z]) ```

Parameter	Description
x	right-left translation
y	up-down translation
z	forward-backward translation (only in WEBGL mode)

### Full Example

Example Full Code

```python def setup(): createCanvas(300,300, WEBGL) def draw(): background(255, 79, 132) fill(112, 88, 255) stroke(176, 235, 51) strokeWeight(2) torus(100, 25) translate(100*cos(frameCount), 0, 100*sin(frameCount)) cone(50, 50) ```

### Description It shifts the origin on the coordinate system. Calling `translate(50, 0, 0)` makes the point `(50, 0, 0)` the new origin. To illustrate: * if one draws the point `(10, 0, 0)` **before** the translation, it appears 10 pixels to the right of the **original** center. * if one draws the point `(10, 0, 0)` **after** the translation, it appears 10 pixels to the right of the **new** center, which is 60 pixels from the original center. Like other transformations in the library ([rotateX()](/p5-python-web/reference/3d-controls/rotatex), [rotateY()](/p5-python-web/reference/3d-controls/rotatey), [rotateZ()](/p5-python-web/reference/3d-controls/rotatez)), this **effect is cumulative**. That is, calling `translate(10, 0, 0)` then `translate(20, 0, 0)` is the same as `translate(30, 0, 0)` {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %} # rotateZ() Rotates in 3D around the z-axis ### Example

### Syntax ``` rotateZ(angle) ```

Input	Description
angle	angle of rotation

### Full Example

Example Full Code

### Description Rotates a shape around z-axis by the amount specified in angle parameter. The angles can be entered in either `RADIANS` or `DEGREES`, depending on the specified angleMode(). **Positive** angles rotates the space from **+x to +y** regardless of handedness. This is the actually the application of the function [rotate()](/p5-python-web/reference/built-in-functions/rotate) in 3D.

Why is this the direction of rotation?

The reason is hidden in the mathematical convention of setting up axes such that: * if one **extends his fingers** of your **Right Hand** in the +x direction * then **curls his fingers** into +y direction * his **thumb points** into the +z direction This is called the **Right Hand Convention** (as if you did it with your left hand, it would fail! it would give the opposite direction). We can write this convention as **+x => +y => +z**. Extending the sequence with the same order **+x => +y => +z => +x => +y** gives us the convention for rotations about the x-axis and the y-axis as well: * about x-axis: **+y => +z => +x** * about y-axis: **+z => +x => +y**

### Syntax ``` rotateX(angle) ```

Input	Description
angle	angle of rotation

### Full Example

Example Full Code

### Description Rotates a shape around x-axis by the amount specified in angle parameter. The angles can be entered in either `RADIANS` or `DEGREES`, depending on the specified angleMode(). **Positive** angles rotates the space from **+z to +y** regardless of handedness.

Why is this the direction of rotation?

### Syntax ``` rotateY(angle) ```

Input	Description
angle	angle of rotation

### Full Example

Example Full Code

### Description Rotates a shape around y-axis by the amount specified in angle parameter. The angles can be entered in either `RADIANS` or `DEGREES`, depending on the specified angleMode(). **Positive** angles rotates the space from **+z to +x** regardless of handedness.

Why is this the direction of rotation?

### Syntax ``` scale(x, y, z) ```

Input	Description
x	scaling factor of edges and faces in the x-direction
y	scaling factor of edges and faces in the y-direction
z	scaling factor of edges and faces in the z-direction

### Full Example

Example Full Code

```python def setup(): createCanvas(300,300, WEBGL) def draw(): background(255, 79, 132) fill(112, 88, 255) stroke(176, 235, 51) strokeWeight(2) orbitControl() # draw3DAxes(100, (100, 50, 20)) rotateX(frameCount/2) rotateZ(frameCount) sX = 1+0.75*cos(frameCount) sY = 1+0.25*sin(frameCount) sZ = 1+0.5*sin(frameCount) scale(sX, sY, sZ) torus(75, 15) # rotateY(-2*frameCount) cone(30, 30) ```

### Description Increases or decreases the size of a shape by **expanding or contracting its edges and faces in a specific direction**. Objects always scale **from their relative origin** to the coordinate system. Scale values are specified as decimal percentages. For example, the function call `scale(2.0, 1, 1)` increases the x dimension of a shape by 200%. If a **negative** number was specified, the shape will **flip, then scale.** For example, `scale(-2.0, 1, 1)` first flips the shape, then increases the dimensions by 200%. {% hint style="info" %} Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)**!** We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link). {% endhint %}