Tutorial 1
Learning Objectives:
- Get familiar with p5js and Thimble
- Understand the coordinate system in p5js
- How function setup and draw operate
- Discover what parameter values do in the following functions:
- createCanvas, background, ellipse, text, fill, stroke
- Writing computer code
- Linking different .js files and creating additional ones.
- Exercises
Try some sample code
Part 1 - p5js and Thimble
The programming language we are using is called p5js. The 'p' stands for processing and 'js' stands for javascript. Processing is language created mainly for it's visual and artistic appeal. Javascript is one of the three big languages in the internet along with HTML and CSS. p5js was the programming language of choice because it provides visual results making it easier to learn.
Thimble is a platform for storing web based coding projects online including HTML, CSS, Javascript. I would best describe it as a google drive for programmers. The main appeal is that as you change the code, you will also see the results of how that code has changed. This makes the experimentation live.
Part 2 - Coordinate system
A canvas is created in p5js and all objects are drawn onto the canvas. Any objects not on the canvas exist but may be invisible or partially visible. The coordinate system in p5js was adaptation from Cartesian Coordinate grid system.
The p5js canvas is created with the origin always in the top left of the screen. The first value is the x coordinate while the second value is the y coordinate just like a cartesian coordinate. X values increase towards the right of the canvas. Y values increase going down from the top of the canvas unlike the cartesian grid system.
Part 3 - Functions: setup and draw
What is a function?
A function is a concept in Computer Science that is designed to help organize computer code. The idea of a function was borrowed likely from mathematics where a function can take in data (input), process that data and give a result (return value).
A function may consist of either a definition or a function call (using the function). Function draw and setup are both function definitions meaning we write the computer code of how they operate. Later on we will be using function calls or access pre-written computer functions in order to write our code. In the example below shows function setup as a definition which is immediately followed by a set of {}. Below that is createCanvas which is a function call, note that a ; follows.
Additionally a function definition or call consists of two parts. One part is the name of the function while the parts inside the () are known as parameters. Each parameter is separated by a comma. A function may contain any number of parameters including no parameters. Function setup and draw only have the name and have zero parameters. See below for two examples.
How function setup and draw work?
Function setup and draw are special functions where the majority of our code is written. The computer instructions we write in function setup is executed only once when the browser is loaded (or refreshed). Following the execution of all instructions in function setup the computer continues with all instructions in function draw. The instructions in function draw are executed endlessly at a rate of 60 times per second.
Part 4 - Other Functions
This part will explain what each parameter does in the following functions: createCanvas, background, ellipse, text, fill, stroke
createCanvas(length,height) - The createCavas function defines the size of the canvas in p5js and is a pivotal instruction in creating any visual output. createCanvas has two parameters. Length refers to the horizontal length of the canvas created. Height refers to the height of the canvas created. The canvas is created from the origin which is always in the top left of the screen.
background(red,green,blue) - The background function will paint the canvas with a color defined by the parameters. The background function will erase or overwrite anything drawn previous to it's instruction and as such is generally used at the beginning of a program. The background function has three parameters. Red, green and blue must be values between 0 - 255 following any typical RGB table. The computer will treat any values greater 255 or less than 0 to be at their respective min and max values.
ellipse(x,y,length,height) - The ellipse function will draw an ellipse on the canvas area as defined by it's parameter values. The first two parameter values define the location of the ellipse on the canvas. The x,y values are located at the center of the ellipse. Length and height values as the name suggests controls the horizontal and vertical size of the ellipse.
text(text,x,y) - Shows any text String (more on this later) or anything inside a double quotation "" on the screen. The x,y values define the location and the reference point is the top left corner of where the text begins.
fill(red,green,blue) - Modifies the inner color of all shapes or text following the fill code. Red, green and blue follow any typical RGB table with values between 0 - 255. See function background for more details.
stroke(red,green,blue) - Modifies the outer color of all shapes or text following the fill code. Red, green and blue follow any typical RGB table with values between 0 - 255. See function background for more details.
Part 5 - Writing Computer Code
As a reminder all computer code we write are either in function setup or function draw. Any code written in function setup will only be executed once. You will soon discover what code goes where. Any code written in function draw is live as the code is re-executed by the computer continuously. We will look at some code for how to interact with the computer later.
Computer instructions follow a linear nature. All instructions performed at the beginning will be performed first and later instructions performed later. One must be careful of which instructions they place where as it could have a drastic effect on the overall outcome!
Part 6 - Creating additional .js files
In the Exercises following, you will complete multiple practices. It is easier to complete all files on a single thimble project rather than creating different thimble projects for each. Please try to name your files according to the exercises as I will direct you in this first tutorial.
To create an additional .js file follow the instructions below
Step 1
Click on the "+" icon then scroll down and click "Javascript"
Step 2
Delete all code in the newly created "script-1.js" file and copy and paste the code from the original "Tutorial1-1.js" file over.
Step 3
Rename your "script-1.js" file to a more appropriate name. In the tutorial to follow I would recommend "Tutorial1-2.js" as "Tutorial1-1.js" has already been created.
Step 4
Change the linking file name in "index.html". Where is says "Tutorial1-1.js" you will need to change it to "Tutorial1-2.js". Note that you can modify the "index.html" pointing file at anytime to see the other javascript file.
Part 7 - Exercises
Exercise 1 - Remix the thimble code located at the top of this document. Rename the remixed file as "Tutorial 1.1". Your task is to experiment with the code a little bit. For starters try moving the ellipse around the screen, you will need to manipulate the x,y parameters to do this. As a goal see if you can move it into the four corners of the canvas.
Exercise 2 - Publish Tutorial 1.1 and remix your own file. Rename the remixed file as "Tutorial 1.2". See if you can recreate the image below
