p5js week 01

“Hello world” is the first program that programmers make. Let's do a drawing with text to get started.

A function 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. The program you just looked at above has 10 functions in it:

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

1. using the console
2. using variables
3. calling and making functions
4. strings
5. length
6. order of execution

Open the console in your web browser. It's in the menu under “more tools” and then inside “developer tools”. Select the console tab.

Type the following command in the console:

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.

console.log is a function. A function is a word that does something for us. “hello world!” is a piece of data called a string. We give this data to the console.log function by putting it inside the parentheses. In this case, the data inside the parentheses is called an argument.

Now I want you try to change the argument. Try some different text (in programming, we call text “strings”) like:

• your name
• a sentence
• a whole paragraph of text!

Next, try changing the argument to a different kind of data which is not a string. A string is made by using a pair of quotation marks. This time, try using some math:

  * 2 + 2
  * 12 * 87
  * (134/78783) + 238.000398

If you could do these things today, then you're already programming! Congratulations!

We can type 2 + 2, hit enter, and get 4. Let's store that value in a variable. We can do it like this:

a = 2 + 2

Now we can add something to the stored value like this:

a + 4

When you hit “enter”, what is the result? Why?

Think about the = operator like a tool that puts what is on the right side into a box on the left side. The box has a name. In the case above, the box is called a.

Now let's assign the value of another calculation to the variable b, like this:

b = 100 - 30

We can check the current value stored in a or b by typing that letter and pressing enter. Try that for a and b now.

Next, try the following calculation and press enter. What answer do you expect? What answer did you get? Why?

a + b

What will happen if you type this?

b - a

What about this?

b * a

Or this?

b/a

Or this?

a/b

You can use any letter or almost any word as a variable name. Try some of your own!

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

1. using the wiki
2. screenshots