====== 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.
===== first task: add Taiwan! =====
Let's put Taiwan on that map. We want to make it look like this:
{{:hello-taiwan.png|}}
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.
===== When you have trouble... =====
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/
===== What's a function? =====
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.
{{:toaster-poster-20326842171_f18b831547_b.jpg?400|}}
(picture credit: https://www.flickr.com/photos/dok1/20326842171 )
The program you just looked at above has nine function in it:
- setup
- draw
- createCanvas
- background
- fill
- circle
- ellipse
- textSize
- 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 [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] (arguments are inputs; this is explained more below), and the __curly braces__ contain what the function does. This is like making a toaster!
{{:inside-toaster-800px-toaster_filaments.jpg?400|}}
(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.
{{:pushing-button-toaster-aid27600-v4-728px-make-toast-step-7-version-2.jpg?400|}}
(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 [[p5js-week-01#what_s_a_function|declares]] two functions:
- setup
- draw
It [[p5js-week-01#what_s_a_function|calls]] the other functions:
- background
- fill
- textSize
- text
- circle
- ellipse
===== What's an argument? What's a variable? =====
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.
{{:untoasted-toast-74375_960_720.jpg?400|}}
(picture credit: https://pixabay.com/photos/toast-white-bread-slices-of-toast-74375/)
You have to put them into the __parentheses__.
When you [[p5js-week-01#what_s_a_function|declare a function]], you give them names. Those names are called [[p5js-week-01#variables|variables]]. That's because the value is variable, or can change.
In the [[p5js-week-01#what_s_a_function|function]] which are declared above, notice that there are no [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]].
When we [[p5js-week-01#what_s_a_function|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 [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]], you should put a __comma__ between them. Notice that:
- the createCanvas function is called with two arguments: 800 and 800;
- the background function is called with one argument: 0;
- the fill function is called with one argument: 'white';
- and so on...
===== Why the details matter... =====
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.
===== JavaScript =====
In this section, let's talk about these things so that we can declare our own function:
- using the [[p5js-week-01#the_console|console]]
- using [[p5js-week-01#variables|variables]]
- calling and declaring functions
- the return keyword
- [[p5js-week-01#strings|strings]]
- length
- order of execution
==== the console ====
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 [[p5js-week-01#the_console|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 [[p5js-week-01#the_console|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.
==== variables ====
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.
{{:breadbox.jpg?400|}}
(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 [[p5js-week-01#what_s_a_function|declare]] (or make) a [[p5js-week-01#variables|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 [[p5js-week-01#variables|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 [[p5js-week-01#the_console|console]] and then press enter:
myNumber + 100
Notice that 104 doesn't come out in the [[p5js-week-01#the_console|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.
==== using functions and variables ====
Now we can use the [[p5js-week-01#variables|variable]] we made along with the __console.log__ function. Try this:
console.log(myNumber2)
==== calling and making functions ====
Let's [[p5js-week-01#what_s_a_function|declare a function]] now. Remember, this is like building a toaster:
{{:toaster-repair-15549986906_c836258f0a_4k.jpg?400|}}
(picture credit: https://www.flickr.com/photos/rbainfo/15549986906 )
We know that we have to start with this:
function () {}
Between the function [[p5js-week-01#what_s_a_function|keyword]] and the __parentheses__ for our [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]], we need to add a function name. Let's call our function myMath:
function myMath () {}
We can already [[p5js-week-01#what_s_a_function|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 [[p5js-week-01#what_s_an_argument_what_s_a_variable|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?
==== the return keyword ====
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.
{{:bread-1077984_960_720.jpg?400|}}
(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.
{{:toast-655px-toast-2.jpg?400|}}
(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.
==== strings ====
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!
==== order of execution ====
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 =====
{{:p5js.png|}}
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.
==== your job ====
**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.
- using the p5js editor
- setup function
- draw function
- reference
- shapes (rect, ellipse)
- coordinates
- sizes
- fill
- color picker
- stroke
==== using the p5js editor ====
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.
==== setup function ====
You need to [[p5js-week-01#what_s_a_function|declare]] the setup [[p5js-week-01#what_s_a_function|function]] near the top of your p5js document. This is used to run any p5js [[p5js-week-01#what_s_a_function|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
==== draw function ====
You need to [[p5js-week-01#what_s_a_function|declare]] the draw [[p5js-week-01#what_s_a_function|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 [[p5js-week-01#what_s_a_function|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 [[p5js-week-01#order_of_execution|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.
==== shape functions ====
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 [[p5js-week-01#what_s_an_argument_what_s_a_variable|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 [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] controls.
==== coordinates ====
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 [[p5js-week-01#what_s_a_function|functions]] use x and y as the first two [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]].
==== sizes ====
Some [[p5js-week-01#what_s_a_function|functions]] like circle have only one [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] for size. Other [[p5js-week-01#what_s_a_function|functions]] like ellipse have two [[p5js-week-01#what_s_an_argument_what_s_a_variable|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 ====
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 [[p5js-week-01#strings|strings]] for the [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]. We can also use different color models, like RGB (red, green, and blue).
==== color picker ====
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
==== stroke ====
The p5js reference can tell you how to control stroke, which is the line on the outside of shapes. The stroke-related [[p5js-week-01#what_s_a_function|functions]] work like the fill [[p5js-week-01#what_s_a_function|functions]]; every shape uses those settings until the stroke [[p5js-week-01#what_s_a_function|function]] are called again.
https://p5js.org/reference/#/p5/stroke
===== Congratulations! =====
Since you have done these things today, you're already programming! Congratulations!
===== sharing work =====
- using the __wiki__
- screenshots
==== wiki ====
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
==== screenshots ====
Sometimes we might want to put just a screenshot of our work on the internet, like our class wiki or on Instagram.
=== Windows ===
There are a lot of ways to take screenshots on Windows:
https://www.businessinsider.com/how-to-screenshot-on-windows
=== Macintosh ===
Here's how to take a screenshot on a Mac.
https://support.apple.com/en-us/HT201361