3/20/19
System, Environment
1. What is P5? How is it distinguished from Processing?
Processing is like a translator that turns processing code into JavaScript while P5 is javascript based and helps you turn javascript into animations.
2. What does IDE stand for? Describe its components.
Integrated Development Environment. It usually contains a code editor, debugger, and other tools.
3. How do you save a file in the P5 editor? What naming/saving convention might you use?
To save a file in P5 editor you first have to log in. Then in the left had corner there is a file button you can save it there. You can edit the name to something more appropriate like the assignment or the concept.
4. What is a library? How do you access and use a library with P5?
A library is precompiled code. You don’t have to access it. If you code it will run. You can go to the reference to see some of the precompiled code.
5. What do the triangle and circular shapes across the top of the P5 editor represent?
The triangle is the play button it starts the code. You can press the square button to stop running the code.
6. How do you add and name an additional or new tab in the P5 editor?
Next to where it says Sketch.js you can open press the leftward pointing arrow and add a file.
Coding Basics
7. Describe the coordinate system in P5.
It doesn’t show the negative planes. The top left corner is the origin. As you move rightward and down the x axis and y axis are increasing.
8. What is the general syntax and structure for a line of code? Use code to demonstrate your response.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
In P5JS most of the code will include the set up function and a draw function. The draw function isn’t necessary if you are doing something really simple it can just be put in the setup. (basic shapes, backgrounds, no movement). It can also include other custom functions.
9. What is the general syntax and structure for a block of code? Use code to demonstrate your response.
function setup() {
createCanvas(400, 400);
}
function draw() {
rect(100,100,100,100);
}
Most code will have some indentations to make it easier to read. Also all statements must end with a semi colon and all curvy brackets must have a open and end.
10. Why are certain words in different colors in the P5 editor?
Different color words in P5 can help users see that they are dealing with different types of data. Some of the built in functions will have different colors. Also things like variables and strings users input will have different colors to help you distinguish datatypes in the code.
11. What is a system or reserved word in P5? Give an example.
System reserved words are words that are already in the library. You cannot assign things to them because they are already reserved for different functions. You can not use the word ellipse because there is already in the library.
12. How does order matter in P5? Give an example demonstrated with code.
function setup() {
background(0);
}
function draw() {
background(0);
background(255);
}
In class we had an example with Corey’s code. His background didn’t change color and it only flashed. It was because the draw loop kept cycling and turning the background black again. In the example above the background will be white. Even though there is two statements to make it black and I initialized the background to be black it will still be white because the last one to run is background(255);
13. What is the difference between mouseIsPressed and mousePressed()? Use code to demonstrate your
response.
let value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function mousePressed() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}
The code above is mousePressed.
function draw() {
background(237, 34, 93);
fill(0);
if (mouseIsPressed) {
ellipse(50, 50, 50, 50);
} else {
rect(25, 25, 50, 50);
}
print(mouseIsPressed);
}
The code above is mouseIsPressed.
MouseisPressed is a if statement and mousePressed is a function. mousePressed is a function that will run once while MouseisPressed is a Boolean that will run whenever the condition is true.
14. What called function must always be first in setup()?
No answer
15. What is the difference between an inline comment and a block or multi-line comment? Use code to
demonstrate your response.
/* LOOK AT ALL THE LINES I CAN BLOCK OUT
WOw
wowo
wow
wow
wow
*/
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//fill(0);
rect(100,100,100,100);
}
An inline comment will only comment the line it is on and a block comment will comment out everything inside it. The code runs because I blocked out my comment and the rectangle is white because I blocked out the fill statement.
16. Does whitespace matter in P5? Capitalization? Use code to demonstrate your response.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//fill(0);
rect (100 ,100, 100,100);
}
The code above runs.
function setup() {
createCanvas(400, 400);
}
function draw() {
Background(220);
//fill(0);
RECT(100,100,100,100);
}
This code doesn’t run.
The White space between code doesn’t not matter but it will be easier if it isn’t too excessive. The capitalization matters. When using prebuilt functions. For variables you created no it doesn’t matter as long as it matches VERBATIM.
Variables, Operators, Logic
17. What is a variable? What is a data type? What is a value?
Let x = “dog”
A variable is something that is created to hold a value. Value is assigned to the variable to hold on to. In this case x is a variable, “dog” is the value, and its data type is a string.
18. What is the difference between a system variable and one that you define? Use code to demonstrate
your response.
let circ = {
x: 200,
y: 200,
s: 2,
g: 135,
b: 225,
r: 75,
c: 125,
}
function setup() {
createCanvas(400,400);
}
function draw() {
move();
shapes();
if ((circ.x > width) || (circ.x < 0)) {
circ.s = circ.s * -1;
}
}
function shapes() {
background(circ.c);
stroke(circ.s);
fill(circ.r, circ.g, circ.b);
stroke(circ.s);
ellipse(circ.x, circ.y, circ.r, circ.r);
ellipse(circ.x +50, circ.y-75, circ.r, circ.r);
fill(circ.r, circ.g, circ.b);
}
function move() {
circ.x = circ.x + circ.s;
}
In this code I use a function to make a shape and add that function to the draw function
function setup() {
createCanvas(400, 400);
}
function draw() {
rect(100,100,100,100);
}
In the draw I use a pre-existing code.
A system variable in this case would be rect(). Instead of drawing using the rect() or whatever shape I created a function to create the shapes.
19.
What is scope and how does it impact code? Use code to demonstrate your
response. let circle = {
x: 100,
y: 200,
d: 50
}
let tri = {
x1: 500,
y1: 500,
x2: 500,
y2: 400,
x3: 450,
y3: 500
}
let color = {
r: 34,
g: 123,
b: 218
}
let x = 200
let y = 300
let z = 400
function setup() {
createCanvas(500,
500);
}
function draw() {
background(color.r,
color.g, color.b);
triangle(tri.x1,
tri.y1, tri.x2, tri.y2, tri.x3, tri.y3);
ellipse(circle.x,
circle.y, circle.d, circle.d);
line(x,y,z,y);
line(x,z,z,z);
line(x,y,x,z);
line(z,y,z,z);
}
Here is code that has variables set at the top they are global and can be called upon anywhere later in the code.
let squares = [];
function setup() {
createCanvas(600,
400);
// For loop
to iterate through the loop and increment.
//
for (let i = 0; i < 200; i++) {
//
// Array of square objects.
//
squares[i] = {
//
// place x position randomly between 0 and width
//
x1: random(0, width),
//
// place y position randomly between 0 and width
//
y1: random(0, height),
//
w: 50,
//
h: 50,
//
// method to show stars.
//
display: function() {
//
// noStroke();
//
fill(random(255), random(255), random(255));
//
rect(this.x1, this.y1, this.w, this.h);
//
}
//
}
//
}
}
function draw() {
background(255);
for
(let i = 0; i < 200; i++) {
//
Array of square objects.
squares[i]
= {
//
place x position randomly between 0 and width
x1:
random(0, width),
//
place y position randomly between 0 and width
y1:
random(0, height),
w:
50,
h:
50,
//
method to show stars.
display:
function() {
//
noStroke();
fill(random(255),
random(255), random(255));
rect(this.x1,
this.y1, this.w, this.h);
}
}
}
//iterate
through the stars array
for
(let i = 0; i < squares.length; i++) {
//
background(255);
squares[i].display();
// display each star
}
}
Here is a code we went over in class as an example. The variables are not declared created and towards the end.
Scope is referring to variables and whether they are global, local or,
20. What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.
let x = 100
function setup() {
createCanvas(400, 400);
}
function draw() {
rect(x,x,x,x);
}
The let is declaring the variable. By assigning a value to it we are initializing it. And it is being used when it is used to define the x,y, height and width of rectangle.
21. What happens when a variable is attempted to be accessed outside of its scope?
You will get an error.
22. What happens when a variable is declared globally, but is not used?
The program will run but it isn’t good practice to create variables and not use them.
23. What value does var nums; have?
var nums = 100
function setup() {
createCanvas(400, 400);
}
function draw() {
rect(nums,nums,nums,nums);
}
Var nums now has a value of 100.
24. What are operators in P5? Use code to demonstrate your response using at least one operator.
var nums = 100
function setup() {
createCanvas(400, 400);
}
function draw() {
rect(nums,nums,nums,nums);
rect(nums+100,nums+100,nums,nums);
}
Because most objects are referenced by their position you can use operators in reference to the original. I can created a another rectangle that is 100 x and 100 y away.
25. What is a boolean data type?
A Boolean is something that can be answered with a true or false statement.
26. List three examples of primitive data types.
Byte, char, short
27. Write a code example that increments a value by 5.
no answer
28. Describe the order of operations for: x = speed * 40;
You would do the multiplication first so speed was 3 x = 120.
29. Write a code example that decreases a value by one using shorthand.
no answer
30. What does the logical operator ! do?
Logical operators return Boolean results. Depending on what the conditions are the results are based on them. ! means not. So != is not equal too
Control, Iteration, Structure
31. What is an if statement? When should it be used? Use code to describe its syntax.
let circX = 200;
let circY = 200;
let circStroke = 125;
let circR = 255;
let circG = 0;
let circB = 0;
let circSize = 75;
let recX = 100;
let recY = 300;
let recStroke = 35;
let recCol = 0;
let recSize = 75;
let canvBG = 225;
let speed = 2;
let alph = 125;
function setup() {
createCanvas(400,
400);
}
function draw() {
background(canvBG);
stroke(circStroke);
fill(circR,
circG, circB, alph);
stroke(circStroke);
ellipse(circX,
circY, circSize, circSize);
ellipse(circX
+ 50, circY - 75, circSize, circSize);
fill(circR,
circG, circB, 135);
stroke(recStroke);
fill(recCol);
rect(recX,
recY, recSize, recSize);
circX =
circX + speed;
recY = recY
- speed;
if
(mouseIsPressed) {
fill(recCol);
rect(recX,
recY, recSize, recSize);
} else
{
fill(255);
rect(recX,
recY, recSize, recSize);
}
print(mouseIsPressed);
if
((circX < width) || (circX > 0 )) {
circSize
+= 0.5;
if
((circX > width) || (circX < 0)) {
speed
= speed * -1;
circSize
*= -1;
}
}
}
If statements are looking to see if the conditions are met and will return a result. In this case if the mouse is clicked it will change colors and the if statement also has the objects constantly looping.
32. How many if statements can you use? What is an alternative to the if statement?
There is no limit. But if they are nested it gets harder to meet every condition. You can also have them separate and have them engage whenever the condition is met. You can also use if, else and if else, if else statements.
33. What is the difference between else and else if? Use code to demonstrate your response.
no answer
34. What is the difference between code with several consecutive if statements and code with several
else if statements?
When a code has one multiple if statements it will run through them all to see if they satisfy the requirements. With else if statements if one condition is satisfied it will stop and not look through the other conditions.
35. What is a while loop? When should it be used? Use code to describe its syntax.
no answer
36 What is a for loop? When should it be used? Use code to describe its syntax.
no answer
37. Write code that uses a nested for loop to draw a grid of squares across the x and y axis of a canvas.
no answer
Functions
38. What is a function?
39. What is the difference between a function or method built into P5 and one that you define?
A function that is built into P5 will execute a one that is defined needs to have all the parameters defined.
40. What does the keyword function mean?
A function does an action defined by you or a built in action by the program.
41. What does the keyword return mean?
It will end the function get a value instead of undefined
42. Write code that uses the keyword return.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
function cash(){
let bills= 100;
return bills;
}
let x = cash();
console.log(x);
43. Write code that uses a defined function (by the user) and call or use it.
let circ = {
x: 200,
y: 200,
s: 2,
g: 135,
b: 225,
r: 75,
c: 125,
}
function setup() {
createCanvas(400,400);
}
function draw() {
move();
shapes();
if
((circ.x > width) || (circ.x < 0))
{
circ.s
= circ.s * -1;
}
}
function shapes() {
background(circ.c);
stroke(circ.s);
fill(circ.r,
circ.g, circ.b);
stroke(circ.s);
ellipse(circ.x,
circ.y, circ.r, circ.r);
ellipse(circ.x
+50, circ.y-75, circ.r, circ.r);
fill(circ.r,
circ.g, circ.b);
}
function move() {
circ.x
= circ.x + circ.s;
}
44. What is the distinction between function and method?
A method is a function that is within the object.
45. What is the distinction between argument and parameter?
A parameter is a variable in the functions definition the argument is data you put into the parameters.
46. What do the () in a function call or definition indicate?
no answer
47. What will happen if you call an undefined function?
The program will not run.
48. What will happen if you define a function, but do not call or use it?
The program should run but you shouldn’t of defined the function.
49. What concept are functions useful for?
Functions are like verbs they do things. If you need something to happen in the program you will need to make functions specifying what you want to be done.
Objects/Classes, Arrays
50. What is an object?
An object is basically something with multiple variables or values. Example:
Let circle = { x:100, y:100, h:100, w:100} the object circle has a x and why value of 100 and a width and height of 100.
51. What data type is an object?
no answer
52. What concept are objects, classes/constructors and arrays useful for?
If functions are like verbs objects and nouns. They hold the values so you can use them to reference things later.
53. What is the difference between an object and a class/constructor function? Use code to demonstrate
your
response. let stars = [];
function setup() {
createCanvas(600,
400);
for
(let i = 0; i < 200; i++) {
stars[i] =
new Star();
}
}
function draw() {
background(0);
moon(445,
200, 150);
/*//
Everytime the function is called, the code is executed
// with the
given arguments based on the definition.
star(370,
25);
star(50,
175);
star(115,
35);
star(25,
44);
star(100,
17);
star(215,
235);
star(418,
293);
star(525,
370);
star(175,
350);
star(235,
115);
star(444,
325);
star(317,
200);
star(535,
315);
star(293,
218);
*/
for
(let i = 0; i < stars.length; i++) {
stars[i].display();
}
}
function Star() {
this.x
= random(0, width);
this.y
= random(0, height);
this.display
= function() {
stroke(random(255));
point(this.x,this.y);
fill(255);
}
}
function moon(xloc, yloc, diam) {
noStroke();
fill(255,
255, 153);
ellipse(xloc,
yloc, diam);
}
/*
function star(xloc,
yloc) {
fill(255);
}
function
star(xloc, yloc) {
ellipse(xloc,
yloc, 5);
*/
An object is has values. A constructor is only a blue print until it is used by a function to create with it.
54. What is dot syntax? Use code to demonstrate your response.
let obj = {
x: 100,
y: 100,
w: 100,
c: ‘red’
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(‘red’);
ellipse(obj.x, obj.y,obj.w,obj.w);
}
55. What is the keyword new used for?
Stars[ i ] = New Star ();
Used to create a constructor function
56. What is a constructor? Where and when is it used? Use code to demonstrate your response.
let stars = [];
function setup() {
createCanvas(600,
400);
for
(let i = 0; i < 200; i++) {
stars[i] =
new Star();
}
}
function draw() {
background(0);
moon(445,
200, 150);
/*//
Everytime the function is called, the code is executed
// with the
given arguments based on the definition.
star(370,
25);
star(50,
175);
star(115,
35);
star(25,
44);
star(100,
17);
star(215,
235);
star(418, 293);
star(525,
370);
star(175,
350);
star(235,
115);
star(444,
325);
star(317,
200);
star(535,
315);
star(293,
218);
*/
for
(let i = 0; i < stars.length; i++) {
stars[i].display();
}
}
function Star() {
this.x
= random(0, width);
this.y
= random(0, height);
this.display
= function() {
stroke(random(255));
point(this.x,this.y);
fill(255);
}
}
function moon(xloc, yloc, diam) {
noStroke();
fill(255,
255, 153);
ellipse(xloc,
yloc, diam);
}
/*
function star(xloc,
yloc) {
fill(255);
}
function
star(xloc, yloc) {
ellipse(xloc,
yloc, 5);
*/
A constructor is used when you want to use create a template that can be called upon later. Probably the most useful application we have come across in class is to use it when you need to make multiple copies.
57. What is the this keyword used for?
let float1 = {
x1: 50,
y1: 0,
x2: 150,
y2: 90,
speed: 2,
// Display
method
display:
function() {
stroke(random(255),
random(255), random(255));
strokeWeight(2);
//
"This" references the object's properties when line is called.
//
It is like shorthand to say the current object's x1, y1, x2 and y2 properties.
//
Use them as arguments to the line function/method.
line(this.x1,
this.y1, this.x2, this.y2);
},
// Move
method
move:
function() {
//
Update the object's position and movement. The term speed really refers to how
many pixels
//
to increment upon each loop, so that the appearance of movement is given.
this.x1
= this.x1 + this.speed;
this.y1
= this.y1 + this.speed;
this.y2
= this.y2 + this.speed;
}
}
// The same applies to
the float 2 object.
let float2 = {
x1: 400,
y1: 200,
x2: 500,
y2: 300,
speed: 2,
display:
function() {
stroke(random(255),
random(255), random(255));
strokeWeight(2);
line(this.x1,
this.y1, this.x2, this.y2);
},
move:
function() {
this.x1
= this.x1 + this.speed;
this.y1
= this.y1 + this.speed;
this.y2
= this.y2 + this.speed;
}
}
function setup() {
createCanvas(600,
400);
}
function draw() {
background(0);
float1.move();
float1.display();
float2.move();
float2.display();
}
When using the word this. It is referring to the object value. In this example this.x1 is to the object it is directly under. Not values from other blocks.
58. Organize original code to include the main program in one tab and a class or constructor in another.
Use in-line comments to walkthrough code.
59. What is an array?
Arrays can hold multiple objects and or variables or other data types. They are later reference by their numerical index position in the the array.
60. What notation is used to denote an array?
In this class it is noted by the square brackets “[ ]” example
Let = stars [ ];
61. How do data types impact arrays?
Datatypes do not affect arrays, arrays can hold different types of data types.
62. What is an index?
Animals
[dog, cat, fish]
Index is the position of the item on an array. Dog is 0.
63. Write code that declares, initializes and accesses elements in an array. Use comments to
walkthrough code.
64. List two or three functions that can be called on an array. Describe how they manipulate the array.
ES 6 //
Optional, except for Questions 66, 72-78 and 80.
65. What is a class? How is it distinguished for a constructor function?
A constructor is a blueprint and not an actual object.
66. What are the keywords let and const? How are they distinct from var?
All 3 are used to create variables. The scope of var is global however.
Workflow
67. What is a local server and why would one be used?
optional
68. How can you install and run code using a local server?
optional
69. What is Node?
optional
70. What is NPM? Give an example of a module that can be downloaded and installed from NPM.
optional
71. List one text editor that can be used in lieu of an IDE. How can a P5 project be coded and run using
a text editor?
optional
72. What does CLI stand for?
CLI stands for command line interface.
73. How can the current directory be identified using the command line?
You can type pwd into the terminal to print the current working directory.
74. How can the contents of a directory (current) be viewed?
You can type ls into the terminal to list the contents of the current directory
75. What command must be used to make a directory or folder using the CLI?
In the terminal type: mkdir (a file name) and press enter.
77. How can recent commands be viewed on the command line?
You can press ctrl + r to get a history of previous commands you can search typing the correct letters.
78. What shortcut keyboard combination can be used to automatically complete a path in the
commands line?
You can press the tab key to autofill
79. How can a local server be started and stopped (state actual commands)?
80. What naming convention can be used to save an application or program?
81. What is GIT?
82. How does GIT distinct from Github or Bitbucket?
83. What is the command to initialize a GIT repo?
84. What is the difference between staging and committing in GIT?
85. What is the difference between an untracked and tracked file in GIT?
86. What is the difference between the npm init and git init commands?
Andrew's Techhire Experience 