# Final Project.

For my final project, I wanted to recreate one of my favorites all time games that I had played since an early age. the snake game was a very popular game in the 90s and it is still today.

by using multiple functions and conditional statements. I created a simulation that will allow a rectangular shape move around the canvas edges simulating the snake.

after creating my set up function with a canvas of (600,500) I will then create some variables and give them value that will allow my boolean method to take action when creating my snake functions. such as movements.

next I will add my array method that will help me display text in my canvas with my name. The “for” loop goes through our arrays using the index set from 0. also I set the parameter and size by string index.

after that I will create my rectangle shape with the variables I created early this shape will move as the snake I am trying to accomplish. Also I will draw an ellipse that will be please on the top right corner looking like a target for my snake.

this will be my construction boolean statement that will allow my rectangular shape to move from side to side shifting directions when hitting the corners. it is very important to right this if statements as it can’t damages our code. using the true or false method I stated by telling my square to go the right and stop when the square is bigger than the width it will stop and then I will change the speed of X to 0 and give the Y a speed of 5 changing the direction to the upper Y axis, the I wrote a statement that will stop my square when it hits the 200 Y axis and returning to the left by giving Y speed 0 and X speed 5, then I wrote a statement that when the x & are > than 1 will change the direction to the right living me with the last function that is if the square Y = 530 the square will stop. giving the illusion that the snake eat the fruit (ellipse).

last but not least my random function that will multiply the square giving me the illusion to where the snake already passed, the red, green and blue colors are set to 255.

this will be the result. the colors will be the snake trail, where it has pass and and the ellipse will be the target or where the snake is trying to go.

# Vestibule Assessment 3/20/19

1. What is P5? How is it distinguished from Processing?

P5 is a system that run libraries just like JavaScrip to make code more assessable to artist beginners educators etc and it distinguished by making the program more simpler

2. What does IDE stand for? Describe its components.

Stand for integrated Development Environment and it helps applications with tools like menu bar, project explorer tool box, text editor, etc

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

On the top left corner we have and option on file tap to save project also I will name it sketch.js as is simpler for programs to run it.

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

Libraries will help us with plug ins such as images, sounds especial canvas like 2d or 3d animations.

5. What do the triangle and circular shapes across the top of the P5 editor represent?

These represent the play animation for the code and to stop it.

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

On the top of the the processor we will have the option right next to auto save to rename our project

7. Describe the coordinate system in P5.

The system consist in a (X,Y) locations for point and objects to be located on canvas starting form the right top corner with a (0,0) ordination

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

function setup() {

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

function setup() {

createCanvas(400, 400);

10. Why are certain words in different colors in the P5 editor?

(r,g,b)

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

This are words store by the program to used anywhere in the syntax without needing a variable

12. How does order matter in P5?  Give an example demonstrated with code.

Order matter is very important for the sketch to follow the lines and had an outcome. If a line is missing or misplace it could give you and error and change the sockets outcome for example misplacing the background  will cover your objects and leave you with a blank screen.

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

function mousePressed() {.   Happen when mouse is fully pressed

if (mouseIsPressed) {   add another function to the statement for a continue loop

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.

/*This lines are ignore by the code*/

// speed = speed * -1;

16. Does whitespace matter in P5? Capitalization? Use code to demonstrate your response.

Variables, Operators, Logic

White space matter to help separate paragraphs of space, tab and line feed that have meaning and make it look neat and not crowder

Function draw() {

background(canvBGR, canvBGG, canvBGB);

stroke(circStroke);

fill(circR, circG, circB);

stroke(circStroke);

ellipse(circX, circY, circSize, circSize);

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

Variable can change depending on conduitons

Data types are arrays, booleans, values

Values are tributes that objects give to get access to indirect access

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

Let display.

let R=100

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

Can be set for a variable

Let a=10

Function setup() {

vreateCanvas(400,400);

Backeround(0);

Streake(255);

noLoop();

}

20. What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.

You declare a value beefier the function and give a value

x=10

y=20

21. What happens when a variable is attempted to be accessed outside of its scope?

Only global variables can be access outside of the scope A variable declared within a block of code has local scope, and is only accessible by other code within the same block

22. What happens when a variable is declared globally, but is not used?

The code will run the other functions

23. What value does var nums; have?

You can declare it as cordinates or color types

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

The logical operators for AND (&&) and OR (||) are used to combine simple relational statements into more complex expressions

If (i<= 70 II I >= 100 {

25. What is a boolean data type?

Is usually has a positle values depending on a true or false statement

26. List three examples of primitive data types.

Boolean, float, string.

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

let recX= 200;

let recY = 130;

let recStroke = 35;

let recCol= 250;

let recSize = 75;

let canvBGR = 0;

let speed = 5;

function setup () {

createCanvas(500,400)

}

function draw() {

background (canvBGR);

stroke (recStroke);

fill(recCol);

rect(recX, recY, recSize, recSize);

recX = recX – speed;

if ((recX > height) || (recX < 0)) {

speed = speed * -1;

background(10, 240, 10);

}

28. Describe the order of operations for: x = speed * 40;

Let rect

Let speed

Function setup() {

createCanvas(200,200);

Rect = (255);

X=width/2;

y=height/2;

Speed = 40

29. Write a code example that decreases a value by one using shorthand.

let x =10

x=x-5”;

30. What does the logical operator ! do?

We used else, else if, and, or to create a function stamens that if one doesn’t work try the other one

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

It references to a stamens that a function should be active when stamens is true is activated it for example    if ((recX > height) || (recX < 0)) {

32. How many if statements can you use? What is an alternative to the if statement?

you can used sevral computer will run to see if the conditionals are tru

33. What is the difference between else and else if? Use code to demonstrate your response.

Activation for one or other Staten depending if it meet the function. You can only used one else after that you should used else if you not computer will take first else.

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

Code with run thru all if Staten’s while code with take the first else statement

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

Code with run thru all if Staten’s while code with take the first else statement

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

While can execute any number of times by looping to the text expiresion

Let x =o

While x<10;

x=x+1

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

While help to get out of the loop when it gets to 10

x=2

For (let X=0, X<width, X=x+10)

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

38. What is a function?

Functions help draw and prices add on for specific target when added ousted of setup

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

Depending if you want to set variables outside or part of the function to create a sketch

40. What does the keyword function mean?

It begging the definition and structor of what your trying to build

41. What does the keyword return mean?

It helps a function to return a value

42. Write code that uses the keyword return.

a=10

b=5

Function multiplytwonumbers(a,b) {

Return result;

}

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

Function draw() {

Backround(200);

ellipse(10, 20,3040);

}

44. What is the distinction between function and method?

Function is a code that makes and object move while the method is the definition of the object

45. What is the distinction between argument and parameter?

Arguments are the value of the function and the parameter is where the function is going to be in.

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

Constructor of the class function

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

nothing will happen and no errors will be display

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

nothing will happen just take space.

49. What concept are functions useful for?

Objects/Classes, Arrays

functions help you create code and simplify it to not take plenty of space like arrays.

50. What is an object?

Objects are variables that discreve a data shape with size color etc

51. What data type is an object?

String,array,class,interface.

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

this are concepts that are useful for reusability and modularity

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

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

This.x

Also help to get into and object functions

55. What is the keyword new used for?

Refere to new objects that may be create or duplicate from

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

response.

Is a block of code that where an object is created.

57. What is the this keyword used for?

It references to this current object

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?

is a list of data that can make a whole of objects

60. What notation is used to denote an array?

is a system to store data in close columns brackets

61. How do data types impact arrays?

62. What is an index?

is the position of an item inside an array, a list, or other data structure

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

4 values for this array

Let nums = [100,80,50,20]

Function setup(){

}

Function draw() {

Backeround(0);   color black

rect(100,200,nums[3], nums[3]); rect will have the 20 value

Ellipse (200,200,nums[2],nums[2]); will have 50 value

}

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

Let nums = Can manipulate the locateon variables

Let words = manipulates phrases

Optional, except for Questions 66, 72-78 and 80.

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

Workflow

This are keywords to identify variable that could be more curate in the p5 while var is a more classic function used in java.

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?

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

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?

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

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

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

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

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?

# CocoaPods NYC Meet Up

Over the weekend, I had the opportunity to attend a meed up in down town New York. it was a great experience as I got the opportunity to see a tech office. it was big, clean, and very bright. I got to spend time with 3 great person who where working on projects individually using Javascript, I felt intimidated as they where very advance and had big projects already. I did not expect the meet up to be this quiet one thing that stand out was the showers in the bathroom, it seems like workers stay there till late and get.the change to shower if need it, that’s great. also they have like a little lounge with gaming system for relaxing.

there where few people who attended the meet up an I got the opportunity to meet this great person Cory Mcaboy. he was one of 3 person who where coding in the cocoa pods. he has a great personality always smiling he show me what he was working on. there was a big project he was trying to debug, it was part of his car dealer website name Askotto. which wasn’t official jet. he show me how he was using GitHub to host his progress and also share it with his friends for comments. Askotto is basically a car comparing website similar to autostrade.com where you can compare car dealerships prices all over the states.

He also show me his website where he had all of his projects and references for people interested in contacted him. I told me how he was working as a free lancer developer and now he just landed a job in a great company which he was very exited to start working for and show them his skills. in addition to his website he is very active in GitHub and slack where he share ideas with his parents.check out his website corymcaboy.com

# Code In The Dark Challenge.

Early this week, we got a challenge to identify and modify the code on the p5js birthday candles.

*we started first with by setting a variable for omg and mic that will be used latter to add an image to the canvas and set up micophone.

*the preload function was used to upload this image but there is also another way to do so, instead of a separate function line we will added to the create canvas line with the form.

```  loadImage('assets/laDefense.jpg', img => {
image(img, 0, 0);
```

we set up the microphone to receive input that will leather be used to change the image into a dark background giving the illusion as the candles being blown. also there is a console.log line (25) that execute the function when executed with a text “who turn off the lights” additional text is being added to the canvas with the tittle “don’t forget to make a wish when you blow the candles” An issue with event function is that you have to completely stop the draw loop and restart it and to clear the console you have to click the red play bottom on the top to start it over.

# Where I See Myself In 5 Years.

Im very grateful to have the opportunity to lean to code thought the TechHire program. i have always like how technology is changing the way we live.

for the past 7 years i have work in the hospitality business, fine destination restaurants that have gave me plenty of knowledge on fine cousin and costumer service, most of my clients have show me how great is to have a career on big companies that are changing the world. The company that has impressed me the most is Tesla. Elon Musk had created a company in a concepts of electricity instead of gas for the caring of the planet, Also he has articulated a concept for self driving vehicles that can drive using auto pilot setting. WOW. i will love to be involve in the coding that will be able to move this vehicles from destination A to B and learn more about how i can also be part of something big to come. I also believe Tesla can improve plenty of transportation issues like cost and travel time by applying this new technologies that i want to be part of all.

Not only that, he also is working in a new project name the boring company that is an infrastructure and tunnel construction company helping reduce traffic congestions by allowing cars to drop to the under earth layer where a tunnel can help you mo straght to a new destination with you own car.

Space X was a company they started to help nasa launch new technology rockets to space and be able to landed back with easy and intact without losing any parts that will cost millions to remake.

last but not least the hyperloop was a protect that Elon Musk wanted to add to his company but didn’t have the time or money to started, so he had the idea to give it away to anybody who could see his vision and bring it to live. the project will redefine the transportation system by drilling underground tunnels and have a train that will be suspended by magnets making it to slide at high speeds cutting travel time to less than an hour.

# My collaboration work with Sam

last week we have the opportunity to code in teams and i have the opportunity to be the scraper for Samuel who was the driver, we try to create a canvas that look like a piano and try to find ways to incorporate songs to the key notes unfortunate we run out of time and we have to move forward to the next section but we did manage to make the keys and piano look alike.

# working with P5js this week.

we learn plenty of new interest an arraya is a list of values that you should separate in comas inside of solit brakets. Arrays are simply store for multiple objects that can be organize in square brackets and can be aces in numerical index through the code. With the first item of the array starting at zero you can also create a loop.

Also we lear to add boolean to our code for true or false statements that can be interpret such as if this is true do this, this method could test a function and keep track of the process while addition or subtracting functions. in this example we can see that if the statement is true and the mouse will go in the middle of the rectangle the square will light a red color inside and if press the background will change to green.We can find more information on this site https://github.com/processing/p5.js/wiki/JavaScript-basics#data-type-boolean

# career exploration first week thoughts.

It was very excited and fritting at the Same time to be pick to try out TechHire this week. I always find Tech very interesting and complicated but doable thats why I never doubt myself to go on every time. My professors had been very helpful giving us plenty of resources to continue our education with website links, reference sheets and interactive videos that showed us what type of skill we can learn during this process.

I`I’ve always thought that I need it to be a genius to learn to code or Mohave a huge math understanding to figure out equation for movements but as I have move forwards with all the process, I find out all I need is dedication and skill for better understanding.

A great website that I had the opportunities to review was https://uncubed.com where I found plenty of students that graduated and are uploading their resumes with skills that they have learn in class. I have found many students that have started like me with little to no knowledge and are about to land a great carrier. I am great full to know that Laguardia can help me find a great company that can take my skills for future projects

I can set my mind for greatness using the acronym Smart which is short for Specific, measurable, attainable, realistic, time bound. Using this technique I can set realistic goals that I can find achievable and think about great work places that my skill and well understanding can used to improve their companies. I could set specific goals that I now I can achieve while deciding which areas I am most likely to follow along. I can also measure my goals as I go on to see if I have made great to little progress as I study for classes and projects.  Setting my mind to achievable goals that can give great outcome like learning 3d coding while reading preferences on p5js but also have to be realistic with which companies I like to pic for my future instead of thinking I have the skills to change the world as soon as I finish this program. I believe the most important part of this acronym will be figuring out what will be my timeframe because I can just do my regular hubbies and leave my reading for later knowing that I will be backup and not be able to sleep well which is a very important part of learning.

# Fun With Variables On P5js.

can used variables to declare something equals to some other date, and most of their variables we has seen previously in high school. by declaring an object let say number 5 as x the computer will identify everything you ad x as the number 5 so you don’t have to remind it all again. it can also be a shape or a person for example x=dinosaur or x=jhoan, now the computer will identify your character every time you type x to a set of code just to simplify the code you are trying to interpret. back in the days we used to have var as the variable but now we used let to start the process. For more information you can refer to this link. https://github.com/processing/p5.js/wiki/JavaScript-basics#variable-names

# Having Fun With P5js March 12.

We can referee to graph bars from our middle school to identify the way computers think when making lines draws and shapes. los of the time computers read shapes locations from left to right (x) up and down (y)

in this example we can see a canvas with a size of 400 high and 400 wide. Also we have a circular shape that has 3 variables the first is the horizontal movement (x) and the second the vertical (y) while the third child be the sizing of the shape.

We have plenty of codes that can form different shapes but not all of them have the same number of variables some has up to six like the triangles. you can also see references and samples by clicking this link. https://p5js.org/reference/

one off the interesting activities that you can do is interactive shapes that can move, rotate and change colors, this is a example of a well organize code that will bring circle shapes to live instead of just stay still. organizing your codes are very important for the functionality of the shapes, if there is a missing comma or a misplace function will damage the whole structure of your design.