p5js week 01

By the end of today, you all should try to program a picture of a wolf, a flower, or a robot. Let's get started learning how to code in p5js.

“Hello world” is the first program that programmers learn. Let's look at that as a p5js drawing with text to get started. In the editor below, press the play button and then take a look at the code.

Let's put Taiwan on that map. We want to make it look like this:

Copy line 13 and paste it on line 14. Now adjust the numbers so that it looks like Taiwan off the coast of Asia.

The first two numbers are the x and y positions (be careful, increasing y makes something move DOWN the page, not up), just like in geometry in math class. The second two numbers are the width and height of the shape.

Now that you've done that, let's learn more about how it all works.

You can use the “share” function in the File menu of the p5js editor to share the code you are working on with a teacher.

Another good way to share you code is to put it on Pastebin and share the link with a teacher: https://pastebin.com/

A function (https://en.wikipedia.org/wiki/Function_(computer_programming) ) is a tool which accepts some input, does something, and then produces some output (usually). You can think about it like a machine: you put something or things into it, it does something with those things, and then it puts out a new thing. That makes it kind of like a toaster: you put in uncooked bread, and after some time the toaster puts out toast.

(picture credit: https://www.flickr.com/photos/dok1/20326842171 )

The program you just looked at above has nine function in it:

1. setup
2. draw
3. createCanvas
4. background
5. fill
6. circle
7. ellipse
8. textSize
9. text

When you are programming, you use special symbols to tell the computer what you mean. The special symbols, like parentheses and curly braces, have to be in the right places; otherwise, the computer can't understand what you mean. The basic pattern for making a function is this:

function () {}
// <- these slashes mean a comment; it's not code...
// () <- these are parentheses
// {} <- these are curly braces

By the way, these gray boxes contain code that you can try, code that you should fix first and then try.

When you declare a function (that means to make a function), you have to start with the 'function' keyword. A keyword (https://en.wikipedia.org/wiki/Reserved_word) is a word that has a special meaning that was decided by the people who made JavaScript. Javascript keywords are these:

https://www.programiz.com/javascript/keywords-identifiers

The parentheses contain the arguments (arguments are inputs; this is explained more below), and the curly braces contain what the function does. This is like making a toaster!

(picture credit: https://commons.wikimedia.org/wiki/File:Toaster_Filaments.JPG)

When you call a function (that means to use a function), you just write the function name and parentheses, and you write the arguments inside the parentheses. Think about “calling” like calling the function's name, just like you call your friend's name to get them to come to help you. Calling a function is like putting the bread in the toaster and pushing down the button or lever.

(picture credit: https://www.wikihow.life/images/thumb/7/77/Make-Toast-Step-7-Version-2.jpg/aid27600-v4-728px-Make-Toast-Step-7-Version-2.jpg.webp ; available under Creative Commons license http://creativecommons.org/licenses/by-nc-sa/3.0/ )

We'll talk about arguments in just a moment.

The program you looked at above declares two functions:

1. setup
2. draw

It calls the other functions:

1. background
2. fill
3. textSize
4. text
5. circle
6. ellipse

Arguments (https://en.wikipedia.org/wiki/Parameter_(computer_programming) ) are the things that you put into function. It's like the uncooked bread in our toaster analogy.

(picture credit: https://pixabay.com/photos/toast-white-bread-slices-of-toast-74375/)

You have to put them into the parentheses.

When you declare a function, you give them names. Those names are called variables. That's because the value is variable, or can change.

In the function which are declared above, notice that there are no arguments.

When we call a function, we add the things we want to use in the function (that's like the bread for the toaster) into the parentheses. If there is more than one arguments, you should put a comma between them. Notice that:

1. the createCanvas function is called with two arguments: 800 and 800;
2. the background function is called with one argument: 0;
3. the fill function is called with one argument: 'white';
4. and so on…

When you are doing these things, all of the details are important. If one symbol is the wrong one or used in the wrong place, the computer will not understand and it will give you an error (https://www.bbc.co.uk/bitesize/guides/zbssv9q/revision/2). Remember, the computer is NOT SMART! It's just logical and fast. It cannot guess what you want to do, so you have to tell it exactly what you want. Always keep this in mind.

In this section, let's talk about these things so that we can declare our own function:

1. using the console
2. using variables
3. calling and declaring functions
4. the return keyword
5. strings
6. length
7. order of execution

We can use JavaScript in several places. One is the p5js editor which we saw earlier. You also have a JavaScript programming environment in your browser without even going to a website. Let's try it out.

On many computers, you can press the F12 key at the top right corner of your keyboard to bring out the JavaScript console (https://en.wikipedia.org/wiki/Console_application). On some computers, you might need to press the Fn button on the bottom left corner of the keyboard at the same time. If you can't make the keys work or want another way, you can go to the menu and look for tools or developer tools and choose the browser console from that menu. Then you'll see a panel open in your browser, probably on the right side of the screen. Make sure that you have the console section open.

In a way, you can think about JavaScript like a very powerful and fast calculator.

Try it! In the console, type 2 + 2 and hit the enter key. You should see that a four appears below where you typed it.

Now let's use a function to program the famous “hello world” program. Type the following command in the console. It's a function called console.log with one argument, “hello world”:

console.log("hello world!")

When you type it, be sure to get every character correct. In this case, if the period, parentheses, or quotation marks are wrong, it won't work. It should print “hello world” in the console.

A variable (https://en.wikipedia.org/wiki/Variable_(computer_science)) is a word that we choose to represent some data. It's like giving something a name. You can also think about it like make a box and then storing something inside of it. Continuing our toast analogy, it's like the bread box.

(picture credit: https://en.wikipedia.org/wiki/Breadbox#/media/File:Breadbox.jpg )

You can choose almost any name that you want (scroll down to “reserved key words” on this page if you want to see the ones that you cannot use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar).

Let's declare (or make) a variable and test it. There are a few ways, but we'll start with this one: the 'let' keyword. Type this in the console and press enter.

let myNumber = 2 + 2 

Now type myNumber to check the value that has been stored:

myNumber

'let' tells the computer to make a variable with the name that we give it. After we use 'let' to declare a variable, we can't use 'let' with the same variable name. This is to protect us. If we want to change the value, we just use the name and the equal sign again, like this:

myNumber = 20000
myNumber

Now you can see that myNumber has a new value.

This means that we ask the computer to calculate 2 + 2 for us, then we store the result in a box called myNumber. Now that we've stored it, we can use it. Try typing this in the console and then press enter:

myNumber + 100

Notice that 104 doesn't come out in the console; what comes out is 20100. That's because we changed the value (https://en.wikipedia.org/wiki/Value_(computer_science) ) of myNumber.

We could store this one, too, like this:

let myNumber2 = myNumber + 100

Now type myNumber2 and see what happens.

Now we can use the variable we made along with the console.log function. Try this:

console.log(myNumber2)

Let's declare a function now. Remember, this is like building a toaster:

(picture credit: https://www.flickr.com/photos/rbainfo/15549986906 )

We know that we have to start with this:

function () {}

Between the function keyword and the parentheses for our arguments, we need to add a function name. Let's call our function myMath:

function myMath () {}

We can already call this function. When you call a function, you have to add the parentheses after the function name. We can call our function like this:

myMath()

It doesn't do anything yet, so let's make it do something. Let's put one number into the function, do some math, and then get something out.

function myMath (someNumber) {someNumber + 100}

Our input, the arguments, is called someNumber. We could choose any name we want. It's good to choose a name that will help you remember what you should put in. It should be a name that will teach other people about what your function does. We could have called it aNumber or input or inputNumber. We even could have called it strawberry or xAjsjRl, but those wouldn't have been good names because they don't explain what kind of argument should go in. It's the same for the function name.

Inside the curly braces, we say what we want our function to do. Here, we tell it to get the input, which is called someNumber, and add 100 to it. Let's call it and see what happens: argument

myMath (10)

Wait a minute. Nothing happened! It just told us “undefined”. That's not what we want. Why?

To make a function give you an output, you need to use the return keyword. You put a value after return to make the program output something. Continuing our toast analogy, return is what actually gives us the toast in the end.

(picture credit: https://pixabay.com/p-1077984/?no_redirect)

Let's fix our function:

function myMath (someNumber) {return someNumber + 100}

We put return in front of what we want our function to output. Now let's call it again:

myMath (10)

Great! We got the output we wanted.

(picture credit: https://commons.wikimedia.org/wiki/File:Toast-2.jpg)

Notice that console.log returns undefined. “undefined” means it doesn't have any meaning except that nobody has told the computer what it means.

We can use JavaScript like a powerful customizable calculator, but you can do much more. Above, most of our functions used numbers as arguments. We can also use text data. One piece of text data is called a string (https://en.wikipedia.org/wiki/String_(computer_science) ).

To make a string, you need to use quotation marks. You can use single quotation marks, like this:

'hello'

You can also use double quotation marks like this:

"hello"

There's a third choice, too: backtick quotes.

`hello`

Let's make a function that prints a message that can be customized according to the user, like a better 'hello world' program.

For the argument, let's get a user name. Let's print the message “Hello userName. How does it feel to be a programmer?” We'll just change userName to the user input.

To make longer strings, we can add them together. Try this in the console:

"hello" + " " + "programmer"

There are three strings: “hello”, a space, and “programmer”. We can use this to make our function.

function helloUser (userName) {console.log("Hello " + userName + ". How does it feel to be a programmer?")}

Now call it and see what happens. Change 'renick' below to your name.

helloUser ('renick')

You should see a message print in the console.

There's one more point to notice about this function: it doesn't return anything yet. You might think “I saw it print something; that's output, isn't it?”. Printing is different from returning a value that we can use later. Try and see by assigning the output of the function to a variable:

let helloMessage = helloUser ('renick')
helloMessage

Notice that the value of helloMessage is undefined. Let's fix it this way:

function helloUser (userName) {
    let outputMessage = "Hello " + userName + ". How does it feel to be a programmer?";
    console.log(outputMessage);
    return outputMessage
}

There are a few things happening here. First, we build our string and assign it to the outputMessage variable. Then we print the output message. Finally, we return the output message so that we can do something with it later. Try it out!

let helloMessage = helloUser ('renick')
helloMessage

It works!

The order of the operations in the function is important. In general, you need to be think about which calculations happen when. That way you are sure to calculate what you need before you use it.

Thinking about our toast example, it's important to put the bread into the toaster before you push the button. You also want to wait for the toaster to raise the toast before you try to pull it out of the toaster.

In the function above, you need to calculate the string before you print it and return it. Notice the error you get if you put the return first.

// this function is broken
function helloUser (userName) {
    return outputMessage
    let outputMessage = "Hello " + userName + ". How does it feel to be a programmer?";
    console.log(outputMessage);
}

p5js is a library of functions for the JavaScript programming language that can be used to draw pictures in the browser. A library is a collection of functions that a programmer gathers to share with other people to help them write their programs.

Drawing through code is a little tricky at first because you're not used to this method or its tools. Stick with it, and you'll find ways to draw that would be impossible without using code.

Today, try to make a picture using p5js. The teacher will give you some ideas about what to draw. In order to draw that, study the following sections about how to use p5js.

1. using the p5js editor
2. setup function
3. draw function
4. reference
5. shapes (rect, ellipse)
6. coordinates
7. sizes
8. fill
9. color picker
10. stroke

p5js has an editor that allows us to program graphics inside of our browser without installing any extra software. That's convenient! The p5js editor is at this address:

https://editor.p5js.org/

In the top right corner, there is a link that will allow you to create an account. That will be useful so that you can save your work on their site.

There are some other useful features of this editor. One that will help a lot in the beginning is the tidy function in the edit menu. It will make your code easier to read. The file menu allows you to save your work.

Just above the text editor section is the name of the document you are working on. Notice that it has a pencil icon next to it. Click it and you can change the name from the automatic random name they give you to something that you can remember.

Later you can use open from the file menu to retrieve one of the files that you were working on in the past.

The file menu also has a share function that we'll use at the end of this tutorial.

You need to declare the setup function near the top of your p5js document. This is used to run any p5js function at the very beginning before you start drawing.

There's more about the setup function on the p5js reference here:

https://p5js.org/reference/#/p5/setup

You need to declare the draw function in order to actually draw something in the “Preview” pane on the right side of the window. When you want to draw shapes, finally you need to call those functions inside of the draw function.

There's more about the draw function on the p5js reference here:

https://p5js.org/reference/#/p5/draw

It's important to remember the order of execution here. The code which comes first will draw first. The code which comes later will then (possibly) draw on top of what you have already drawn. Sometimes when you can't see what you want to draw, it's because you are drawing something else on top of it.

In the code above, we used two shape functions: circle and ellipse. There are many others. You can find them and many other useful functions in the p5js reference here:

https://p5js.org/reference/

Scroll down and look at the Shapes 2D Primitives section. These are some good functions to start using. You probably want to get familiar with the rect function right away. rect is short for 'rectangle'. Try it out!

https://p5js.org/reference/#/p5/rect

Copy some of the code from the reference page, paste it into a new document in the p5js editor, and try changing the parameters (parameter is another word for arguments). When you paste it, be sure to paste it inside the draw function, like this:

The reference will tell you how many arguments you need to use, and what each arguments controls.

In p5js, we control the position of something by adjusting the x and y position. This is like graphing things in your math class, but there's an important difference. In math, usually the y value gets higher as you go up the page. In p5js, the y value gets bigger as you go down the page. The point (0,0) is in the top left corner of your screen. You'll need to look carefully, but many functions use x and y as the first two arguments.

Some functions like circle have only one arguments for size. Other functions like ellipse have two arguments for size: a width and a height. Size is measured in pixels. Try drawing some rects or ellipses at different sizes to get familiar with how big different sizes are.

Fill sets the color that the inside of a shape is filled with. After we call the fill function, everything will be filled with that color until we call the fill function again.

The details of the fill function can be found here:

https://p5js.org/reference/#/p5/fill

In the code above, we use color names as strings for the arguments. We can also use different color models, like RGB (red, green, and blue).

We're generally not familiar with RGB color values when we start programming. That means it's useful to have a tool that can show us the colors and give us the RGB color values. Conveniently, the p5js editor will do that for us now. If you use this inside the fill function, you'll notice that there is a small color square that you can click and then use to choose a new color. The numbers will change for you automatically.

'rgb(214,14,14)'

Before we had to use a separate color picker app. That still might be useful for you in some cases:

https://www.google.com/search?q=color+picker

The p5js reference can tell you how to control stroke, which is the line on the outside of shapes. The stroke-related functions work like the fill functions; every shape uses those settings until the stroke function are called again.

https://p5js.org/reference/#/p5/stroke

Since you have done these things today, you're already programming! Congratulations!

1. using the wiki
2. screenshots

A wiki is a website that several users can edit together. It is constantly changing and improving, but it also helps us to go back to a previous version if someone makes a mistake.

The wiki software we are using is called Dokuwiki. The basic instructions for editing pages are here:

https://www.dokuwiki.org/wiki:syntax

Sometimes we might want to put just a screenshot of our work on the internet, like our class wiki or on Instagram.

There are a lot of ways to take screenshots on Windows:

https://www.businessinsider.com/how-to-screenshot-on-windows

Here's how to take a screenshot on a Mac.

https://support.apple.com/en-us/HT201361