System, Environment
1. What is P5? How is it distinguished from Processing?
P5 is a java script library used for processing. Processing is used for coding adding a visual design. It is good for those who are artist, educators, and even those who are just starting out to learn code.
2. What does IDE stand for? Describe its components.
Integrated Development Environment. IDE contains a code editor is used for debugging and logging code. IDE is a full suite of tools used as by developers.
3. How do you save a file in the P5 web editor? What naming/saving convention might you use?
First you should name your file in accordance to what you are working on. You can save a file by using command + s key. Or you can go to the top left corner and click the tab file and save.
4. What is a library? How do you access and use a library with P5?
A library is a collection of functions and methods within a coding language. You can access a library in p5 by pulling up the p5 reference and selecting libraries.
5. What do the shapes/buttons across the top of the P5 editor represent?
The triangle shape represents play which will run your code. The square represents the stop button which will stop and reset your code.
6. How do you add and name an additional or new tab in the P5 editor?
You first would go to Sketch – Add File – Create FileName.extenstion or you can drag and drop your file from anywhere in your computer. Then click submit and it should appear in your tabs on the left side of the screen.
Coding Basics
7. Describe the coordinate system in P5.
The coordinate system in P5 is based on (x,y). X runs from right to left. Y runs from top to bottom.
8. What is the general syntax and structure for a line of code? Use code to demonstrate your response.
The general syntax for a structure of line code is a keyword = (value + or – operator.)
ex: let x = (8 + 9) ;
9. What is the general syntax and structure for a block of code? Use code to demonstrate your response.
The general syntax for a block of code is to group multiple lines of code.
ex: function draw(){
let x = 5;
background(“yellow”);
ellipse(x, 100, 100, 100)
}
10. Why are certain words in different colors in the P5 editor?
Certain words are different colors in P5 due to whether the value is preset and recognized by P5 or created.
Ex: Width (PINK) as it is a recognized Java Script
ellipse (Blue) as it is preset function recognized and created by P5
11. What is a system or reserved word in P5? Give an example.
A system or reserved word is a word that is preset by P5 or java script.
Ex: Height
12. How does order matter in P5? Give an example demonstrated with code.
Order matters in P5 because it determines how the code is to be executed. If the order is all over the place something may not run as planed or you might get an error.
Ex : function draw() {
background(0);
ellipse(10, 10, 10, 10);
}
function setup (){
background(255);
createCanvas(400,400);
}
In this example by putting draw first it overwrites the background and the shape. Additionally, it doesn’t show a canvas to be displayed.
13. What is the difference between mouseIsPressed and mousePressed()? Use code to demonstrate your response.
mouseIsPressed – based on boolean system of true or false
mousePressed – is called when mouse is pressed
ex : function draw(){
if(mouseIsPressed){
ellipse(10, 10, 10, 10); } else { rect(10, 10, 10, 10)}
print(mouseIsPressed);
}
}
ex : function mousePressed(){
d = d+ 20; }
14. What called function must always be first in setup()?
createCanvas must always be called first in setup.
15. What is the difference between an inline comment and a block or multi-line comment? Use code to demonstrate your response.
Inline comment only comments out a single line of code
Block comment out a long line of code.
ex: // the cat is in the hat
ex: /* the cat has three hats
he doesn’t know which one he should pick
*/
16. Does whitespace matter in P5? Capitalization? Use code to demonstrate your response.
Yes in P5 you can only have white space in a string otherwise you will get an error. Capitalization should only be used when defining a variable as industry standard.
ex : let circX = 5;
ex : let myCirc [“The cat is in the hat” , “What a funny cat”];
Variables, Operators, Logic
17. What is a variable? What is a data type? What is a value?
A variable is a storage container that can hold a value. A data type refers to how the computer reads the vale. Value is the number or string assigned to the variable.
18. What is the difference between a system variable and one that you define? Use code to demonstrate your response.
A system variable is a variable that is already defined by P5. Whereas, one that you define you are creating the value.
ex: mouseY ; width;
ex: let x = 99;
19. What is scope and how does it impact code? Use code to demonstrate your response.
Scope is the way in which your code is placed. There are two types of scope local and global. Global being that you can access the code from anywhere in your program. Local is set to the object or function in which it is placed in. If you try to access a code that is local you would need to know where it is and give permission to access it. Whereas global your computer can assign it and find it easily, however, it eats away at your speed.
ex: let x = 28;
ex: function circX(){
let myCircle = 25);
}
20. What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.
Declare a variable is to create a variable.
Initialize is to give a variable a value.
Use a value is to test/debug an a variable.
ex : let x ;
let x = 0;
console.log(x);
21. What happens when a variable is attempted to be accessed outside of its scope?
You may receive an error message saying that variable.name can not be found or you will get a message saying undefined.
22. What happens when a variable is declared globally, but is not used?
Nothing happens if a variable is declared but no used. However, it should be commented out or deleted so that you don’t confuse another reader.
23. What value does let nums; have?
In this case nums has no value or is undefined as there is no follow up code assigning a value too nums.
24. What are operators in P5? Use code to demonstrate your response using at least one operator.
An operator in P5 is a math function.
let num = 5;
let results = num + 5;
console.log(results);
25. What is a boolean data type?
A boolean data type is a condition that results in true or false.
26. List three examples of primitive data types.
Boolean, String, and numbers
27. Write a code example that increments a value by 5.
x = x + 5;
28. Describe the order of operations for: x = speed * 40;
The first step to think of when using operations is PEMDAS. (Parentheses, Exponents, Multiplication, Division, Addition, and Subtraction.) In this case we have a value x that is set to speed. But we don’t know what speed is. All we know is that we are taking forty and times it by speed. The result of speed times forty will equal x.
29. Write a code example that decreases a value by one using shorthand.
let x = 3
function draw() {
x -= 2;
}
30. What does the logical operator ! do?
The operator ! is used for the word not. If placed in front of a true statement it would be come false. Essentially it negates/reverses the decision or outcome.
Control, Iteration, Structure
31. What is an if statement? When should it be used? Use code to describe its syntax.
An if statement is a conditional statement used to find multiple outcomes in your code. It should be used if you are trying to find out the result or outcome of your code. An if statement essentially says if this is true execute code.
ex: if((circX > width || circX < 0)){
ellipse(255, 255, 100, 100);
}
32. How many if statements can you use? What is an alternative to the if statement?
You can use as many if statement as you would like, however, the more you use them the messier or more confusing your code can become. The alternative to an if statement is the else if statement which can include multiple lines of code.
33. What is the difference between else and else if? Use code to demonstrate your response.
Else can be only used once and is has two different outputs depending on whether a condition is or is not met. An else if uses multiple lines of code and can be repeated often. An else if statement has a condition and an outcome. If that condition is not met then the else if command will introduce another condition that will have another another outcome.
ex: else
if(x = 2, x > 2; x++){
rect(122, 122, 100, 100);
}
else (x > 5) {
circ(100, 100, 100, 100);
}
ex: else if
if (y = 9; y > 11; y++){
ellipse(123, 123, 45, 45);
}
else if(y >= 9){
rect(122, 122, 33, 33);
}
else (y <= 15){
console.log(“That’s to bad”)
}
34. What is the difference between code with several consecutive if statements and code with several else if statements?
In multiple if statements the code will check to see if the condition is true or false. If true the if statement will move on to the next condition. In multiple else if statements the code will check to see if the condition is true or false. If false it will move onto the next condition.
35. What is a while loop? When should it be used? Use code to describe its syntax.
A while loop is used to repeat a line of code multiple times without ever having to rewrite them. It should be used if you want to create a mass number of shapes in no time.
ex: let x = 0;
while (x < 20) {
rect(x * 10, 100, 50, 50);
x++
}
36 What is a for loop? When should it be used? Use code to describe its syntax.
A for loop is an advanced form of the while loop.
for (let y = 3; y < 9, x++) {
rect(122, 33, 44, 99);
}
37. Write code that uses a nested for loop to draw a grid of squares across the x and y axis of a canvas.
A nested for loop is a for loop in another for loop.
function draw(){
background(random(255));
for (let i = 25; i < 30; i++){
circle(11, 11, 12, 12);
for(let j = 22; j < 25; j++){
rect(27, 27, 55, 55);
}
}
Functions
38. What is a function?
A function is a block of code that gives a set of commands to be executed.
39. What is the difference between a function or method built into P5 and one that you define?
A function or method built into P5 is already predefined and created to do a certain task. A function that you define is a function that you created and assigned a name too. In that function you create conditions, shapes, loops, etc that you want executed.
40. What does the keyword function mean?
The keyword function means that you are creating a function do said task.
41. What does the keyword return mean?
The keyword for return means that it will return the value of input back to you.
42. Write code that uses the keyword return.
ex: function myCirc(){
let value1= 5;
let return = 2;
}
let returnValue = myCirc();
console.log(retuenValue);
43. Write code that uses a defined function (by the user) and call or use it.
function draw(){
yourCirc()
}
function yourCirc() {
fill (random(255));
ellipse(23, 23, 44, 44);
}
44. What is the distinction between function and method?
Function – gives a set of commands/conditions to be executed
Method – is an object oriented programming; refers to the conditions/commands within an object
45. What is the distinction between argument and parameter?
Argument – is a value you place in a parameter
Parameter – is input you place within a function
46. What do the () in a function call or definition indicate?
The () in a function defines the parameters and arguments.
47. What will happen if you call an undefined function?
Nothing will happen if you call upon an undefined function. It will just stay in your global space. I would recommend to comment it out to avoid any confusion later or to your reader.
48. What will happen if you define a function, but do not call or use it?
Nothing will happen if you do not use your function. I would recommend commenting it out to avoid confusion later. If you decide to use the function later you can always remove it from your comments.
49. What concept is a function useful for?
The concept a function is useful for creating objects, methods, and classes.
Objects/Classes, Arrays
50. What is an object?
An object is a storage container that holds complex data types, values, properties, and functions.
51. What data type is an object?
An object is a complex data type that stores numerous values and properties
52. What concept are objects, classes/constructors and arrays useful for?
Objects, classes/constructors and arrays are useful for the following:
Object – making code modular
Constructor/class – create a numerous amount of one particular object
Arrays – listing code
53. What is the difference between an object and a class/constructor function? Use code to demonstrate your response.
Object function – collection of variables and properties
Constructor/class function – creating multiple objects that all work independently of each other
ex : let obj = {
rect : 1,
rec2 : 4,
rec3 : 6,
rec4 : 25
}
console. log(obj.rec4);
ex : let names = {
name1 : Mary,
name2 : Bob,
name3 : Sue
}
console.log(names.name3);
54. What is dot syntax? Use code to demonstrate your response.
Dot syntax allows code to view the content/properties of the object.
ex: let objects = {
square : 22,
circle : 55
}
objects.circle
55. What is the keyword new used for?
The keyword new is used to create a new object using a constructor function.
56. What is a constructor? Where and when is it used? Use code to demonstrate your response.
A constructor is function that is used to create objects. A constructor function should be placed outside of both the draw and setup functions.
let circT = [];
function setup(){
createCanvas(400 , 400);
for(let i = 0; i < 10; i++){
function circle() {
this.x = random(0 , height);
this.y = random(0 , weight);
this.display = function () {
circle(this.x , this.y , 100);
}
}
function draw() {
background();
for(let i = 0; i < circle.length; i++) {
circle[i].display();
}
}
57. What is the this keyword used for?
The this.name – reference a value name to object name
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?
An array is a list of values or data. These types of data include boolean, strings, and numbers.
60. What notation is used to denote an array?
The notation used to denote an array is [].
61. How do data types impact arrays?
Data types impact arrays as arrays are able to use and access multiple data types such as numbers, strings, and boolean.
62. What is an index?
An index is the location of each item within your array. Typically anything within your index will be assigned 0 and increment up from there.
63. Write code that declares, initializes and accesses elements in an array. Use comments to walkthrough code.
64. List two or three methods that can be called on an array. Describe how they manipulate the array.
The methods that can be used to call on an array are:
console. log – displays value of index
document.write – displays value of the index
this.length – displays how many items are in the array
ES 6, Local Servers, Version Control, Repositories, CLI and OS.
Questions marked with * can be skipped.*
65. What is a class? How is it distinguished for a constructor function?
66. What are the keywords let and const? How are they distinct from var?Workflow*
The keywords let and constant are variables. Let creates a new variable and allows the variable to be reassigned a new value, whereas constant once the value is assigned it cannot be changed. The variable var holds a value in memory.
67. What is a local server and why would one be used?
*68. How can you install and run code using a local server?
69. What is Node?
A node is a large package of JavaScript utilities, including a standalone JavaScript interpreter.
70. What is NPM? Give an example of a module that can be downloaded and installed from NPM.
NPM stands for Node Package Manner. A node.js is a package manager for Java.
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?
72. What does CLI stand for?
CLI stands for Command Line Interface.
73. How can the current directory be identified using the command line?
To view the current directory you are in you can use the pwd. This will show you the path of your command line.
ex : pwd
/users/ace
74. How can the contents of a directory (current) be viewed?
The contents of a current directory can be used by using the command ls . That will allow you to see the contents of what is inside the directory.
75. What command must be used to make a directory or folder using the CLI?
To make a directory or folder you would use the command mkdir and the name of the directory.
ex: mkdir classNotes
77. How can recent commands be viewed on the command line?
You can view all the commands that were recently used.
78. What shortcut keyboard combination can be used to automatically complete a path in the commands line?
*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?
Gabriella's Technology Showcase 