LaGuardia TechHire -- Open Code, The Journey

Day 28: JavaScript Starts Now

With a new week came a new language, JavaScript. Today we finally went to JavaScript City. This language helps to make a page interactive that HTML and CSS cannot easily do. To start the day we learned about data types which come on a variety of formats.  These formats include: boolean, null, undefined, number, string, and objects. Booleans are concerned with logic, where they assign if something is true or false. Nulls are used when you want to specifically make a value, nothing. Undefined are a default in JavaScript because values usually aren’t automatically defined. Numbers are pretty self explanatory, they are actually number symbols such as: 1, 13, 28, 6, etc. Strings are concerned with characters and must go in single or double quotes. Objects are when you put values within a value. We spent the day focused on learning data types and objects because they are the foundations of JavaScript.

TechHire–OpenCode relies heavily on self learning and looking to outside resources. With only three weeks to learn three computer languages, I was glad to have another bootcamp that could clarify concepts I left class unsure of. Flatiron’s pre-bootcamp has been helping me greatly with HTML, CSS, and JavaScript. After class I hopped on Learn.co and did exercises that helped me understand the syntax of JavaScript. Since the IDE is very similar to Atom’s text editor, I could easily transfer my in-class learnings.

TechHire–OpenCode teaches me a lot, yet leaves a lot for me to learn on my own. Self Teaching is the main and most important lesson I have learned thus far. Through trial and error and looking towards the World Wide Web, I have gained an immense amount of knowledge. This fact may be worrisome, but I know after this program is finished I can find the tools to sharpen my skills.

 

LaGuardia TechHire -- Open Code

Day 23: Carmen Sandiego, Where are you?

Today our class was introduced to the inner workings of computers. For apple, we are working with MackBook Pros, the terminal is used to essentially command a computer to perform actions. Terminal was supposed to be practiced on the first day of the cohort, but obstacles arose. In a world of technology, it is important to know how to overcome or bypass difficulties for they are in abundance. Perhaps more important than our previous lessons, it was imperative that we followed instructions in the most meticulous manner. One wrong key stroke can cause havoc while using terminal.

On our very first lesson of the cohort we learned about file structure, and that same lesson was reinforced today. Files are usually made by right clicking to create a new folder or file. Today we learned how computers actually create and access files. A seeming unimportant word gained great importance, “Directory”. A directory is a cataloging system that connects file paths in a computer system.  During this class we learned various commands that are explained in this video by Code Academy. 

After learning basic Terminal commands, we headed over to Git. Git is a version of a Distributed Version Control System. That may seem like a mouthful, but Git it is a web developers dream. By using Git, a person can have access to the full history of their projects. When learning Git, Kurt explained it to us as a tree.

DisneyGrandmotherWillowAnim.gifTell me about it Grandmother Willow…

There is a master branch which relates to the trunk of a tree. The master branch is where the main project lies. Then there are branches of a tree which correspond to different versions of a project. Different branches, work off the current master branch and allow the user to make alterations without effecting the master branch where you want your final project to be. When you are truly satisfied with a version, or branch, you can merge it to the master. When you merge a branch to the master it becomes the updated version that your branches will be worked off of. This can be thought of as adding a ring to a tree trunk. It took a lesson on nature for me to understand Git, but there are computer written commands to bring Git into effect. Beanstalk Guides gives a great breakdown of Git commands and their use here

To solidify the lesson on Terminal and Git, Kurt gave us an exercise that brought me back to my childhood in the 90s. We played his version of “Where in the World is Carmen Sandiego?”. This wasn’t the computer game I remember, but it was technically a computer game. In Kurt’s version we went to GitHub and cloned files of data and hidden in these files was the elusive Carmen Sandiego. We searched each folder by changing directories and listing all hidden files within them. Sadly, I didn’t actually go to the countries that named each folder and file, but I did find Carmen Sandiego as I traveled through Kurt’s cloned files.

Screen Shot 2017-11-08 at 2.10.40 PM

 

Screen Shot 2017-11-08 at 1.57.35 PM

LaGuardia TechHire -- Open Code

Day 21: The Choice is Yours.

After a weekend of coding, I found that my insatiable appetite for food had translated to an insatiable appetite for web development. Monday’s are dreaded for most, but I came to class eager. Last week’s orientation an familiarization of the program allowed Kurt to jump right into the lesson. I was ready!

07f7cb47-d2d1-4f4f-a61b-6c257e459611

When starting a CSS stylesheet, we used to go element by element, customizing each one individually. There were a lot details that were standard unless you altered them. This inconvenience led us to the star selector * (No, I’m not talking about myself.). The star selector allows the user to target the whole stylesheet, this applies to CSS and HTML. That being said, watch out because it can lead to problems if you aren’t careful.  From previous exercises, I found two elements, in particular, that threw me off with there standard measurements: margin and padding. In star selector I can set both of these elements to 0%. Doing this removes the standard measurements and allows me to set set new values.


*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

It was day three and time to learn more advanced web making. Before moving into modern web development, we had to learn about the past. Float is a method of website making that is based on putting text around an image. This layout is often used for basic web pages that consist of a banner, aside (menu bar), main content and a footer; nothing too complicated. After this, I was ready for more, ready to step into 2017 of HTML and CSS. Tell me about flex!! (It’s true I need to go back to the gym, but can flex my website in the meantime!) Flex is used with a lot of current websites, especially those which feature columns and boxed content. With flex, order is extremely important. All items automatically have an order of zero,”0″. which brings things to the top of the page. When assigning a different number order, larger numbers go lower on the page.

Most websites want to give their viewers a method of providing feedback. This is usually done through forms, or an area to get in contact with the web page provider. These areas usually contain a space to enter your name, age, email, and other demographics. In fact, I provide a contact page for my viewers to Get in Touch!  When making a form, there are a few types of inputs you can provide. The three we worked with in class are text input, radio input, and checkbox input.

As the name suggests, text input is place where the user can type a message. An example of this could be writing a yelp review.

Screen Shot 2017-11-10 at 11.41.04 AM.png

Radio input is where the user can choose only one of the options provided. An example could be entering age range, a person cannot satisfy more that one of these options.

Checkbox input differs from radio input in the fact that the user can choose more than one option. An example of this can be used when ordering ordering pizza online. Here you can choose more than one option, go on, your tastebuds deserve it.

Screen Shot 2017-11-10 at 11.42.27 AM.png

Wed development is much like life, you have an endless amount of options and opportunities. I began this blog with a post asking “Who Will You Be?” and the choice is always yours. Life will present situations much like a form on a website. Sometimes you can answer with all the thoughts you hold. Sometimes you have to pick and choose one option over others. My favorite, sometimes you can choose as many options as you want. (All, nothing and everything in between.) I am glad I can see so many parallels between the craft I am learning and the life that I am living.

 

 

LaGuardia TechHire -- Open Code

Day 20: If You’re Learning and You Know It, Clap Your Hands!

Idleness is fatal only to the mediocre. -Albert Camus

It is a luxury to be sure in life, to know exactly what is to come. That being said, it is imperative to learn as much as you can about your environment regardless of its manifestation (e.g., physical, mental, social, academic, etc.). I never used Atom before this cohort and it was important for me to familiarize myself with the text editor. I downloaded the program on both of my personal computers and loaded the projects I had worked on in class.

Screen Shot 2017-11-09 at 3.20.18 PM.png

During my exploration of the program I found there was an option to download packages and themes that customize your experience. I downloaded the ‘monokai’ syntax theme which colored my text in a way that made it easy to distinguish between elements. This was a big help for learning new code.Monokai Kurt also introduced us to a color picker app called Sip. This application icon states at the top of my toolbar and whenever I want to pick out a color, it’s right there. A key feature of this app is being able to pick up colors from anywhere on my screen. Bam! Hexadecimal at my finger tips!

TechHire–OpenCode is a program that requires immense dedication. That being said it is important for me to give web development my all. Google is a great place to look for answers, but i wanted more to reinforce and learn new skills. The Flatiron School is a well established web development bootcamp based in New York City. Their school just launched a beta accelerated bootcamp prep. This bootcamp prep is meant to build a strong foundation before you tackle an official bootcamp cohort. At noon I attended an online lecture by the co-founder of the Flatiron School himself, Avi Flombaum! He was wonderful in the way he introduced us to new material and explained topics. Learn.co is an online platform made by the Flatiron School used for learning web development. During the lecture we were introduced to the Learn IDE. I found it comedic when Avi told us the IDE was based on Atom. Zing, another way to reinforce my skills with Atom!

It is the part of a wise man to keep himself today for tomorrow, and not to venture all his eggs in one basket. -Miguel de Cervantes

LaGuardia TechHire -- Open Code

Day 16: New Month, New Beginning

The start of the month is always the best time to start something new. Conveniently, November 1, 2017 marked the beginning of the TechHire–OpenCode cohort. The program was held in a new location which pushed me to explore Laguardia’s campus further. I saw familiar faces from the vestibule and it comforted me to know that some of my comrades made it to the program.TechHire--OpenCode FriendKurt, our new instructor eased the class into a new curriculum. We would leave Java momentarily and begin learning HTML and CSS. Luckily, I had completed most of the tutorials on these languages provided by W3Schools. I wasn’t walking on completely foreign terrain and I had steady footing as we moved along. Just as we strayed from Java, we also strayed from the Processing IDE. In effect, our class was introduced to a new text editor called Atomatom-logo.jpg

Screen Shot 2017-11-08 at 2.56.54 PMOur first lesson was on file paths and their great importance. It is crucial to organize your file paths together because your pages will be linked to one another. Atom does a very good job of displaying the file path and showing how folders and files nested or linked to one another.

Elements are written in tags that begin with a left angle bracket or less than sign ‘<” and have a right angle bracket or greater than sign after them. The elements within these brackets are called tags. In order to process a tag, there must be a closing tag. A closing tag is similar to an opening tag in that there is a forward slash before the element name. There are some elements like img (image) tags which are self closing.IMG_4343

For our first assignment, we were tasked with making a website. We opened The text editor and entered our first lines of HTML. Through this exercise, we learned about how to link images to our HTML file. Also, we learned about how to see our code they way it would be displayed on an actual webpage! Below I have the code I wrote and its translation to google chrome. There you can see different elements and how they are formatted as tags.

</pre>
<pre><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Website!</title>
  </head>
  <body>

<h1>Hello World!</h1>


 Howdy Human, How are you?

<ul>

	<li>I am Great</li>


	<li>I am Amazing</li>


	<li>I am Beautiful</li>

</ul>


This is how and who I am. Click <a href="https://developer.mozilla.org/en-US/" target="_blank">here</a> to really find out.
<img src="./images/earth.jpeg" alt="an image of the earth">

<h1>Hello Moon!</h1>


<h2>Hello Stars!</h2>

  </body>
</hmtl>

</pre>
<pre>

Screen Shot 2017-11-09 at 10.48.02 AM.png

LaGuardia TechHire -- Open Code

Day 14: The Waiting Game.

With the weekend over, my anxiety about the TechHire–OpenCode cohort arose. On the last day of the vestibule, we were told that our pending acceptance would be decided and communicated by Tuesday. It’s now Monday and I need answers. My mind went through a crazy whirlwind of questions. When will I find out? Will they notify people who were rejected? How long can I play the waiting game?image03.gif

During the weekend, everyone was booted from the vestibule slack channel and told they would be added to a new channel upon acceptance. Tomorrow might be the deadline, but come on! I alternated between compulsively checking my email and putting my phone on ‘do not disturb’ while I was in a separate room.   FullSizeRender.jpgMy patience, or lack there of, was soon rewarded with information regarding the TechHire–OpenCode cohort with Software Guild.There was no formal email. There was just a notification on my phone from the Slack application., a little orange bubble at the corner of an icon.I was added to a new slack channel. This channel was for the third cohort of the program. I was accepted into Laguardia TechHire–OpenCode with Software Guild. Though it wasn’t the formal acceptance I was hoping for, my excitement was not dulled! The formalities came later that day, so I was really in.

AVVww

 

I made it. Well, I made it in. Stay tuned for how I make it through.

 

LaGuardia TechHire -- Open Code

Day Ten: The Finale!

Since the beginning of the TechHire—Open Code vestibule, I have been learning the basics of Java applied in the Processing IDE. For our second coding assignment, with the help of Zein, I decided to create a screen that shows rain pouring. As I’ve documented in previous blog posts, creating this image was no simple feat. I spent days trying to get objects to move on the screen and improve my coding. Just in the context of this one sketch, I learned something new each hour. Even when I was away from the processing IDE, I had my pen and paper to trying to figure out improvements.

For our final project we were given a ‘prompt’ that really just gave us free range to create what we wanted. I was lucky for fluidity of this assignment, because I knew I wanted to continue working on this ‘RainPouring’ project. I mapped out my ideas on paper and tried to bring them to life.

The first task I wanted to accomplish was finding a way to have an umbrella on the screen without having to write so many shapes, which took up many lines of code. Again I find myself giving credit to Daniel Shiffman, because he taught me how to add images to my canvas. The first image I placed on the canvas was of an umbrella against a white background. This royally messed up my vision because it was an ugly box in the center of my background. I soon learned that there is more than one version of an image file. I needed to ditch jPEGs and find myself a PNG. PNGs preserve the transparency behind an image; I didn’t have to worry about a background. Lines 7 through 16 show where I declared and initialized the images I wanted for my project. Now that I had the image on the screen, I wanted to be able to do something with the umbrella. I learned that images work a lot like the familiar primitive rectangle. Lines 35 and 36 show where I call and use the image() function. By setting the image coordinated to the x coordinate to the mouse’s location (mouseX) I could make the umbrella move side to side. I didn’t want the umbrella to move up and down so I kept the y-coordinate at a constant.

</pre>
Droptop[] rDrop = new Droptop[400]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/

Star[] twink = new Star[300];

int screen = 0; //creates global variable for screen
PImage umpic; //here is where I declared the umbrella image
PImage tweetpic; //here is where I declared a bird image

&nbsp;

void setup() {
size (800, 600);
umpic = loadImage("yellow0.png"); //I loaded the image in setup as oppesed to draw
//used a png. file to preserve transparency
tweetpic = loadImage("tweet.png");

for (int i = 0; i < rDrop.length; i++) { //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
rDrop[i] = new Droptop();
}

for (int i = 0; i < twink.length; i++) { //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
twink[i] = new Star();
}
}

void draw () {

//=======gloomy sunday=====

if(screen == 0){ //The following code is for a the starting rain screen
//lines 19-21 are where we initialize the array within a loop
background(48, 88, 155);
imageMode(CENTER);
image(umpic, mouseX, 400, 291/2, 300/2 ); //picture of umbrella; follows the mouse along the x-axis, width and heighe/2

for (int i = 0; i < rDrop.length; i++) {
rDrop[i].display();
rDrop[i].move();
}
//clouds
fill(187, 189, 191);
noStroke();
ellipse(25, 0, 150, 150);
ellipse(75, 50, 100, 100);
ellipse(150, 0, 125, 125);
ellipse(775, 0, 150, 150);
ellipse(725, 50, 100, 100);
ellipse(675, 0, 125, 125);
/*order is still very crucial in the function of my code*/
}//close screen 0

&nbsp;

//=======sunny side no eggs =========

if(screen==1){ //this opens the second screen
background(139,223,255);
fill(250,243,28);
ellipse(400,75,300,300);
imageMode(CENTER);
image(tweetpic, mouseX, mouseY, 400/2, 400/2); //picture of bird; follows the mouse along the x-axis, width and heighe/2
}

&nbsp;

if(screen==2){ //this opens the second screen
background(71,61,95);
fill(209,207,204);

for (int i = 0; i < twink.length; i++) {
twink[i].display();
}
ellipse(400,75,300,300);
}
}//close draw

&nbsp;

void mouseClicked(){
background(255); //background flashes white to represent thunder
if ((mouseX >= 0 && mouseX<= 225 && mouseY>= 0 && mouseY<= 150))
screen= 1; //if the clouds are pressed it goes to sun screen
else if((mouseX>=600 && mouseX<=800 && mouseY>= 0 && mouseY<=150))
screen= 2;//if clouds are pressed it goes to sun screen
}
<pre>

The second change I wanted to give my project was to be able to change the weather from rainy to sunny. To do this I added a mousePressed() function. I wanted to be able to press a place on the screen and have the weather change. I chose to say that if I clicked the clouds something would happen. Lines 81-87 show the additions I had to make. In order to do this, I had to find the area that clouds covered on my canvas. I set parameters in the clouds that said if the mouse were pressed there something would happen. I knew I wanted it to be sunny, but the almighty question was ‘how’! After watching coding tutorials by professional coders on how to make complicated games, I began to get a grasp of the basics. It to me well over three hours to grasp these basics, but it did! I had to set up another screen. I created an int named ‘screen’ and assigned it the value 0. This can be seen in line 7. I had to then add this scene change to my if conditional statements. After each parameter of the where the mouse has to be pressed, I put ‘scene==1’ or ‘scene==2’. After learning how to do this, I got excited and decided to make two scenes! (Mind you, it’s now 9am)

Now that I had a new scene, I needed to decorate it. This wasn’t particularly difficult because I know how to create backgrounds and shapes. When it came down to actually writing the code, I had A LOT of difficulty. How to say this information is for one scene and this information is for another scene? If statements to the rescue! Lines 30-54 show my answer to this problem. I could place the information of a particular statement inside of an if statement that was specific to a certain scene. ‘If in scene 0, perform this. If in scene 2, perform that’. My first scene had the rain pouring and a moving umbrella. With the second scene I was able to make it turn into night where I had a moon and stars.

Screen Shot 2017-10-27 at 1.00.31 PM.pngScreen Shot 2017-10-27 at 1.01.03 PM.png

Below you can see the two classes I made, each has its own tab on Processing.

RainDrops:


class Droptop{
color c;
float xpos;
float ypos;
float diam1;
float diam2;
float yspeed;

Droptop() {
c = color(99,196,240,85);
xpos = random(width);
ypos = 0;
diam1 = 20;
diam2 = 30;
yspeed = random(1,4);/*i did not want to make this speed uniform
depending on the amount of blank() used*/
}

void display(){
noStroke();
fill(99,196,240,85);
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the circles
so I dont have to type it continuously*/
}

void move(){
ypos = ypos + yspeed;
if (ypos > height){
ypos = 0;
}
}
}

Stars:


class Star{
float xpos;
float ypos;
float diam1;
float diam2;

Star() {
xpos = random(width);
ypos = random(height);
diam1 = 10;
diam2 = 10;
}

void display(){
noStroke();
fill(255);
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the circles
so I dont have to type it continuously*/
}
}

Today’s presentation of our final projects marked the end of the TechHire—OpenCode vestibule. Each Participant was allotted seven minutes to present there project. These seven minutes included setting our laptops to the projector, talking through our code, running our code, and lastly a Q&A session. I am generally a great public speaker, but Friday had my nerves rattled. I felt the pressure. My presentation could make or break a possible invitation to the full TechHire—OpenCode program. I felt the pressure. After setting up my laptop, my anxiety steadily receded. I was able to talk through my code in a manner that showed my understanding and dedication to the project. I was surprised to hear subtle gasps when I showed the interactivity portion of my sketch. There was less than a minute left for Q&A and I was able to still answer two questions without gabbling. My supportive classmates gave me a round of applause, which erased all doubt about the quality of my project.

These past two weeks have taught me so much in the world of web development. I learned about job placement and techniques in coding. The most important lesson I learned during my time with TechHire—Open Code is that there is no limit to what I can accomplish if I put my mind to it.

LaGuardia TechHire -- Open Code

Day Nine: My Road to Success!

First stop: Inspiration

Merriam Webster defines inspiration as the action or power of moving intellect or emotion. I gain inspiration from the things I hear, see, read, and feel each day. Below are some quotes that I find inspirational.

No one is dumb who is curious. The people who don’t ask questions remain clueless throughout their lives -Neil deGrasse Tyson

You should never view your challenges as a disadvantage. Instead, it’s important for you to understand that your experience facing and overcoming adversity is actually one of your biggest advantages. -Michelle Obama

When we drop fear, we can draw nearer to people, we can draw nearer to the earth, we can draw nearer to all the heavenly creatures that surround us. -bell Hooks

I’m rooting for everybody black. -Issa Rae

 

Second Stop: Motivation

Google defines motivation as the reason or reasons one has for acting or behaving in a particular way.  There are two types of motivation; intrinsic motivation and extrinsic motivation. Intrinsic motivation refers to the reasons within yourself that fuel a specific behavior. Extrinsic motivation refers to the reasons outside of yourself which fuel specific behaviors.

My intrinsic Motivations:

  • I want to better my environment and create a positive community.
  • I crave learning and I do not want to limit my mind
  • I do not want to be left behind as the world advances
  • I want to positively affect a wide range of people
  • I want to be the best version of myself
  • I want to live a comfortable life

My Extrinsic Motivations:

  • I want other to look up to me in a positive manner
  • I want to make my family proud
  • I need money to live comfortably (capitalism is the worst)

Third Stop: Resources

I believe true success can not be obtained alone. There is a saying that says “it takes a village” to show that it takes a group of people to perform a task. Other people may not actively be apart of a task, but they do contribute to your experiences. I have written lines of code on my own, but I gained the knowledge to do so from my peers and other resources. Resources to not only have to be people, they can extend to just about anything.

People:

  • My Family (Including my dog, Oliver)
  • My partner
  • My friends
  • My colleagues and classmates

Online Resources:

LaGuardia TechHire -- Open Code

Assessment

System, Environment
1. What is Processing?
Processing is a program that accepts compiled code and runs it. Processing is geared towards artists and creative developing.

2. What does IDE stand for? Describe its components.
IDE stands for Integrated Development Environment.  An IDE contains a code editor, a compiler which interprets a specific language, and a debugger which helps indicate errors in code.

3. What is a mode in Processing? Which is the default mode?
A mode is the type of processing that Processing will work on. For example, Processing currently has four modes; Processing, p5.js, Processing.py, and Processing for Android. The default mode for Processing is Java.

4. How do you save a file in Processing? What convention might you use?
To save a file in processing, you go to the toolbar at the top then click: File > Save As > Save. A convention one might use is ‘camel casing’ where the start of each new word in the file name starts with a capital, “SaveThisFile”. Another convention is to enter an underscore in place of a space, “save_this_file”.

5. How do you export a Processing file?
To export a file, go to the menu bar then click: file > export application > export. You can choose the platform you want the file to be compatible with and if you want presentation mode (the code will be full screen when run)

6. What is a library? How do you access and use a library in Processing?
A library is where there is added code that wasn’t originally built into Processing. You can access libraries by going to the menu bar then clicking: sketch > libraries. This will then import that library into your sketch, so it can be used. After importing the library into your skets, you can then begin to use is properties and functions throughout your code.

7. Where is the color picker in the Processing IDE?
The color picker in Processing can be accessed by going to the menu bar then clicking: tools > color selector.

8. What do the circle, triangle and square shapes across the top of the Processing editor represent? The circle represents running your code that was compiled in the editor. The square represents stopping the code that is run so it doesn’t keep running in the background of your process. The circle with a butterfly symbol inside represents a debugger where it will help detect possible problems in the code.

9. How do you add and name an additional or new tab in the Processing editor?
To add a new tab, you can click the downward pointing triangle next to the sketch currently open. The downward pointing triangle will provide a menu where you can add and rename tabs.

Coding Basics
10. Describe the coordinate system in Processing.
The coordinate system in Processing is similar to the cartesian coordinate system in how it is noted; (x-coordinate, y-coordinate). The top left corner of the canvas is the point (0,0). Moving to the right and bottom of the canvas increase the value of the coordinate. For example, a point in the middle of a 100 x 100 pixel canvas will have the coordinates of (50,50)

11. What is the difference between an active and static sketch? Use code to demonstrate your response.
A static sketch is only drawn once. An active sketch contains a draw function where Processing will continuously draw what is written.

12. What is the general syntax and structure for a line of code? Use code to demonstrate your response.
The general syntax of a line of code has a function, values within the parameters of a function, and a semicolon.

line( 23,40,60,40);

A line is a function of what is  to be drawn. The numbers data in parentheses follow the parameters of the function so it knows how to perform the specific function. The line function knows to connect the coordinate (23,40) to the coordinate (50,40). A semi colon is necessary because it completes a specific line of code.  

13. What is the general syntax and structure for a block of code? Use code to demonstrate your
Response.
The general syntax of a block of code is a cluster of lines of code. There are still functions, data inside the parameters of a function, and a semicolon. Blocks of code differ in that they are contained within curly brackets ‘{ ‘. Blocks of code introduce using tabs for aesthetic reasons to show that something is “nested” or within a function.
The curly bracket after ‘voidsetup()’ shows that the following lines of code will be performed within the setup function. The closing curly bracket ‘} ‘ shows the end of the block of code. Lines of code written after a closing bracket are not being used as part of that specific function.

void setup() {
 size(300, 300);
 background(0);
}


14. Why are certain words in different colors in the Processing editor?
Processing understand that there are specific functions and keywords that are used often. They are in certain colors because they are already defined by Processing ‘behind the scenes’.

15. What is a system or reserved word in Processing? Give an example.
A reserved word are a series of characters that Processing recognizes as a defined word. They are reserved in the way, that they cannot be used again for purposes that aren’t already specifically defined. An example of this is the word ‘background’. Processing has already defined this as a function to describe the color of the canvas, which is why it appears in blue font.

16. How does order matter in Processing. Give an example demonstrated with code.
Order matters in Processing because code is read line by line. It will show the action of later which can give the appearance that a previous line of code was not completed. When the code below is run, the viewer cannot see the first circle written. Processing performed the lines in order, so the second and larger circle was drawn over the first one. When the order of the circles are switched, the viewer can then see both circles.

void draw() {
 background(48,88,155);
 stroke(30,104,229);
 fill(99,196,240);
 ellipse(50,10,20,30);
 fill(187,189,191);
 stroke(167,171,173);
 ellipse(0,0,150,150);
}


17. What is the difference between mousePressed and mousePressed()? Use code to demonstrate your response.
‘mousePressed’ is a variable and ‘mousePressed’ is function. mousePressed can be used in the parameters of another function. The example below puts the variable ‘mousePressed’  in the parameters of an if statement. When mousePressed is

void draw() {
 if (mousePressed) {
   background(255);
 } else {
   background(255, 0, 0);
 }
}

In this block of code mousePressed() is superseded by ‘void’ to prevent a return value. noLoop(); and background() are put into the mousePressed function. That cannot be done with a variable.

void mousePressed() {
 noLoop();
 background(0);
}


18. What called function must always be first in setup()?
The function size() must always be called first in setup().

19. 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 noted by two forward slashes ‘//’ at the beginning of the comment.  A block comment is noted by ‘/*’ at the beginning of the comment and ‘*/’ at the end of the comment.
Below is an example of both methods.

 void display(){
   noStroke();//there is no outline for the rain
   fill(99,196,240,85);//this shows the fill of the raindrops
   ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the raindrops
   so I dont have to type it continuously*/
 }


20. Does whitespace matter in Processing? Capitalization? Use code to demonstrate your response.
Whitespace is necessary in web development for readability of the code. Capitalization is very important to keep track of in Processing. A function will not be recognized if the first letter is capitalized. Processing did not register or color the background when the draw function was capitalized.

void Draw (){
 background(48,88,155);
}


Variables, Operators, Logic
21. What is a variable? What is a data type? What is a value?
A variable holds the place of a value. And a data type kind of value. An example of data type is int for integers or whole numbers. Another example is float for numbers that contain decimals. A value is a character (numbers or letters) assigned to something else.  

22. What is the difference between a system variable and one that you define? Use code to demonstrate your response.
A system variable is already defined by Processing and it is a reserved word. An example of this is height. Processing knows that height is based of the canvas size.  ypos is a variable that I defined. Processing doesn’t know that ypos = 0 until I define it myself in the IDE.

void move(){
   ypos = ypos + yspeed;
   if (ypos > height){//this loop stays in effect as long as the raindrops are below the height
     ypos = 0;
   }
 }


23. What is scope and how does it impact code? Use code to demonstrate your response.
Scope tells Processing where it can find the definition of certain values and where those values can be used. A global variable can be used anywhere in the code, where a local variable can only be used within the function { } it was defined.

float x = .25 //global variable
void
 setup(){
size(600,600);
}
Void draw(){
y=60; //local variable
line(14. y, 97, y);
}

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

Declare is calling the value. Initializing is assigning a value to the variable, Using a variable is putting it in a  function to be used as the value assigned to it.

float y; // declare
float y = 24 // initialize
point(60, y); // use

25. What happens when a variable is attempted to be accessed outside of its scope?
If it is a global variable, the program will run as intended (assuming there are no other conflicts). It is is a local value, Processing will say the variable cannot be found.

26. What happens when a variable is declared globally, but is not used?
If a global variable is declared but not used, nothing happens to the functionality of the program. You just added an unnecessary line of code.

27. What value does float nums; have?
float numbers can be integers or decimals.

28. What are operators in Processing? Use code to demonstrate your response using at least one operator.
Operators are math symbols used in Processing to to articulate something with minimal characters. The forward slash represents division. The if statement loops at half the width of the canvas

 void move() {
   xpos = xpos + xspeed;
   if (xpos > width/2) {
     xpos = 0;
   }
 }


29. What is a boolean data type?
A boolean data type can only be defined as true of false.

30. List three primitive data types.
Boolean, float, integer

31. Write a code example that increments a value by 5.
This line gets shorter by 5 pixels. The first coordinate moves to the right.

float x = 4;

void setup(){
Size(200,200);
}
void draw(){
line(x,20,150,20);
x+=5;
}


32. Describe the order of operations for: x = speed * 40;
Processing first searches the value of speed. Next Processing multiples that value of speed by 40. Finally, it inputs the product as the value x.

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

float y=4;

void setup(){
size(400,400);
}
void draw(){
line(0,y,300,300);
y-=1;
}


34. What does the logical operator ! do?
The exclamation point acts as an inverse operator

Control, Iteration, Structure
35. What is an if statement? When should it be used? Use code to describe its syntax.
An if statement represents a conditional statement. It tells Processing when to perform specific code.

void draw() {//void prohibits return value
fill(175);// the color of the circle is gray
ellipse(50,50,25,25);//circle in the center of canvas
  if (mousePressed) {//if the mouse is pressed
    background(0,0,255);//background is blue
  }//close if statement  
}


36. How many ifs can be used in an if statement?
An infinite amount of if statements can be used.

37. What is the difference between else and else if? Use code to demonstrate your response.
An else if statement continues to check if statements are true. An else statement represents the end and processing will skip other if statements.

void draw() {//void to prohibit a return value
 background(345, 24, 112);//the original background color
 
 if (circleX > 400) {//if the circle x-coordinate is greater than 400pixels
   background(175);//then the background is grey
 } else if (circleX > 200) {//or if the circle x-coordinate is greater than 200pixels
   background(241, 141, 0);//then the background is orange
 } else {//otherwise
   background(0, 0, 255);//the background is blue
 }


38. What is the difference between code with several consecutive if statements and code with several else if statements?
Processing will check each If statement independently. Processing will stop checking else if statements, once it finds one that is true.

39. What is a while loop? When should it be used? Use code to describe its syntax.
A while loop says that as long as this is happening, do something else. It should be used when you have multiple variables.

void draw() {//void prohibits a return value
 background(242, 231, 5);//The color of background is yellow

 int y = 0;//give y the value of zero '0'
 int x = 0;//gives x value of zero '0'
 while (y <= height) {//says as long as the y is less than height
   stroke(0);//black ouline
   strokeWeight(3);
   fill(230, 158, 245);//purple inside the square
   rect(x, y, 50, 50);//begins at the point (0,0) and radius of 50
   y = y + 50;//draw another box 50 pixels beneath previous square
   x = x + 50;//draw another box to the right of previous box
 }//This closes the while loop
}//closes draw function


40. What is a for loop? When should it be used? Use code to describe its syntax.
A for loop says as long as one thing is true, perform something. A for loop should be used when you know how many times you want it to run.

void draw() {//void prohibits a return value
 background(242, 231, 5);//The color of background is yellow

for (x = 0; x < width; x +=50) {//give x value of 0, x is less than 0, assigns new value of 50 to x
    stroke(255);//outline is white
    fill(random(255), random(255), random(255));//gives the horizontal square random color
    rect(x, 300, 50, 50);//starts at coordinate (0,300) and has a radius of 50
    x = x + 50;//says to draw the next square 50 pixels to the right of previous square
  }//closes the for loop
}//this closes the draw function


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

void draw() {
 background(random(255), random(255), random(255));
 strokeWeight(10);
 stroke(255);

 for (int i = 0; i <= width; i += 100) {
   for (int j = 0; j <= height; j += 100) {.
     fill(mouseX, random(180,255), mouseY);
     rect(i, j, 50, 50);
   }
 }
}


Functions
42. What is a function?
A function is a command that Processing completes.

43. What is the difference between a function or method built into Processing and one that you define?
A predefined function already has parameters or specific arguments it will accept. The user has to create definitions for the arguments a function will take if they create an undefined function.

44. What does the keyword void mean?
The keyword void prohibits a return value

45. What does the keyword return mean?
The return keyword gives back the value you indicate.

46. Write code that uses the keyword return.

Void setup(){
size(400,400);
}
void draw(){
If mousePressed== true){
background(255);
Return;
}
fill(255,0,0);
ellipse(200,200,100,100);
}


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

48. What is the distinction between function and method?
A method is only defined in a class, a function can be called anywhere.

49. What is the distinction between argument and parameter?
A parameter is the data input. An argument is the variable defined for the function. 


50. What do the () in a function call or definition indicate?
This is where you input an argument. 


51. What will happen if you call an undefined function?
The debugger will say that a function is undefined and it will not run. 


52. What will happen if you define a function, but do not call or use it?
The debugger will give you an error.

53. What concept are functions useful for?
Functions help the code to run in a cohesive manner.

 Objects/Classes, Arrays
54. What is an object?
An object is one instance of a class you have created.

55. What data type is an object?
An Object is a class data type. The class data type is defined by variables you choose. Objects are essentially variables.

56. What concept are objects, classes and arrays useful for?
Objects, classes, and arrays are used to simplify and organize code, especially code that will require you to use something many times.

57. What is the difference between an object and a class? Use code to demonstrate your response.
A class describes an object.

This is a class:

class Droptop{
 color c;
 float xpos;
 float ypos;
 float diam1;
 float diam2;
 float yspeed;
 
 Droptop(float tempX, float tempYs){ /*float tempX and float tempYs are placed here
 so I can alter the x position and speed easily in the parameters of my object. */
   c = color(99,196,240,85);
   xpos = tempX; //Here I assigned xpos as tempX so the value I plave in () will come from here.
   ypos = 0; //I want all the rain to start from 0
   diam1 = 20; //I want both of my diameters to stay the same, so they are not 'temp'
   diam2 = 30;
   yspeed = tempYs; //Here I assigned yspeed as tempYs so the value i put in () will be taken from here
 }
 
 Droptop() { /*Here I made a second version of the same function,
 so it isnt necessary to fill (). This is called 'overloading'*/
   c = color(99,196,240,85);
   xpos = random(width);
   ypos = 0;
   diam1 = 20;
   diam2 = 30;
   yspeed = random(1,3);/*i did not want to make this speed uniform
   depending on the amount of blank() used*/
 }
   
 void display(){
   noStroke();
   fill(99,196,240,85);
   ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the circles
   so I dont have to type it continuously*/
 }
 
 void move(){
   ypos = ypos + yspeed;
   if (ypos > height){
     ypos = 0;
   }
 }
}

This is an object:

Droptop[] rDrop = new Droptop[200]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/

void setup() {
 size (800, 600);
 for (int i = 0; i < rDrop.length; i++){ //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
 rDrop[i] = new Droptop();
 }
}


58. What is dot syntax? Use code to demonstrate your response.
Dot syntax is how someone can access a function that is in a class.

void draw (){
 background(48,88,155);  
for (int i = 0; i < rDrop.length; i++){
 rDrop[i].display();
 rDrop[i].move();
 }
}


59. What is the keyword new used for?
The keyword ‘new’ is used to create a new object.

60. What is a constructor? Where and when is it used? Use code to demonstrate your response.
A constructor is an instance of a class. It is the template from which an object is defined and made.

61. Organize original code to include the main program in one tab and a class in another. Use in-line comments to walkthrough code.

62. What is an array?
An array is a list of data.

63. What notation is used to denote an array?
Brackets ‘[ ]’ are used to identify an array.

64. How do data types impact arrays?
Data types say the kind of data that is inside an array.

65. What is an index?
An index is one place in the list of data within an array. The index starts at the position of zero ‘0’.

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

Droptop[] rDrop = new Droptop[200]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/

void setup() {
 size (800, 600);
 for (int i = 0; i < rDrop.length; i++){ //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
 rDrop[i] = new Droptop();
 }
}
 /* this shows how to call object in setup
 rDrop[0] = new Droptop(40,4);
 rDrop[1] = new Droptop();*/

void draw (){
 background(48,88,155);
 
 //l initialize the array within a loop
 for (int i = 0; i < rDrop.length; i++){
 rDrop[i].display();
 rDrop[i].move();
 }
 
 //clouds
 fill(187,189,191);
 noStroke();
 ellipse(25,0,150,150);
 ellipse(75,50,100,100);
 ellipse(150,0,125,125);
 ellipse(775,0,150,150);
 ellipse(725,50,100,100);
 ellipse(675,0,125,125);
/*order is still very crucial in the function of my code*/
}


67. List two or three functions that can be called on an array. Describe how they manipulate the array
sort(); this will order an array in a specific way.
expand(); this will increase the size of an array.

LaGuardia TechHire -- Open Code

Day Eight: I need ‘Array’ to get through this!

Humor is everywhere in that there’s irony in just about anything a human does. -Bill Nye

giphy (3).gif

After spending my weekend in a constant flux between sleeping and feeling guilty for sleeping, it was very difficult to keep from laughing during today’s career training portion of TechHire–Open Code. We focused on the imposter syndrome, productivity and being able to work on your own, as a portion of the program will be remote. I spent the whole weekend in a personal crash course on accountability and productivity. How’s that for irony!

The imposter syndrome is prevalent within the web development community.  The feeling of fraudulence often comes from a person believing that they do not deserve praise or title. People who experience this often attribute their success to circumstances distant from themselves. By doing this, ‘imposters’ do not have to internalize compliments. High achievers are a main demographic of imposter syndrome sufferers. Web development is a difficult field that only has room for high achieving individuals. In the past couple decades technology has progressed at an exponential rate. New technologies are being invented and implemented everyday while web developers are required to have a firm grasp on this ever changing technology. Entering the web development profession by means of a bootcamp might intensify the imposter syndrome because it is not a ‘traditional’ education. Feelings of doubt can easily seep into the psyche when a person feels amateur despite their actual work and knowledge. A video by Meg Duffy, dean of students at Grace Hopper Program, provides tips to combat the imposter syndrome for bootcamp students and aspiring web developers.

One cliche phrase that describes me well is ‘Jack of all Trades’. When I am faced with a concept that I cannot easily grasp my the world seems to tilt one degree about its axis. This shift is usually due to frustration and only takes a moment to recalibrate. Never the less, the shift is there and I sometimes feel like an ‘imposter’ myself. When beginning this program I was shocked at how difficult it was for me to grasp certain concepts. There are times where I have gone home without fully understanding of topic. Today was one of those days. During the web immersive portion of the day, I ‘learned’ about objects, classes, and arrays. As my luck would have it, our class was given an assignment to include these new topics in our code. My day stuck to the theme of irony, as we reviewed arrays at the tech event I went to after class. (Read about that experience here) By the time I got home (10:30 PM) my mental tank was approaching E for empty. The main point of objects, classes, and arrays is to condense and better organize your code. Naturally (high achieving as I am), I decided to work with my most cumbersome code. My newly titled, ‘RainPouring’ project needed a serious renovation. After reviewing my notes and staring at my code for a solid hour, I was still at a lost for how to transform my code. Once again, the internet proved to be a saving grace with my coding pot holes. I won’t discuss my serious religious beliefs, but Daniel Shiffman may be a deity in the web development world, or at least my web development world. As one of the lead contributors to Processing, I didn’t doubt his knowledge. When I saw The Coding Train on YouTube, I quickly bought my ticket and hopped aboard. I found tutorials that answered my questions, gave effective guidance, and kept me engaged.

While watching Daniel’s videos I took notes and drew pictures to make sure I understood the information I was absorbing.

img_4247.jpg
Notes

 

The original code I was working with can be seen on my previous post; Day Three: Magic in the Number Three! The edits and comments to the my code today can be seen below. A new concept of a constructor tab was introduced to me today. Objects can be written in the original sketch page of a program, but it becomes a lot of work when you want to use more than one object. If you want to use 50 objects, a constructor tab is the way. Lines 12-13 show the code I would need to write if I did not have a constructor tab for only two rain drops. Two drops doesn’t count a rain. The constructor tab is necessary for what I am trying to accomplish.


Droptop[] rDrop = new Droptop[200]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/

void setup() {
size (800, 600);
for (int i = 0; i < rDrop.length; i++){ //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
rDrop[i] = new Droptop();
}
}
/* this shows how to call object in setup
rDrop[0] = new Droptop(40,4);
rDrop[1] = new Droptop();*/

void draw (){
background(48,88,155);

//umbrella
fill(234,242,12);
ellipse(400,300,300,200);

/*shapes to create umbrella and hide yellow, this code has to be
placed below the umbrella ellipse, so it is place 'over' the yellow*/
fill(48,88,155);
noStroke();
ellipse(290,325,75,75);
ellipse(515,325,75,75);
ellipse(440,325,75,75);
ellipse(365,325,75,75);
rect(252.5,325,300,75);

//umbrella holder
strokeWeight(4);
stroke(0);
line(402,315,400,400);

//lines 19-21 are where we initialize the array within a loop
for (int i = 0; i < rDrop.length; i++){
rDrop[i].display();
rDrop[i].move();
}

//lines 49-56 show just a fraction of the cumbersome coding from my original sketch

//clouds
fill(187,189,191);
noStroke();
ellipse(25,0,150,150);
ellipse(75,50,100,100);
ellipse(150,0,125,125);
ellipse(775,0,150,150);
ellipse(725,50,100,100);
ellipse(675,0,125,125);
/*order is still very crucial in the function of my code*/
}

Below is the code for the Constructor tab.


class Droptop{ //Here I am creating a class and making float values
color c;
float xpos;
float ypos;
float diam1;
float diam2;
float yspeed;

Droptop(float tempX, float tempYs){ /*float tempX and float tempYs are placed here
so I can alter the x position and speed easily in the parameters of my object. */
c = color(99,196,240,85);
xpos = tempX; //Here I assigned xpos as tempX so the value I plave in () will come from here.
ypos = 0; //I want all the rain to start from 0
diam1 = 20; //I want both of my diameters to stay the same, so they are not 'temp'
diam2 = 30;
yspeed = tempYs; //Here I assigned yspeed as tempYs so the value i put in () will be taken from here
}

Droptop() { /*Here I made a second version of the same function,
so it isnt necessary to fill (). This is called 'overloading'*/
c = color(99,196,240,85);
xpos = random(width);
ypos = 0;
diam1 = 20;
diam2 = 30;
yspeed = random(1,3);/*i did not want to make this speed uniform
depending on the amount of blank() used*/
}

void display(){
noStroke();
fill(99,196,240,85);
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the raindrops
so I dont have to type it continuously*/
}

void move(){
ypos = ypos + yspeed;
if (ypos > height){//this loop stays in effect as long as the raindrops are below the height
ypos = 0;
}
}
}

Below shows how my code runs.

Oct-26-2017 05-02-19.gif