Before we started to code in the dark challenge, we learned how to find exact coordinates for a specific location on the canvas. One way was to console.log your mouse coordinates to see exactly what pixel are you on. Another way was using distance and the Pythagorean theorem a2 + b2 = c2 and then you subtract the numbers and get the distance between the coordinates you are looking for.

The Code In the dark Challenge

The code in the dark challenge introduced a different aspect which was using our built in microphone function (see code)  function setup() {
createCanvas(600, 400);
mic = new p5.AudioIn();
mic.start();
}

That part of the code initialized the microphone to be ready for use. But before we go to setup, in the above lines we had to declare some global variables as well as initializing an object.

Where I see myself in the next five years is on a yatch somewhere on the pacific ocean. I will be the owner of my own business in the tech industry, having worked for an established company for a couple years and gaining very useful experience. I will have seen what kind of problems a business faces in the tech industry and ways of thinking on how to solve the issues.

I would already have a solid network in the tech field and know people with different strengths than myself, which will enable me to go from success to successful and stay there.

I am realistic and know that I will not ever know EVERYTHING there is to know about technology but I will know the right combination of people to bring aboard to my “startup” company to encompass EVERYTHING that is needed to know.

I will build my company from the ground up and have it become a household name in tech! (shout out to Steve Bezos!) Then after another 5 years have the company go public and watch the stock increase….dramatically.

It is either that or due to the amount of users we have using our product my company will be bought for multi millions and I become a philanthropist/socialite/full stack web developer entrepreneur extraordinaire!

Today we had an assignment to work in pairs of 2 and we would be either the driver of the code or the scribe and then switch. The driver would tell the scribe the exact code he or she would want written and then vice versa (see pic below)

The only correction I would have made was to create a constructor function for the rectangles and it would eliminated some line of code in the top. A constructor function is a template to be able to make more objects without having to write more lines of code. It is a special function to make objects for you.

We also learned about loops, Boolean variables, and conditional statements. Conditional statements are code that has specific conditions that need to be met for the action to be executed.

In this example (see pic above) there is a conditional if else statement which says as long as these parameters are met do this if anything else do something different. The next is for and while loops (see pic below)

A for and while loop is a method for counting and repeating a task. So while the variable is true, it will keep repeating the instructions that it was given. Lastly we went over Boolean variables (see pic below) .

A Boolean variable is a data type which functions as long as the values are true. They are used for conditional testing.  In the picture above if the mouse both on the x and y axis met certain conditions and it was true, then color would change in the rectangle. It is for instructions to be executed or not depending on its validity.

 

Arrays-

Working with P5.js is an awesome adventure and learning experience. I have been working on a few topics the past couple days and I will begin with an array. An array is a collection of values separated by commas inside square brackets (see picture below).

I wrote my name in the array. I then filled the background color green and used a for loop, which is a counter loop that executes as long as the condition is true. It goes through the array’s index which starts from 0 and counts up. I then decided on a text size and then used the pre-defined term text to print each string in the array with a specific space between each other and specific location.

Functions-

I then created a new code that defines and uses two functions (see picture below)

one function is mousePressed and the other is keyPressed. They both are events and get executed either when the user presses on the mouse or presses on the key that is indicated, for this example it is the left and right arrow keys. When the mouse is pressed in this code the background color changes as well as the ellipse color. When the left and right arrow keys are pressed the rectangle moves left by 100 pixels and right by 50 pixels.

Methods-Functions in an object

The next code I have written was an object that had at least one function (see pic below)

I created two objects with two functions one will move the objects and the other will display them. By creating these functions along in the object helps minimize writing verbose code which in the end makes it easier to understand and make the code modular.

Boolean variable with event driven function-

I then added a Boolean variable with an event driven function (see pic below)

so as you can see I have a Boolean variable which states if any key is pressed then there will be a change in background color and a yellow ellipse will appear at specific location. As well if the mouse is pressed there will be an event that takes place that will switch the background color again and a blue ellipse will appear in a specific location.  This was very interesting and exciting to see how these functions and variables interact with in the code.

My experience with the Tech Hire’s Career exploration workshop this past week has been very insightful and helpful to say the least. It has really started to create a foundation in my mind of what we (as students) should be thinking and researching when it comes to the tech industry. It also has made me want to actually visualize where I would like to see myself working in the future.

Ms. Daisha has shed light on being realistic with ourselves and also giving us invaluable insight on careers throughout the tech industry either for a seasoned company or a startup. This has made me very interested in doing my own research on what company I would like to consider my dream job and the steps that are necessary to get there.

We also were encouraged to reflect on ones self which has been a major part of the workshop. Realizing how every minute of my day should be accounted for and what I need to improve within myself to be successful not only for this program but beyond. I have become more eager and determined after this week’s workshop to stay focused and see this adventure to the end.

 

Today was very interesting with how we could manipulate the shapes that we create and have them move around our digital canvas. But not only that, we also can declare and assign variables to have specific values to perform operations in your code.

as you can see from the picture above we are creating two squares by assigning variables for coordinates of each square.  Now you might think since all the variables are 100 that both squares will be on top of each other, but wait and you will see why that is not the case.

here on line 13 we assigned a variable canvBG for the background color. You first write let then canvBG then in parenthesis you put a color in numbers to define the key for the variable’s specific color. You can use this method of defining a variable for commands like stroke, strokeWeight, fill, etc. In line 23 we used the variable for the color. Lines 24 and 25 we are defining variables for color of both squares, then in lines 26 and 29 use those variables for color. Line 27 is where I created the first square and I used the variables along with adding 20 pixels to move the one coordinate of the square as well as subtracting 20 pixels to move the other coordinate of the square then left the last two variables alone. Line 30 we created the second square but actually did the reverse math on the first two variables and left the last two alone. That is why when you run this code one square is not on top of the other. Now if we wanted these squares to move around all we need to do is line 28 and define the variable pertaining to the x coordinate with a constant subtraction of 2 and that in turn will make your shape move!

Shapes & Color

Today we learned how to create shapes and give them color on our digital “canvas” on P5.js text editor. We also learned through trial and error that code is read from top to bottom of the editor where you are writing it in and where you place each line of code will effect the outcome.

This is how creating a circle and square will look when you write it in p5.js

 

In that example I changed the background color by using the “R” “G” “B” color method which is essentially mixing Red Green and Blue and creating colors like that. I also created and ellipse which is a built in function that requires 4 parameters which are x coordinate on canvas, y coordinate on canvas, the height and width.

Now, the next example I manipulated the colors in the shapes I created on the canvas.

I used strokeWeight to make the outline of the shape darker, and then I used fill to create a color in the shapes, a circle and a square.

Order matters

The following example will show how the line order matters when writing code in p5.js and certain request that are written will be overridden if a request is written on a line that comes later in the code.

Each line number I wrote the background color on will affect the interaction of the canvas each a little different. If line 6 is active and no other line with background color is active it will run that color. But if line 11 like in this example is on as well as line 6, then once you run the program it will run line 6’s color but since draw is constant line 11’s color code will be what you see. If you put the background color on in line 13 then only after you click your mouse will you see the background change color.

A command line input was first the only way to interact with computers, then as technology started evolving it was used for Unix, Apple and PC’s. Now for the most part it is not used by users but mostly software developers to be able to perform functions not accessible using the Graphic User Interface. https://www.w3schools.com/whatis/whatis_cli.asp. CLI is used to find files, manipulate files, and to navigate through your whole computer’s system. When you first open up the command line you would want to type pwd then enter to see exactly what directory your in. Then you can move around by typing cd then the name of the next directory you would like to go to. If you want to go back you can type cd .. and you will go back one directory. If you would like to remove a directory or folder then you can type rm r- the name of the folder and then hit enter and it will delete. https://www.git-tower.com/blog/command-line-cheat-sheet/

In the picture above our some of the commands you would use in CLI.

P5 JS is a javascript library that helps you create your own code. It is now also a text editor. http://www.p5js.org/. It is used for an easier way of processing for artists, designers etc. https://github.com/processing/p5.js/wiki/p5.js-overview. You can use this to create a interactive page.

The p5.js website is very resourceful and can answer a lot of your questions of what and how to actually write code. There is a learn tab on the side navi bar as well as a reference tab. There in both locations you will find invaluable information on pretty much all the questions you might come across. 

I circled and used arrows to show the areas of the web page where you can really learn how to use p5.js as well as reading this blog!

Thanks for joining me!

Good company in a journey makes the way seem shorter. — Izaak Walton