C10 Vestibule Assessment March 2020

This blog contains my test and answers and will be incredibly boring for the casual reader.

System, Environmen

1.What is P5?
P5 is a Javascript library that is geared towards beginners. 

2. What does IDE stand for?

Integrated Development Environment

3. How do you save a file in the P5 web editor? What naming/saving convention might you use? 

To save a file in the editor, you select File then Save. You can separate the words with an underscore, I.e “hello_world”

4. What is a library? How do you access and use a library with P5? 

A library is a JavaScript file that contains a bunch of functions, and those functions accomplish some useful task for your webpage. To include a library in your sketch, link it into your HTML file.

5. What do the shapes/buttons across the top of the P5 editor represent?
The triangle is to run the code and the square is to stop it.

6. How do you add and name an additional or new tab in the P5 editor?

There is a small > symbol on the left above the text window, when pressed it reveals a drop down menu. From there “sketch files” can be pressed then “add file” 

6a. Where is the console and what is it used for?

The console is below the text window and it is used to relay information back to the programmer or to test code.

Coding Basics

7. Describe the coordinate system in P5.
X is horizontal and Y is vertical. The top left is the 0 value for both X and Y, X increases from left to right and Y increases from top to bottom. 

8. What is the general syntax and structure for a line of code? Use code to demonstrate your response.

In general you have an object then follow it with parenthesis wherein you can place parameters then you describe what the function will do within curly brackets. Everything within curly brackets is separated by semicolons.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

9. What is the general syntax and structure for a block of code? Use code to demonstrate your response.

Same as #8

10. Why are certain words in different colors in the P5 editor?
The editor is color coded to represent what the words are doing. This is a guide for the programmer, by seeing the color they can tell if their code is being read as they intend or if they have an error. 

11. What is a system or reserved word in P5? Give an example.

A system is a word that has a predefined use in P5 and therefore cannot be defined by the programmer. An example would be “function”

12. How does order matter in P5?  Give an example demonstrated with code.
The order that code is given is important because that’s the order that the processor will receive it in. Variables need to be defined before they are called, placing visual parameters in the set up function means they will only play once, whereas if placed in the draw function they will loop continuously.

In this code the background remains white because it is looping

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

In this code the background will only run white once:

function setup() {
  createCanvas(400, 400);
background(220);
}

function draw() {
}


13. What is the difference between mouseIsPressed and mousePressed()? Use code to demonstrate your response.

mouseIsPressed is a boolean function, meaning that it is true when the mouse is pressed but false when not.  Whereas mousePressed is a function that happens automatically when the mouse is pressed.
Boolean:

if (mouseIsPressed) {
    let x = random(width);
    let y = random(height);
    ellipse(x,y,16,16);
  }


 
this code will continue to generate circles while the mouse is held down, but stops immediately upon release.

Regular function: 

Regular function: 
function mousePressed() {
  let r = random(255);
  background(r,0,0);
  }

 
This code changes the background every time the mouse is clicked.

14. What called function must always be first in setup()?

createCanvas()

15. What is the difference between an inline comment and a block or multi-line comment? Use code to  demonstrate your response.
An inline comment is shorter than a block comment and they are commanded differently:

/ This is a single line comment
function setup() {
  createCanvas(400, 400);
}

/*this is a block comment, it contains many lines of text and is signified differently within the editor
*/

function draw() {
  background(220);
}

16. Does whitespace matter in P5? Capitalization? Use code to demonstrate your response.
White space between lines of code doesn’t matter, capitalization does matter because the case is a detail in that word just as much as the letters are. 

The following code will return an error message because “ellipse” is a function but “Ellipse” is not.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  Ellipse(200, 200, 30);
}


Variables, Operators, Logic

17. What is a variable? What is a data type? What is a value?

A variable holds a value in memory, a datatype is a classification of variables (boolean, array, numbers, string), a value is the specific parameter. Consider:

let bg = 255;
in the above, bg is the variable, 255 is the value and the datatype is numbers.

18. What is the difference between a system variable and one that you define? Use code to demonstrate your response.

A system variable is predefined and cannot be changed, a variable that I define can be renamed and defined however I’d like. 

In the following code I created a variable to control the background color:

let bg = 255;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(bg);
  ellipse(200, 200, 30);
}



I would not be able to say: 

let ellipse = 255;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(ellipse);
  ellipse(200, 200, 30);
}



Because ellipse is a system provided variable.

19. What is scope and how does it impact code? Use code to demonstrate your response.

The scope pertains to how far the code’s impact reaches. For example, a code defined initially, before setup function, has a global scope, and will apply to all of the code. Any code defined within a function has a local scope.
The code “noLoop()” below has a local scope and only applies to the function setup. Had it been placed before function setup it would be global and apply to all code following, including function draw. 

function setup() {
  createCanvas(720, 400);
  background(0);
  stroke(255);
  noLoop();
}

20. What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.
Declaring a variable is introducing it to the code’s lexicon, Initializing it it setting a value to it, and using it is placing it within a function.

// Here the variable is being declared and initialized
let bg = 255;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  // here it is being used
  background(bg);
  ellipse(200, 200, 30);
}

21. What happens when a variable is attempted to be accessed outside of its scope?
An error in the console lets the programmer know that that variable is undefined.

22. What happens when a variable is declared globally, but is not used?
It takes up memory but otherwise has no apparent impact on the code.

23. What value does let nums; have?
only the value that it is assigned by the user.

24. What are operators in P5? Use code to demonstrate your response using at least one operator.

Operators are symbols that reflect math relationships.
The following code defines “i” between 35 and 100 by using less than (<) and greater than (>) operators as well as (&&) to establish that both factors must be true.

 if (i > 35 && i < 100) {
      line(width / 4, i, width / 2, i);
      test = false;
    }

25. What is a boolean data type?
A true or false datatype.

26. List three examples of primitive data types.

Boolean, Undefined, and Number

27. Write a code example that increments a value by 5.

let bg = 200;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(bg+5);
  ellipse(200, 200, 30);
}

28. Describe the order of operations for: x = speed * 40 + 4;
the value of speed would be multiplied by 40 then that value would be increased by 4, which would in turn become the value of x.

29. Write a code example that decreases a value by one using shorthand.
x-=1

30. What does the logical operator ! do?

It negates a boolean type. Applies the “NOT” joke structure to coding. 

Control, Iteration, Structure 

31. What is an if statement? When should it be used? Use code to describe its syntax.

An if statement defines a set of code to be applied only under certain parameters. 

if (i > 35 && i < 100) {
      line(width / 4, i, width / 2, i);
      test = false;
    }

32. How many if statements can you use? What is an alternative to the if statement?
There’s no limit to is statements but an alternative is a for statement. 

33. What is the difference between else and else if? Use code to demonstrate your response. Else lays out an action to do if the if statement aforementioned was not fulfilled. “else if” defines another parameter that must be met once the if statement preceding wasn’t.

 for (let i = 2; i < width - 2; i += 4) {
    // If 'i' divides by 20 with no remainder
    if (i % 20 === 0) {
      stroke(255);
      line(i, 80, i, height / 2);
      // If 'i' divides by 10 with no remainder
    } else if (i % 10 === 0) {
      stroke(153);
      line(i, 20, i, 180);
      // If neither of the above two conditions are met
      // then draw this line
    } else {
      stroke(102);
      line(i, height / 2, i, height - 20);
    }
  }
}


 In the code above the else if has another value of “i” that needs to be met to be fulfilled. The else statement will be executed regardless if the two above parameters have not been met. 

34. What is the difference between code with several consecutive if statements and code with several else if statements?

The else if is relative to the if, whereas the ifs are not reliant on one another being true. 

35. What is a while loop? When should it be used? Use code to describe its syntax.
While calls an action to loop under certain circumstances, in the code below “num” will start as 5 but will decrease continually so long as it is greater than 0. 

let num = 5;
while (num > 0) {
  num = num - 1;
  console.log(num);
}

36. What is a for loop? When should it be used? Use code to describe its syntax.

For defines a parameter that must be met and while that parameter is met a defined action while continue to loop.
In the code below “i” will start at 0 but increase by 1 until it reaches 8, which is less than 9. 

for (let i = 0; i < 9; i++) {
  console.log(i);
}

37. Write code that uses a nested for loop to draw a grid of squares across the x and y axis of a canvas.

function setup() {
  createCanvas(400, 400);
}

function draw() {
   createCanvas(400, 400);
  background(0);
  strokeWeight(2);
  stroke(255);
  fill(127);
  for (y = 0; y < height; y = y + 20) {
    for (x = 0; x < width; x = x + 20) {
      rect(x, y, 20, 20)
    }
}
}

Functions

38. What is a function? 

A function is a set of statements that perform a task.

39. What is the difference between a function or method built into P5 and one that you define?

A function built into p5 (like function (setup)) has a predetermined task, whereas one created by the programmer can be defined by them as well. 

40. Write an example of a function with code with our without parameters.

function setup() {
  createCanvas(400, 400);
}

41. What does the keyword return mean?

The return statement ends function execution and specifies a value to be returned to the function caller.

42. Write code that uses the keyword return.

function calculateSquare(x) {
  return x * x;
}
calculateSquare(4); // returns 16

function calculateSquare(x) {

43. Write code that uses a defined function (by the user) and call/use it.

let float1 = {
  x1: 50,
  y1: 0,
  x2: 150,
  y2: 90,
  speed: 2,
  display: function() {
    stroke(random(255), random(255), random(255));
    strokeWeight(2);
    line(this.x1, this.y1, this.x2, this.y2);
  },
}
function setup() {
  createCanvas(600, 400);
}
function draw() {
  background(0);
  float1.display();
}

44. What is the distinction between function and method?

A method is on an object.
A function is independent of an object.

45. What is the distinction between argument and parameter?

A parameter is a variable in a method definition. When a method is called, the arguments are the data you pass into the method’s parameters

46. What do the () in a function call or definition indicate?

The parameters of the function.

47. What will happen if you call an undefined function?

You will receive an error message.

48. What will happen if you define a function, but do not call or use it?

Nothing apparent other than memory use.

49. What concept is a function useful for?

The concept of change? I have no idea. 

 Objects/Classes, Arrays

50. What is an object?

An object is a collection of properties. 

51. What is the data type in this example:

let dog = {
name: “Fido”,
age: 12,
coat_length: “short”,
coat_color: “brown”
bark: function() {console.log(“Woof! Woof!”);}
}

The above is a string data type except for age which is numerical. 

51.a Using the example above, how can properties and methods of an object be accessed? Using dot notation I.e
“dog.age” will equal 12. 

52. What concept are objects, classes/constructors and arrays useful for?

Modularization

53. What is the difference between an object and a class/constructor function? Use code to demonstrate your response. 

 A constructor function constructs objects. The object is predefined, and the constructor function takes that object and constructs with it.

let bug; // Declare object

function setup() {
  createCanvas(710, 400);
  // Create object
  bug = new Jitter();
}

function draw() {
  background(50, 89, 100);
  bug.move();
  bug.display();
}

// Jitter class
class Jitter {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.diameter = random(10, 30);
    this.speed = 1;
  }

54. What is dot syntax? Use code to demonstrate your response.

Dot syntax is a way of creating and recalling values

let dog = {
name: “Fido”,
age: 12,
coat_length: “short”,
coat_color: “brown”
bark: function() {console.log(“Woof! Woof!”);}
}

 dog.age would call have the value 12. 

55. What is the keyword new used for?

“new” will generate replicas of the object that is called after it. 

56. What is a constructor? Where and when is it used? Use code to demonstrate your response.

A constructor is a function that calls an object and constructs new objects based upon that objects values and additional functions

let bubbles = [];

function setup() {
	createCanvas(400, 400);
	for (let i = 0; i < 100; i++) {
		bubbles[i] = new bubble();


	}

}

function draw() {
	background(220);
	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].move();
		bubbles[i].display();
	}
}


function bubble() {
	this.x = random(0, width);
	this.y = random(0, height);

	this.display = function() {
		stroke(255);
		noFill();
		ellipse(this.x, this.y, 24, 24);
	};
	this.move = function() {
		this.x = this.x + random(-5, 5);
		this.y = this.y + random(-5, 5);
	}
}

57. What is the this keyword used for? 

“This” refers to the variable that is being referenced within the function.

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. Include a screenshot or shared link to an example in your P5 Editor. 

Link to editor

59. What is an array?

An array is a list of data. Each piece of data in an array is identified by an index number representing its position in the array.

60. What notation is used to denote an array? 

“[]”

61.  What is the nature of data types in Javascript arrays?

string

62. What is an index?

the cataloging of items within the array, starting at 0. 

63. Write code that declares, initializes and accesses elements in an array. Use comments to walkthrough code.

// Here I declare and define my array


let fruits = ["oranges", "apples", "bananas", "cherries", "blueberries", "lemons", "strawberries", "pineapples"];



function setup() {
  createCanvas(1200, 800);
  background(56, 73, 125);
  
// I understand that this for statement allows i to increase by 1 as long as it is less than 8.
  for (let i = 0; i < 8; i++) {
    stroke(255);
    fill(255);
    textSize(38);
// This calls the values in the array from 0-7, then sets their location.
    text(fruits[i], 100, i * 50 + 30);
  }
}


function draw() {

}

64. List two or three methods or properties that can be called on an array. Describe how they manipulate the array.

The push() method adds new items to the end of an array. The pop() method removes the last element of an 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 from  a constructor function?

A class is altered by a constructor function. Also classes aren’t recognized in javascript. 

66. What are the keywords let and const? How are they distinct from var?

“let” and “const” declare variables within their scope (unless global) var can be accessed outside of its scope. 

Workflow

67. What is a local server and why would one be used?
A local server is an editor that is hosted on the user’s machine (as opposed to remotely accessed via the internet).

68. How can you install and run code using a local server?

Using your command line and git. 

69. What is Node?

Is a platform that runs javascript outside of a browser. 

70. What is NPM? Give an example of a module that can be downloaded and installed from NPM. 

NPM is a package manager used incongruous with Node. 

I do not know what one would be downloading with this, but I’d guess it’s like how I created a repository on GitHub that was then accessible via my terminal. 

71. List one text editor that can be used in lieu of an IDE.
Atom

72. How can a P5 project be coded and run using a text editor?
By saving it as a .html

72. What does CLI stand for?

Command Line Interface

73. How can the current directory be identified using the command line?

pwd

74. How can the contents of a directory (current) be viewed?

ls

75. What command must be used to make a directory or folder using the CLI?

mkdir

77. How can recent commands be viewed on the command line?

history

78. What shortcut keyboard combination can be used to automatically complete a path in the commands line?

Press and hold the Shift and Command keys and double-click the path

*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?

Camel case or underscores

81. What is GIT?
A version control system that tracks changes in code.

82. How is GIT distinct from a repo service like Github or Bitbucket?
Git is local (on your machine) and GitHub is online and designed to access files created through git.

Git is the camera, GitHub is the photobucket.

*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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: