about

The p5.js starter kit is a collection of functions meant to inspire or kickstart your next p5.js project.

quick start

To start, open the p5.js web editor alongside this website.
Here's the link
That site is what you'll write and run your code in.
From the home page of this site, explore the dropdown menu.
When you pick an option for each of the three dropdowns,
it will find code from the kit and what you need to write to use it.

On this site, the text under the "write this:" headline that will appear is what you need to type into the p5.js web editor, or whichever code editor you're using. If you're using the web editor, write the code just above the closing bracket in the
function draw(){
}
section.

To further customize what happens, read more below.

p5.js

p5.js is a library for the JavaScript coding language. It’s essentially a collection of small packets of pre-written JavaScript code that we can use for our own projects. p5.js is almost exactly like Processing, but it runs in the browser instead of a pop-up window on your computer. This starter kit is like a library for p5.js ~ it’s small packets of pre-written p5.js code that can be used for our p5.js projects.

functions

This kit runs on functions, which are the ways to access this pre-written code.

There’s two main parts of a function, the function and the function call. The function is the block of code to be run, and the call is the way to run it.

It’s sort of like a bookmark, or a tab that you might put in a book to save your place. The call is the tab, and the function itself is the spot you want to read.

Here’s what a function call looks like,

lineDrawStart();

and this is what the function itself looks like:

function lineDrawStart(){
line(50,50,200,200);
}

All of the functions in this kit live in the p5PackLib.js file.

~~~

You might be familiar with this line of code if you’ve used Processing before:

circle(500,400,200);

This circle will be drawn 500 pixels to the right, 400 pixels down, and will be 200 pixels large. The functions in this kit are almost exactly the same, but they don’t need anything in between the () parentheses to work. They’ve all been set with defaults, so all we have to do is write the name of the function and then add parentheses and a semicolon.

lineDrawStart();

However, if you’d like to have a bit more control over how the function draws, you can override these defaults by adding in your own numbers in between the parenthesis. Use the function finder to see what defaults you can override. You can override the x position, y position, and size of almost all of them, but some allow for additional customization as well.