Vestibule Assessment 3/20/19;
- What is P5? How is it distinguished from Processing?
– P5 is a JavaScript library that is designed to help make coding beginner friendly and easier to write. P5.js is different than Processing because Processing is its own language and P5.js is a library for the JavaScript language.
- What does IDE stand for? Describe its components.
– IDE stands for Integrated Drive Electronics. Its components are an electronic interface that interacts between a computer motherboard’s data paths and the computer’s disk storage devices.
- How do you save a file in the P5 editor? What naming/saving convention might you use?
– In order to save a file on P5 editor you must first create an account by signing up which is free than going to the file drop bar click saving and using a name that describes what your doing in camel case, for ex. If your making shapes with color you might want to save as shapesColor.
- What is a library? How do you access and use a library with P5?
– A library are files of module code written and stored in object format. Using that module code helps you simplify commands or actions you would want to execute. The library has certain commands that when called can perform task using one or two lines of code instead of 4 or 5 lines of code. You access and use a library by downloading the files on to your computer, than linking the library path to your HTML document which is linked to your JavaScript file.
- What do the triangle and circular shapes across the top of the P5 editor represent?
– The triangle is the play function on the P5 editor which runs the code that you have written and the circular shape is the stop function.
- How do you add and name an additional or new tab in the P5 editor?
– You add and name an additional or new tab in the P5 editor by going to the to the left side right beside the sketch.js and click that arrow and there is an arrowing facing down if you click that it will give you options to do that.
- Describe the coordinate system in P5.
– The coordinate system in P5 is X axis of the “canvas” which is the screen you will be seeing the code that you write run-the X axis is going horizontal from left to right and the Y axis is going vertical from top to bottom.
- What is the general syntax and structure for a line of code? Use code to demonstrate your response
createCanvas(400, 400);//this is general syntax for a line of code
- What is the general syntax and structure for a block of code? Use code to demonstrate your response.
function draw() { //whatever is in the curly brackets becomes a block of code
background(220);
}
- Why are certain words in different colors in the P5 editor?
– Certain words are in different color in P5 editor because they are built in functions.
- What is a system or reserved word in P5? Give an example.
– A system or reserved word is a word that is saved for a specific action that cannot be used in code for anything else but perfroming its pre defined parameters.
- How does order matter in P5? Give an example demonstrated with code.
function setup(){
createCanvas(400,400);
}
function draw() {
//background(92,90,87)//if this comes first, when you run the code it will show background color constant
if (mouseIsPressed) {
background(92,90,87);//if you have the background color here, the color will only change if you click
fill(0);
}// So where you put each line of code will affect the outcome.
- What is the difference between mouseIsPressed and mousePressed()? Use code to demonstrate your response.
– function mousePressed() {// this will execute when mouse is pressed only one time
background(bgSwitch);
noStroke();
fill(0, 0, 255);
ellipse(width / 2, height / 2, diam, diam);
}
function draw() {
background(0);
stroke(255);
strokeWeight(4);
noFill();
if (mouseX > 300 && mouseX < 400 && mouseY > 200 && mouseY < 300) {
if (mouseIsPressed) {//this will execute its parameters every time the mouse is being pressed
background(0, 255, 0);
}
fill(255, 0, 200);
}
rect(300, 200, 100, 100);
}
- What called function must always be first in setup()?
createCanvas();
- What is the difference between an inline comment and a block or multi-line comment? Use code to demonstrate your response.
function setup() {
createCanvas(400, 400);//this is an inline comment
}
function draw() {
background(220);
}/*This is block or multi
line comment */
- Does whitespace matter in P5? Capitalization? Use code to demonstrate your response.
function setup() {//the whitespaces do not effect
//the code but its conventions that you dont have unecessary white space
createCanvas(400, 400);
}
function Draw() {//this capital D will prevent from running
background (0);
}
- What is a variable? What is a data type? What is a value?
A variable is an element that holds a value. A data type is like instructions on what to do with data. A value is what is being defined by variable.
- What is the difference between a system variable and one that you define? Use code to demonstrate your response
let x = 10;//variable x I defined and has a value
//of 10
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(x,200,50,50)//the ellipse is a system variable
//that holds 4 parameters
}
- What is scope and how does it impact code? Use code to demonstrate your response.
There is two type of scope, one is local and the other is global. Any variable declared outside any function (usually on the top of your code) is a global variable and any variable declared in a function is a local variable and can only be utilized within that function
let x = 400;//this is a global variable
function setup() {
let j = 400;//this is a local variable
createCanvas(j, x);//x can be used as value here
//because its global and j can be used here because
//its locally within the function it has been defined
//in
}
function draw() {
background(220);
ellipse(x,j,50,50);//x works here as well as a value
//but j does not because it is outside the function
//it was defined in
}
- What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.
// declaring a variable, no value given
let circX;
circX = 200;
let circY;
circY = 200;
// Variable declaration and initialization(giving a variable a value) can be done on one line.
let circStroke = 125;
let circR = 55;
let circG = 135;
let circB = 225;
let circSize = 75;
let canvBG = 125;
function setup() {
createCanvas(400, 400);
}
function draw() {
//and then we use the variables
background(canvBG);
stroke(circStroke);
fill(circR, circG, circB);
stroke(circStroke);
ellipse(circX, circY, circSize, circSize);
21.What happens when a variable is attempted to be accessed outside of its scope?
You will get an error message in the console saying the variable is undefined.
- What happens when a variable is declared globally, but is not used?
Nothing happens
- What value does var nums; have?
No value
- What are operators in P5? Use code to demonstrate your response using at least one operator.
Operators are used to assign values, compare values, perform math.
let lite2 = {//****the equal sign will be the first operator in this code
x1: 20,
y1: 10,
x2: 50,
y2: 50,
speed: 1,
display: function() {//function 1
stroke(244,241,66);
strokeWeight(1);
ellipse(this.x1, this.y1, this.x2, this.y2);
},
move: function() {//function 2
this.x1 = this.x1 + this.speed; //
this.y1 = this.y1 + this.speed;
this.x2 = this.x2 + this.speed;
this.y2 = this.y2 + this.speed;
}
}
- What is a boolean data type?
-A boolean data type is a variable with is often to test if a condition is true or false.
- List three examples of primitive data types.
– Boolean
– Number
– String
- Write a code example that increments a value by 5.
let x = 15;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(x+5,200,50,50)
}
- Describe the order of operations for: x = speed * 40;
– 40 is being multiplied by the value of speed to give you variable x
- Write a code example that decreases a value by one using shorthand.
let x = 15;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(x-1,200,50,50)
}
- What does the logical operator ! do?
– ! is the void logical operator that is to not return a value.
- What is an if statement? When should it be used? Use code to describe its syntax.
An if statement is used to place a conditional variable and as long as its true to perform a task.
if ((circX > width) || (circX < 0)) {//so this is saying if circX is less than width and greater than 0 then multiply variable speed by -1
speed = speed * -1;
}
}
- How many if statements can you use? What is an alternative to the if statement?
You can use as many if statements and one alternative to if statements is if else statements or using boolean variable.
- What is the difference between else and else if? Use code to demonstrate your response.
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 (circX < width) {
// circle size will increase by 0.5 through each loop if the condition is true.
circSize += 0.5;
// Else wil execute if condition is not true.
//
} else {
//if (circX > width) {// Now if you put else and then another if statement it is like saying if the is true do this or else if this other thing is true do something else
speed = speed * -1;
circSize *= -1;
}
//}
}
- What is the difference between code with several consecutive if statements and code with several else if statements?
The difference is code with several consecutive if statements is not modular like else if statements are.
- What is a while loop? When should it be used? Use code to describe its syntax.
A while loop executes a block of code as long as the condition is true
while (y <= width) {
stroke(0);
fill(255);
rect(200, y, 50, 50);
y = y + 50; }
36 What is a for loop? When should it be used? Use code to describe its syntax.
A for loop executes when the conditions are met and continue to be met it executes block code
for (let y = mouseY; y <= width; y += 50) {
stroke(255);
fill(0);
rect(300, y, 50, 50);
}
- 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() {
background(220);
strokeWeight(4);
for (let i = 0; i <= width; i += 20) {
for (let j = 0; j <= height; j += 20) {
fill(244, 241, 66);
rect(i, j, 20, 20);
}
}
}
- What is a function?
– A function is a set of instructions that goes with a variable.
- What is the difference between a function or method built into P5 and one that you define?
– The difference between a function or method built into P5 and one that you define is the function built in will have a specific parameters attached to it and the one you define you set the parameters.
- What does the keyword function mean?
The keyword function has a specific keyword to execute the function its attached to.
41.What does the keyword return mean?
Keyword return means to bring back a value from a function.
*42. Write code that uses the keyword return
- Write code that uses a defined function (by the user) and call or use it.
function display(){
stroke(1);
fill(244, 241, 66);
rect(100,100,50,50);
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
display();
}
- What is the distinction between function and method?
-A method is usually a function in an object.
- What is the distinction between argument and parameter?
– An argument has real values and parameters are the names listed in the function definition
- What do the () in a function call or definition indicate?
– there is no arguments
- What will happen if you call an undefined function?
– you will get an error in your console log and code wont run
- What will happen if you define a function, but do not call or use it?
– Nothing happens if you never call or use it
*49. What concept are functions useful for?
– The concept of setting parameters to perform a task that
- What is an object?
– An object is an entity or container of specific information about it
*51. What data type is an object?
–
- What concept are objects, classes/constructors and arrays useful for?
– objects, classes/constructors and arrays are useful to handle, store or to create large amounts of data/variables.
- What is the difference between an object and a class/constructor function? Use code to demonstrate
your response.
let lighting = {// this is 1 object
x: 400,
y: 400,
x1:200,
y1: 100,
r : 244,
g : 241,
b : 66
}
function Drops() {//this is a constructor and the difference here as oppose to an object is it has the
Capabilities to create Multiple objects
this.x = random(0, width);//random location
this.y = random(0, height);
this.display = function() {//to display them
strokeWeight(9);
stroke(0,0,255);
point(this.x, this.y);//the actual shapes
this.x = this.x – speed;//and the movement
this.y = this.y – speed;
}
}
- What is dot syntax? Use code to demonstrate your response.
Dot syntax is this.y = this.y – speed; which has the dot as the acessor for the variable its attached to.
- What is the keyword new used for?
– The keyword new is used for the constructor function
- What is a constructor? Where and when is it used? Use code to demonstrate your response.
– A constructor is like template for creating multi objects without having to write verbose code. Its used in cases where you need many objects.
let drops = [];//created an empty array
// let fullMoonX = 100;//set variables
// let fullMoonY = 100;
// let diam = 100;
let speed = 1;
//mod.created a lighting object
let lighting = {
x: 400,
y: 400,
x1:200,
y1: 100,
r : 244,
g : 241,
b : 66
}
//mod.created a moon object
let mooon = {
x: 100,
y: 100,
diam: 100,
}
function setup() {
createCanvas(600, 600);
// for (let i = 0; i < 400; i++){
// drops[i] = new Drops();
// }
}
function draw() {
background(255);
for (let i = 0; i < 400; i++){//created an array to create the new drops
drops[i] = new Drops();//initializing the constructor function
}
for (let i = 0; i < drops.length; i++) {//created an array to display the drops
drops[i].display();
}
noStroke();
fill(random(255));
ellipse(mooon.x, mooon.y, mooon.diam, mooon.diam);//mod. by creating an ellipse object
stroke(lighting.r, lighting.g, lighting.b);
strokeWeight(2);
//fill(lighting.r, lighting.g, lighting.b);
line(lighting.x + 100, lighting.y + 100, lighting.x1, lighting.y1)
//do not understand why line is not in yellow color
//**figured out why! A line is not filled but shows color
//with stroke
//umbrellaX = umbrellaX + speed;
}
function Drops() {//setting the parameters for the constructor function
this.x = random(0, width);//random location
this.y = random(0, height);
this.display = function() {//to display them
strokeWeight(9);
stroke(0,0,255);
point(this.x, this.y);//the actual shapes
this.x = this.x – speed;//and the movement
this.y = this.y – speed;
}
}
- What is the this keyword used for?
– This keyword is used to describe the object the variable is attached to by dot syntax
- 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.
//John Kontolios March 15, 2019
//constructor function
let drops = [];//created an empty array
// let fullMoonX = 100;//set variables
// let fullMoonY = 100;
// let diam = 100;
let speed = 1;
//mod.created a lighting object
let lighting = {
x: 400,
y: 400,
x1:200,
y1: 100,
r : 244,
g : 241,
b : 66
}
//mod.created a moon object
let mooon = {
x: 100,
y: 100,
diam: 100,
}
function setup() {
createCanvas(600, 600);
// for (let i = 0; i < 400; i++){
// drops[i] = new Drops();
// }
}
function draw() {
background(255);
for (let i = 0; i < 400; i++){//created an array to create the new drops
drops[i] = new Drops();//initializing the constructor function
}
for (let i = 0; i < drops.length; i++) {//created an array to display the drops
drops[i].display();
}
noStroke();
fill(random(255));
ellipse(mooon.x, mooon.y, mooon.diam, mooon.diam);//mod. by creating an ellipse object
stroke(lighting.r, lighting.g, lighting.b);
strokeWeight(2);
//fill(lighting.r, lighting.g, lighting.b);
line(lighting.x + 100, lighting.y + 100, lighting.x1, lighting.y1)
//do not understand why line is not in yellow color
//**figured out why! A line is not filled but shows color
//with stroke
//umbrellaX = umbrellaX + speed;
}
function Drops() {//setting the parameters for the constructor function
this.x = random(0, width);//random location
this.y = random(0, height);
this.display = function() {//to display them
strokeWeight(9);
stroke(0,0,255);
point(this.x, this.y);//the actual shapes
this.x = this.x – speed;//and the movement
this.y = this.y – speed;
}
}
.
- What is an array?
Is a list or container of values separated by commas in square brackets
- What notation is used to denote an array?
Square brackets
- How do data types impact arrays?
Depending on what data type it is it might need quotation marks
- What is an index?
Index is the first value of the array
- Write code that declares, initializes and accesses elements in an array. Use comments to
walkthrough code.
//Array to display text on canvas
//Code by John Kontolios, 2019
let fnmnln = [“John”, “Peter”, “Kontolios”];//created an array declared and initialized elements
function setup() {
createCanvas(600, 400);
background(0,255,0);
for (let i = 0; i < 3; i++) {//use for loop to access the array’s index starting always from 0 to 2
noStroke();
fill(0);
textSize(20);
text(fnmnln[i], i * 20 + 150, i * 50 + 50);//use to print each string by space and location
}
}
function draw() {//no need to draw
//background(220);
}
- List two or three functions that can be called on an array. Describe how they manipulate the array.
- What is a class? How is it distinguished for a constructor function?
- What are the keywords let and const? How are they distinct from var?
- What is a local server and why would one be used?
A local server is a server running in your computers files and not the internet
- How can you install and run code using a local server?
You can download a text editor like sublime and use your computer as the local server
- What is Node?
It is an open source server enviroment
- What is NPM? Give an example of a module that can be downloaded and installed from NPM.
- 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?
Sublime and you can link the libraries you want to use from p5js in a html file and have that file linked in your javascript file
- What does CLI stand for?
Command Line Input
- How can the current directory be identified using the command line?
By typing cd in the command line
- How can the contents of a directory (current) be viewed?
By typing pwd
- What command must be used to make a directory or folder using the CLI?
By typing cd”nameOfFolder” and press enter
- No question
- How can recent commands be viewed on the command line?
Up arrow key
*78. What shortcut keyboard combination can be used to automatically complete a path in the
commands line?
- What naming convention can be used to save an application or program?
Camel Case.
- What is GIT?
– Git is a distributed version control tool that is used to store different versions of a fie in a remote and local repository.
- How does GIT distinct from Github or Bitbucket?
– Github and bitbucket are tools that hold files in “cloud” or remote repository
- What is the command to initialize a GIT repo?
Gitinit and enter
- What is the difference between staging and committing in GIT?
Staging you are preparing your “package” and committing is officially transferring it.
85.
title 