1.2 Line Functions and Parameters

p5.js web editor overview

The p5 alpha editor is a web based code editor that has the p5 library already added to the development environment. It is an integrated development environment or IDE. And IDE is a piece of software that allows a developer to write code and execute the code within one interface, and may have other features like debugging.

The code editor will by default open to the file sketch.js, which is where the main p5 program is written. This is the text editor window.

When creating a new sketch, it will populate the file with some basic starter code. This window can be used like a typical text editor.

To the right of the text editor is the Preview window. This is actually a window with the website being created in the editor embedded inside of it. When the sketch is executed the result will appear in the preview window.

Below the editor is the Console window. The console is an interface that prints information such as errors, warning and developer logs for the developer to view as they are working on a project.

Directly above the text editor are some essential interactive interfaces.

The big play button with run the sketch. The stop button will stop running the sketch. The auto-refresh option will execute the sketch as the code is updated (I don't recommend this setting in its current version). The title of the sketch has a pencil icon next to it which can be clicked to change the sketch name.

The sketch can also be run by hitting Command + Enter on the Mac keyboard and stopped with Command + Shift + Enter. On Windows the key commands are the same except Control replaces Command.

The toolbar is at the top of the window. The first menu, File, allows the user to save the current sketch, open a previously saved sketch, open an example from the p5 set of example, duplicate a saved sketch, share a sketch or download the files from a sketch. Some of these functions will be covered in greater depth in future lessons.

Command + S on the Mac can also be used to save a sketch.

The Edit section can be used to Tidy Code, or update the code formatting. Tidy Code is a very useful feature for new students who haven't mastered code formatting, adding indentations and curly brackets and other mistakes. Tidy Code also has a key command, Shift + Tab. Encourage students to use this function frequently.

The Sketch menu has options to run the sketch, stop the sketch and start and stop Accessibility enabled versions of the sketch.

Finally the Help & Feedback menu includes a complete list of the keyboard shortcuts and, a link to the p5 reference, which students should use as often as possible.

There is also a link to give feedback to the creators of the alpha editor, either through a GitHub issue or a Google Form. This is a great way to tell the developers about issues encountered while using the alpha editor which may be incorporated to future updates.

Finally, in the upper right corner, there is a link to the user account setting, including a list of the user sketches.

As well as a settings button that opens a menu for visual settings, such as the color theme and font size of the editor.

createCanvas() and background()

Code is just a set of instructions for the computer. In order to give instructions to p5, we'll need to use different functions and change their parameters to fit our desired output.

Functions are lines of code that perform specific tasks. Two functions are automatically added to your sketch when you open the editor.

While setup and draw are defined by the developer in each sketch, most of the p5 functions we'll use are defined by the p5 library, and invoked in our code.

When a function is invoked, or called, the programmer is asking the program to run the code within the function. The parenthesis operator is used to invoke the function.

Ex. rect(50, 50, 100, 100);

The values inside of the parentheses are known as arguments or parameters. These are used to change the outcome of a function.

createCanvas() function

• This function creates a p5.js canvas.
• The canvas is an element on the web page on which we will draw our graphics.
• Syntax: createCanvas(width, height)



background() function

• This function gives our canvas a background grayscale color between 0 (black) and 255 (white)
• Syntax: background(value)



What happens when if you were to add multiple background functions with different values? Which of background color is prioritized? Why?

Line and point function | Student Code Along

To draw on the canvas, call p5.js functions like point() and line().

• A point is defined by an (x, y) coordinate.
• A line is defined by its start and end points.

In the graphs we are used to, the y-coordinate grows upward; in p5's canvas, it grows as we move down the screen.

• point(x,y)- The function name to draw a point is "point". The parameters are (x,y) which are the x and y coordinates.
• line(x1,y1,x2,y2)- The function name to draw a line is "line." The first x and y are the starting point and and the second are the end point.

Comments

As you can see, the lines with a '//' before them are grayed out. These are comments. You can use them as notes to yourself: they are ignored by the interpreter that runs the program, so they will not affect how it works.

If your program does not behave as you expect, it is useful to turn off lines of code one by one by 'commenting them out' (adding '//' to them). This will help you determine which one is causing the problem.

• Programmers add comments to their code as notes to themselves or others who might be reading it.
• Commenting code is excellent practice and should be constantly encouraged.

Practice

1. Draw a point near the top-right corner of the canvas.
2. Draw a point in the middle of the canvas.
3. Draw a point near the bottom-left.
4. Draw a horizontal line, a vertical line, a diagonal line.
5. Draw a line from the top-left corner to the bottom-right corner.

Extensions

• Use multiple line functions to create a rectangle and a triangle so the lines create a house (pentagon).
• Add comments for each line position.