For my final project, I had originally wanted to build an 4×4 grid, 16-pad MPC/drum machine type thing from scratch with code, however due to time limitations I had to scale back my project to just a 4-clip sample launcher. I had all these elaborate ideas about how each sound combination and pattern could be populated into an empty array that would repeat using a for-loop, but then reality slowly began to sink in about just how much extra work that would be with so little time.

However, with every drawback comes a silver lining; I now had so much more room to play with ideas! With extra real estate on the canvas from having 4 buttons instead of 16, I decided to create a sound visualizer on the lower half. Much like the mic input function that we used in the previous birthday “code in the dark” challenge, P5 also has a built-in function called p5.Amplitude() which measures the amplitude, or volume, of audio that is playing inside your browser window. I also opted to play around with some images and sound samples that I uploaded into the project’s “asset” folder that I created to hold external media for later use. Because I was now dealing with a clip launcher, and less of a drum machine, I uploaded some loops (instead of “one-shots”) that I could easily program to repeat when played. All of the (looped) samples are from the same collection and are roughly about the same BPM (140ish), so you could pretty much create a whole song just by clicking the buttons at the right time.

To create the buttons, I referred to P5’s DOM Library to see if there was a different way to make text “clickable” and interactive. Lo and behold, there’s a built-in createButton() method, which behaves pretty similarly to how buttons are created in HTML (<button></button>) that I’m already familiar with. I dropped a console.log(mouseX, mouseY) inside the draw function which turned out to be incredibly useful for locating exactly where I wanted the buttons to be located within the canvas. Because it was inside the draw function, the coordinates would constantly update onto the log as I moved my mouse over the canvas. Super handy and a bit faster than relying on hardcoded math trial and error.

Originally, I had wanted to create a waveform that was similar to the type you’d see on a DJ mixer or soundboard that shows all the different frequency peaks for highs, mids, and lows, but with less than a few hours to go on this project, that dream had to die (temporarily). To keep things simple, I decided to stick with a simple shape, either a line or a dot that would expand(rise) or shrink(fall) with the volume levels. I personally like symmetry and balance with proportions, so I went with programming a dot that would both do the job as well as remain visually-appealing. However, here’s where I started to run into trouble.

I’d realized that my value ranges for both the ellipse and the volume were completely different, since well, they’re completely different things with paramaters that don’t exactly translate well with each other by default. I had only ever worked with visual elements in P5 and never had an issue with writing code that affected one or both variables (ex: the sunRise function from a previous project that I blogged about last week that changed both the sun and sky’s sizes as well as their colors), but this was my first rodeo with sound. Thankfully, Dan from the Coding Train ran into the same exact issue in his video on amplitude analysis and explained how this would be the perfect opportunity to use the map function, which “takes a number with a particular range and maps it to another range.” I knew that my volume levels would be around 0-3, and the circle diameter would be about half the height (around 200). The code worked, however the dot wasn’t expanding wide enough to my liking, so I decided to bump it down to about a tenth of the max volume input (0.3) for maximum jumbo effect. Success!

Essentially, shapes and sound are like apples and oranges. They’re totally different and are even consumed different ways but if you slice them up using map, you can then reduce and throw them into a smoothie. (Note: I could be totally wrong about this but this is how I understood the concept and it seems to make sense.)

Now, here’s where the real magic happens. For each instrument, I created a separate function which will essentially trigger each instrument’s loop when the respective button is clicked. This will also change the button’s text from the instrument’s name to “stop”. Click it again, and the sample will stop playing (in theory), and the button’s name will change to something friendly because you and the instrument are buds now after jamming together. Depending on how loud or soft each sample originally was, I set the volume to an appropriate value so that they were all around the same audible level. However, I did run into a few problems with the samples: depending on how long the clip played or “relooped”, it would sometimes never totally stop. Stopping a clip that only played for 5 seconds was no issue, however if it played for longer than about 30, this problem would usually occur and more often with the drums and bass than the other instruments. Other than that, literally everything else was fine.

I also programmed a few other cool things that are triggered by the clip, such as the text color above the dot visualizer will change. Unique messages are also triggered by each instrument, and I spent entirely too much time thinking about what instruments would say if they were people. Because the default text color is red, I also programmed the color change value for each instrument to be the extreme opposite in either green or blue, which will normalize out to white after about 2 clicks. Depending on which instrument you decide to start jamming with, the text will change to either purple or gold, which coincidentally both happen to be previous university’s colors. This is probably the most pride I’ll ever show for my alma mater and this was done with minimal effort and completely by accident.

Some things I would like to improve if I had more time:

I. I would like to possibly make the instrument play/stop buttons a bit more exciting, maybe as clickable icons that are representative of the actual sound being played (i.e. a small drum kit for drums, mic icon for vocals, etc.) As functional and witty my current buttons are, they’re admittedly a bit boring to look at after a while.

II. Sliders that control different sound parameters such as low-pass filter, high-pass filter, panning etc, much like you’d find on a soundboard or DJ mixer to create cool sound effects. I’d probably also work on the original waveform idea as well. Unfortunately I think I spent a bit too much time on finding the right sample for each instrument and jamming out in my headphones during multiple test runs, so added bonus feature ideas had to be shelved for now.

III. Fix the obvious glaring bug of not having the looped sound stop playing when the stop button is clicked after the loop has played a few times. Even though it turned out to be a bit of a happy accident that resulted in an interesting “doppler/reverb” effect, I would like my code to actually do what I intended it do to in the first place (easier said than done, I know.) I’d also like to tidy some code and place the “buttons” onto their own .js page, and once I get to an advanced level, maybe create a feature that allows the users to upload and use their own samples.

Overall, I’m pretty happy with how everything turned out, and I’m kinda surprised I pulled off as much as I did to be perfectly honest. Aside from a few previously-mentioned pitfalls, everything came out just as well or better than expected, and I hope you have as much fun playing around with this as I do. Enjoy!

Note: All of the samples you hear in my project are from the artist Egoless’ Analog Sample Pack Vol. 2, which can be downloaded for free here.

Edit: I tried creating a waveform this morning and it worked! However, I’m not really happy with how it affected the overall aesthetic of my project, nor am I entirely sure just *how* it worked to be honest, so I’ve kept it commented out for now. Feel free to uncomment out these lines of codes and play around with things 🙂

https://editor.p5js.org/ttolentino/sketches/i8sz-1WnC

Monday night was a blast. Although class was long (as always), I had the opportunity to attend a lecture hosted by General Assembly that I found through one of my tech meetup mailing lists. The subject for Monday’s talk was Women in Technology, and would feature prominent female tech leaders who would speak about their careers and how they got there, and what challenges they faces as well as any advice they may for emerging fellow women in tech. As a future potential tech leader who also happens to be a woman, this was right up my alley. A few friends from class were also interested in the event and were able to tag along (shoutout to Marie, Gabi and Mike!), so it was nice to not have to go solo for a change. Plus there was plenty of rosé champagne on ice at the event to boot, which was just the icing on the cake.

The speakers for Monday night’s event were Christina Wick who is the VP of Engineering at Harry’s, as well as Janice Cheung who is the Engineering Manager at WeWork. Both women had come from relatively similar backgrounds, having been one of a handful of female Computer Science degree holders from prestigious universities for their graduating class. Although extremely qualified with a PhD, Ms. Wick spoke about how she had discovered how grossly underpaid she was at a previous company than her husband who held a similar position despite her having higher credentials. Ms. Cheung also spoke about how she was seen as an “overachiever” because of her success at work, and how self-advocacy in the face of toxic coworkers can be your biggest (and most important) asset.

Both women stressed the unfortunate fact that because the majority of the tech workforce is so overwhelmingly male, greater measures need to be taken to both promote and bring awareness to the importance of diversity and inclusion in the workforce. While this may sound like an obvious sentiment, this is easier said than done. Ms. Wick briefly mentioned that engagement needs to begin in the classroom, and even spoke about how her young daughter is being told that “girls can’t program” by her own peers and teachers (a ridiculous fact, considering that her own mother is the VP of engineering at Harry’s!) This needs to change by encouraging more girls to pursue STEM careers by, as she put it, letting girls play with “more legos, and less barbies” to encourage critical thinking and logic skills. Ms. Cheung also mentioned how her own daughter just wrote her first line of code in kindergarten, and how this could be a positive sign for things to come.

Overall, while none of what I heard at the talk was terribly surprising, it was certainly eye-opening to hear these things directly from women who are actively involved in the engineering community as tech leaders which proves that yes, all the things we’ve learned about inequality and discrimination are true. All the more reason for my Vestibule 7 crew and I to move forward and create the world we want to live in, where female, minority and/or LGBT members are more fully represented in the tech community. And we’re now more determined than ever to do so.

What is P5? How is it distinguished from Processing?

P5.JS is a JavaScript library that starts with the original goal of Processing to make creative expression with code accessible to users with non-technical backgrounds such as artists, designers, and students. Unlike Processing, there is an added interactive element in which you are not limited to the confines of your canvas and can use built-in functions and libraries that allow you to use your entire browser (i.e. microphone and webcam access).

What does IDE stand for? Describe it’s components.

IDE is an “Integrated Development Environment”. This consists of a source code editor, build automation tools, and a debugger such as console.log.

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

You can save your file by selecting the drop-down menu under “file” in the top left corner of your browser screen, or by typing command-s. Camelcase is a common naming/spelling convention in which the first letter of the word is lower-case and following words are capitalized with no spaces (ex: reallyCoolCode).

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

A library is a source of pre-written code which can be easily executed and allows for easier development. You can access and use the library by using methods to invoke the function (i.e. mic = new p5.AudioIn() activates microphone accessibility).

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

The triangle shape to the left means “play” or execute the code, and the square or “stop” ends the code and resets your canvas. Click the triangle to play your code again.

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

Click the > to the left of sketch.js (you’ll see it above the column with all the line numbers for your code) to expand the window. “Project-folder” should now appear to the left of >. Click > again, and select “add new file” or “add new folder” to create a new tab in the p5 editor.

Describe the coordinate system in P5.

The coordinate system in p5 starts from (0,0) in the bottom left corner of your canvas. Coordinates are set up using the convention of (x, y). Your x value is your width (left to right) and your y value is your height (down to up). Depending on how large your canvas is, your coordinate values may change.

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

Identifiers/variables must be declared first before values are assigned to them. Example: let x = 5

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

First variable, then value. If you are calling an argument, you must use the () to invoke the argument. Lines should be indented and curly brackets { } should be used within your block of code.

let x = 6

function

function addOne() {
if (x > 7) {
x++
}
}

Why are certain words in different colors in the P5 editor?What is a system or reserved word in P5? Give an example.

Depending on the context of the word within your code, P5 will recognize it as a certain type of code (i.e. variable, function, operator) and highlight it a certain color. Some special keywords such as “mouseIsPressed” are built-into p5 which means that the syntax cannot change for that word (ex: “let mouseIsPressed = x” would not be valid).

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

Order matters because certain code must be executed first before it can work later in your program.

/*calling the preLoad() function before loadImage() ensures that the image is ready for rendering in P5. this is placed before setup so that we can use a callback later*/

function preload() {
// Image source/credit: https://www.dgreetings.com/birthday/birthday-candles.html
img = loadImage(“assets/birthdaycandles1123.jpg”);
}

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

mouseIsPressed is a boolean value, and mousePressed() is a method/function.

function reset() { //added a reset function
if (mouseIsPressed) {
continue;
}
}

function mousePressed() {
circX = circX + 10;
}

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

The function createCanvas() must always be called first in setup. Without a canvas, we can’t draw() 😦

What is the difference between an inline comment and a block or multi-line comment? Use code to demonstrate your response.

An in-line comment starts with // and will only comment out one line. A multi-line comment begins with /* and ends with */ and can encompass multiple lines of code. Please see examples below.

//This is the line that sets the background color

/*EDIT- further revised with method functions that work! finally figured out how to properly use the .this keyword without breaking everything. Also added a reset function that activates when the spacebar or any key is pressed*/

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

Yes and no. As long as your code is formatted correctly, whitespace isn’t the biggest deal. Capitalization can cause problems however, especially when you start working with constructor functions. Javascript will then start to look for that capitalized function name.

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

A variable, simply put, is a placeholder for a value. A data type is the definition for that value, i.e. strings (words), numbers, boolean values (true or false). You can store multiple pieces of data within an array (let myArray = [0, 2, 4, 6, 12, etc.]) or within objects the latter can thought of as a collection of properties (let color = { R: 200, G: 0, B: 100 } ) An object can be thought of as a collection of properties.

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

A system variable or constant is a value that cannot be altered by the program during normal execution. For example, the variable “height” will never change as this measures the y value of your canvas. You can create and name new variables, however you must begin your line with the keyword “let”

let car = “Toyota” //we declared the variable car and assigned the string value “Toyota”

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

JavaScript has functional and global scope. Each function creates a new scope. Scope determines the accessibility (visibility) of these variables. Variables defined inside a function are not accessible (visible) from outside the function. Variables declared outside the function (global scope) can be accessed anywhere within your code.

//carName = “Toyota” is not accesible to code written here

function myCar() {
 let carName = “Toyota”;

 // code here CAN use carName (“Toyota”)

}

//carName is not accesible here because it is outside the functional scope

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

Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the let keyword. You can then initialize and use that variable later in your code as follows

let circ = {
x: 0,
y: 400,
diam: 2,
r: 255,
g: 20,
b: 25
}

let color = {
r: 0,
g: 0,
b: 0,
}

function sunRise() {
circ.x = circ.x + speed;
circ.y = circ.y – speed;
circ.diam = circ.diam + 1;
circ.g = circ.g + 1;
color.g = color.g + 1;
color.b = color.b + 2;
console.log(“It’s time to wake up!”)
}

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

The error message “undefined” appears.

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

JavaScript has a built-in garbage collection system that collects unused variables and frees memory. JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used.

What value does var nums; have?

This has a number value attached to it (i.e. 0, 5, etc.).

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

JavaScript operators are used to assign values, compare values, perform arithmetic operations, and more. The below operator ” || ” is a boolean logical operator which compares if either argument is true. This is called the “or” operator.

function mousePressed() {
if (mouseX >= width / 2 || mouseY >= height / 2)
if (mouseIsPressed) {
background(bgSwitch);
fill(0, 0, 255);
ellipse(width / 2, height / 2, diam, diam);
}
}

What is a boolean data type?

A boolean data type returns either of two values i.e. true or false. Boolean is used as a function to get the value of a variable, object, conditions, expressions etc. in terms of true or false.

List three examples of primitive data types.

true //boolean

false //boolean

char //stands for character, which can include integers(numbers).

Write a code example that increments a value by 5.

let x = 0

function incrementor() {
let x = x + 5
}

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

The * stands for multiplication, so therefore the value of x is whatever value was assigned to speed within the global scope, then multiplied by 40. There are no other arithmetic operators.

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

let x = 5

function makeFour() {
x = x–
}

What does the logical operator ! do?

! stands for “not.” I.e. != not equal.

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

An if statement is used to specify a block of JavaScript code to be executed if a condition is true.

function greeting() {
if (hour < 18) {
return “Good day”;
}
}

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

You can use as many if statements as you want, however it may be more beneficial to use “else if” or “else” statements to run different blocks of code for different arguments.

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

The “else if” statement specifies a new condition if the first condition is false. The “else” statement specifies a block of code to be executed if both the ‘if” and “else if” conditions are false.

if (age >= 21) {
greeting = “Welcome to the bar!”;
} else if (age = 20) {
greeting = “One more year til beer!”;
} else {
greeting = “No booze for you, kiddo.”;
}

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

With several if statements, only one of

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

A while loop is a line of code that is executed while the condition or argument is true. When that argument is met, the code stops.

while (i > 10) {
i++;
}

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

A “for loop” loops through a block of code a number of times. It has the following syntax:

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

for (i = 0; i < 5; i++) { text += “The number is ” + i + “
“;
}

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

function draw() {

// For every i add 60. Spaces rectangles out.
for (let i = 0; i <= width; i += 60) {
// For every j add 60. Spaces rectangles out.
for (let j = 0; j <= height; j += 60) {
// Fill based on a random value and the mouse position
fill(mouseX, random(255), mouseY);
// Draw at i, j for each rectangle’s x and y position.
rect(i, j, 35, 35);
}
}
}

What is a function?

A function is a block of code designed to perform a particular task. A JavaScript function is executed when “something” invokes (calls) it.

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

Functions and methods built into P5 cannot be renamed, changed or assigned new variables. A user-defined function can be changed as necessary.

What does the keyword function mean?

The keyword function tells the computer to expect a function to be called, and to then search for the code assigned to that function to be executed.

What does the keyword return mean? Write code that uses the keyword return.

The return statement stops the execution of a function and returns a value from that function.

function heightFinder() {
return height;
}

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

function draw() {
noStroke();
background(color.r, color.g, color.b);
fill(circ.r, circ.g, circ.b);
ellipse(circ.x, circ.y, circ.diam, circ.diam);
sunRise();
skyChange();
}

function sunRise() {
circ.x = circ.x + speed;
circ.y = circ.y – speed;
circ.diam = circ.diam + 1;
circ.g = circ.g + 1;
color.g = color.g + 1;
color.b = color.b + 2;
console.log(“It’s time to wake up!”)
}

function skyChange() {
if (circ.x > width || circ.y < 0) {
background(0, 255, 255);
stroke(40);
textAlign(CENTER);
text(‘Good Morning!’, 200, 200);
textSize(50);
}
}

What is the distinction between function and method?

A function is a block of code designed to perform a particular task. A JavaScript method is a property containing a function definition. JavaScript methods are actions that can be performed on objects.

What is the distinction between argument and parameter?

A parameter is a variable in a method definition. When a method is called, the arguments are the data you pass into the method’s parameters. Parameter is variable in the declaration of function. Argument is the actual value of this variable that gets passed to function.

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

The parentheses in a function call the parameter, or argument that is to be passed to the function.

What will happen if you call an undefined function?

You will receive an “undefined” error message.

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

Nothing if you run the code, however JavaScript’s built-in garbage collection will take care of unused variables and functions to free up memory space.

What concept are functions useful for?

Functions can be re-used in your code as many times as needed. This adds to the flexibility, or modularity of code.

What is an object?

An object is a placeholder for a collection of properties assigned to a certain item. These properties can be values of any type, including numbers, text strings, arrays, or even other objects, and functions.

What data type is an object?

It is a data type like an array, which is also a placeholder for multiple values/properties.

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

Modularity! They are all reusable code.

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

let circ1 = {
x: 400,
y: 0,
size: 300,
display: function() {
ellipse(this.x, this.y, this.size, this.size)
}
}

function draw() {
background(bG.R, bG.G, bG.B);
stroke(s.R, s.G, s.B);
strokeWeight(s.sW);
fill(color.R, color.G, color.B);
circ1.display(); //no “new” keyword or capitalization, not a constructor
}

function setup() {
createCanvas(600, 400);
for (let i = 0; i < 200; i++) {
stars[i] = new Star(); //constructor
}
}

function Star() { //yup definitely a constructor
this.x = random(0, width);
this.y = random(0, height);
this.display = function() {
stroke(random(255));
point(this.x, this.y);
}
}

What is the this keyword used for?

“This” is the object that “owns” the code.The value of “this,” when used in an object, is the object itself. In a constructor function, “this” does not have a value. It is a substitute for the new object. The value of “this”will become the new object when a new object is created.

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

Dot syntax is used as a property accessor. For example, in console.log(“Hello World!), the dot between console and log accesses the console, and logs the string “Hello World” onto the console.

What is the keyword new used for?

The new keyword is used in javascript to create a object from a constructor function. The new keyword must be called before the constructor function for it to run.

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

A constructor function is used to create multiple objects from the same property. For example:

function setup() {
createCanvas(600, 400);
for (let i = 0; i < 200; i++) {
stars[i] = new Star();
}
}

function Star() {
this.x = random(0, width);
this.y = random(0, height);
this.display = function() {
stroke(random(255));
point(this.x, this.y);
}
}

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.

<script src = “circ1.js” type = “text/javascript”></script> //this allows access to the tab

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

let circ1 = { //this would be within the circ1.js tab
x: 400,
y: 0,
size: 300,
display: function() {
ellipse(this.x, this.y, this.size, this.size)
}
}

function draw() { //this would be within the main program window
background(bG.R, bG.G, bG.B);
stroke(s.R, s.G, s.B);
strokeWeight(s.sW);
fill(color.R, color.G, color.B);
circ1.display();
}

What is an array?

An array is a special type of object which is used to used to store multiple values in a single variable.

What notation is used to denote an array?

let array = [ ]

How do data types impact arrays?

Depending on which variable types are stored within an array, this can affect the boolean value for your array. For example, an array that contains numbers and strings will not pass true if your function or argument is searching for numeric values only.

What is an index?

An index number is the position of the variable or value within an array. The index number always starts at 0.

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

let flavors = [“apple”, “strawberry”, “banana”, “grape”]

console.log(flavor[1]) //the flavor “strawberry” would print onto the console.

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

You can use array.length and array.push. Array.length returns the length or number of items in an array, and array.push will add (or push) a new element to the end of the array, increasing the length of the array by 1.

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

NPM is the world’s largest software registry which can be used for open source software development. Here is an example of a module that can be downloaded.

Bonus: List one text editor that can be used in lieu of an IDE. How can a P5 project be coded and run usinga text editor?

Repl.it is an online text editor (and one that I’m actually familiar with, for once.) You can run projects created in Repl by saving/downloading the file and uploading it into P5, or by copying and pasting your code.

What does CLI stand for?

Command Line Interface

How can the current directory be identified using the command line?How can the contents of a directory (current) be viewed?

$pwd – print current directory, then hit enter

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

The “make directory” command

How can recent commands be viewed on the command line?

You can use the arrow keys. By pressing the ARROW UP key, you can step through the last commands you called (starting with the most recently used). ARROW DOWN will move forward in history towards the most recent call.

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

The tab key will autocomplete for you.

What naming convention can be used to save an application or program?

From my understnding, camelCase is a viable option.

https://stackoverflow.com/questions/30840745/are-there-any-naming-conventions-for-command-line-arguments

I don’t think anyone in our class before today had “blown out” virtual birthday candles on a computer before, but we certainly have now. Today’s assignment certainly took code to a whole new level, especially when you have a classroom full of students literally blowing into their laptops in an effort to change things on their screen (seriously.) Have we finally lost it? Has the lack of sleep and overwhelming anxiety of learning JavaScript fundamentals in such a short amount of time finally took a toll on our behavior and mental health? Or are we so far into the future that we discovered ways to code with our…breath?

The answer is no or (maybe just a partial yes) to all of these. Today’s assignment was our first “Code In the Dark” challenge, which is essentially a blind code project (except we had a bit of guidance so we weren’t completely in the dark for our fist time, thankfully.) Rather than code from scratch completely, we were able to edit and brainstorm code based on the prompts given in the original code’s comments, and since it was Professor D’s birthday today’s challenge fit the occasion. Essentially, we were given a virtual birthday cake with a message prompt that said “Don’t forget to blow out your candles!”, and when the candles were blown (or rather, user blows into their computer), the canvas would turn dark and the message “Who turned the lights off?” would print onto the console.log. Amazing! Was this sorcery achieved by black magic? Nay, it was but a few lines of new functions we had never seen before which I will explain below-

Essentially, this code works by using the built-in microphone on your computer to detect the “blowing” sound made by the user. A built-in feature in p5 editor, let micLevel = mic.getLevel() is a functional method which measures the microphone’s volume input. When it reaches a certain threshold, in this case, louder than .7 decibels, the mic.stop() method tells it to stop listening. The screen goes dark thanks to background(0) which turns the canvas background black, and then console.log is upset at whoever turned the lights off (sorry console.) This chunk of code was originally inside the draw function, however I moved this line of code into a new function that I called “blowout”. It seemed more appropriate (to me, at least) as it has nothing to do with “drawing” the canvas but everything to do with blowing out the candles. I did comment out a nested reset() function towards the end of this, however we will come back to that later.

To keep things neat and slightly more modular, I also rearranged data such as text attributes in an object and kept this within the global scope. These could easily be found, called upon, and if necessary, even changed in different functions later in the code.

I had started playing around with the idea of a for loop for resetting the canvas, as one of the prompts was to find an alternative way other than the event-driven mousePressed loop() function which would reset (the canvas) when the user clicks their mouse within the canvas frame (wow I said canvas a lot.) My idea was to create an empty array called “seconds”, through which I could increment values by using a for loop. Once 10 seconds had passed, or the value was incremented by 10, the canvas would reset. Did it work? Of course not. But I’m working on it.

Edit: worked on it. Ditched the for loop idea and kept the mouse-driven event since it made much more sense from the user perspective. It was a valiant effort though!

With our first week in TechHire completed, we’ve had some time to reflect on our goals and the journey ahead. What the was motivation for applying to this program in the first place, and what do we hope to get out for it? And most importantly, what do we plan to do when we’re done with our program coursework and are ready to face the real world as freshly-trained TechHires weeks, months, or even 5 years from now? Employment as a software and/or web developer would be the obvious pragmatic choice since we’re all here full-time in an intensive “coding bootcamp”, however I’ve brainstormed a bit and came up with a few ideas of some roles and job titles I might personally want:

Product Manager, if I decide to expand upon my existing work experience in the “business” and “customer-facing” side of things. As mentioned in this AHA.io article, deciding which features to build and not to build is a crucial part of product management. Knowing how to build these features with code could only be more helpful, and is apparently not terribly common amongst current PMs. In fact, many often eventually wind up teaching themselves code on the job so that they can better understand the engineers’ perspective. This video on Uncubed by IBM also demonstrates that yes, it is possible to pivot from a software engineering background into product management if you do your due diligence and put in the extra work, so I’m feeling pretty inspired.

QA Engineer, or the person responsible for finding bugs in the code and the overall product development process. QA Engineers will often write A/B tests and analyze the results to determine what needs to be changed, and how. From my understanding, QA (which stands for Quality Assurance) is the copy editor equivalent in tech if web development were journalism, and software was a publication or newspaper. A good QA team is the last line of defense before releasing product to the public, so skills such as user empathy, logical problem-solving skills and the patience to fix all (or at least most) of the bugs are absolutely essential. And it’s always nice being known as part of the team who fixes problems rather than causes them!

Software Engineer. As mentioned before, this would be an obvious career path, however there are so many different types of relevant software engineering roles out there. These include Front-End engineering, Back-End engineering, Full stack, User Experience/User Interaction and even development positions in specific languages (i.e. Java Developer). If I pursue this route, I would most likely focus on fullstack since it more or less covers the full spectrum of different types of code and develops you into an adaptable engineer. Those skills could translate very well to any job, especially once I become technically-fluent. I’d be like a jane-of-all-trades in tech, which is totally rad.

These are all just ideas at the moment as to how I would answer the (in)famous “Where do you see yourself in five years?” question, so I’d still consider this a work in progress. Come back to me in a few weeks or months, and depending on how far I’ve progressed with my career goals, my new answers could surprise us all.

Earlier this week, we’ve learned how to use code to create shapes and colors in P5, and how declaring variables for certain values can provide more flexibility than having things hard-coded. In the latter half of the week, we expanded upon this by taking things a bit further, especially when we were introduced to boolean values, for loops, if/else statements, and all sorts of cool stuff that you can check out in this GitHub reference about using JavaScript in P5 here. However, to build upon Tuesday and Wednesday’s lectures on variables, we also learnt about arrays and objects. Both of these can be used as placeholders to store multiple variables (or even more arrays and objects) for a certain item or value, which can be super handy and much tidier/less cluttered than having tons of variables all over the place. Just as Marie Kondo recommends organizing related items in compartments within boxes, shelves drawers, etc. with her KonMari method, arrays and objects are useful ways of neatly organizing data.

One of the code projects I created this weekend as a homework assignment had to include an object with at least one function. When brainstorming ideas, I thought of a “sunlight simulator alarm clock” which uses light and visual cues to wake the user up instead of a loud, super annoying alarm. These do exist as an actual physical product and are based on the idea that waking up from sunlight is much more effective and in-line with our circadian rhythm, or internal body clock that naturally tells us when to fall asleep and when to wake up. However, since I can’t afford a natural sunlight clock yet, I figured why not build a digital one from scratch using code?

To build a sunlight clock, one must first have a sun! I created a digital sun by creating an object to neatly hold all of its variables into one place. The starting RGB color value for the sun is a dark orange and the original diameter is only about 2, however these parameters will all change with custom functions that I will mention later in this post. (Spoiler: I named them sunRise and skyChange.)

I also built an object called “color” to hold values for the background color which will serve as our “sky”, because where else will the sun rise? (see what I did there?) Since I knew that I wanted to start from a pitch black night sky, I kept the RGB values at zero which isn’t terribly exciting to look at. However as the sun rises, the sky will slowly turn from night to day as it would in the real world. This would be accomplished by, you guessed it, a function that changes the sky’s color by depending on the sun’s location in the sky.

The function sunRise is possibly one of the more (if not most) important parts of my program since without this, not much changes. In fact, the skyChange function wouldn’t even run, since the “sun” has to fully set before the wake up greeting appears. Essentially, lines 41-42 cause the sun to rise from the lower left (“West”) of the screen until it sets in the upper right (“East”) corner of the screen (skyChange will not run until the sun’s x location is greater than the canvas’s width OR y location less than zero, which is the highest point on the canvas). Line 43 causes the sun’s diameter to become bigger as it rises, and then lines 45-46 turn the sky from pitch black to a light, almost aqua “sky blue” as the sun rises and sets.

To fully emulate a digital version of the sunrise clock, the original intention was to have the sun expand until it covered the whole screen before changing over to sky blue with the greeting displayed. However, when this was the case, the function skyChange’s argument never became true, which means that the function never ran and the sky never changed. Not the biggest deal however, since I think the overall aesthetic with the final shade of blue ultimately matching the same background color as the “Good morning!” message was a more seamless transition. Same with the text matching the sun’s final golden hue, which is a wonderful happy little accident because the white font color I coded into the project looked terrible and washed out against sky blue.

If I choose to expand with this project, the next steps I’d like to take are making the alarm clock a bit more interactive, perhaps by creating another function that “resets” the alarm clock when necessary or even slows down the “sunRise” function so that the user has a bit more time to snooze. It might even be cool to create yet another function (maybe one that builds upon P5’s built-in mousePressed function) that creates a “sunDown” effect that reverses the sunrise and displays a “Goodnight!” message. This will probably also log a hidden, repetitive “Go to sleep already!” onto the console.

I also have an idea to make the sky slightly more animated, maybe by creating small twinkling stars that are visible only during the night and are gradually replaced by shooting rays of sunshine during the day. But as of right now, I’m pretty happy with how everything turned out. To be perfectly honest, it turned out better than expected considering how much time I put into playing around with values until I got things *just* right (It was basically all of Saturday which is much longer than I’d like to admit.)

You can view the finished product here. Enjoy!

We are still in the relatively early stage of our coding journey (it’s been less than a week!) and while it has been incredibly busy as expected, it’s also been inspiring as well. So far we have learned about the different exciting potential career paths related to software development and engineering should we decide to continue on this adventure, and it seems as though the sky is literally the limit (or maybe not, if SpaceX has anything to say.) 

While all of this sounds very cool, it’s going to take a lot of hard work and dedication to get there which is a bit daunting. However, if there’s anything we’ve learned thus far, it’s that time management is key. There are only 24 hours in a day, and after 8 hours worth of lecture and an additional 2-4 hours or so of homework and reading, reality starts to set in about how much work there is to be done.  Yes, it will be hard absorbing all this knowledge in such a short amount of time. Yes, it will be stressful getting to class or assignments done on time. And sometimes it will feel impossible. However, as a wise man once told me “There is no such thing as ‘I can’t’, only ‘I won’t.'” Another not-so-wise man also used to say “Git-r’done” which roughly translates to “Get it done.” Combine both pieces of wisdom, patience, communication skills, and a trusty planner or calendar/scheduling app and you pretty much have the recipe to success.

Another neat thing that we learned about this week is our program’s partnership with Uncubed, a recruiting and talent marketing program with a focus on the tech industry. Before this course, I had honestly never really utilized Uncubed. Sure, I’ve heard of it and even browsed their website maybe once or twice before, but most of my startup and tech job research came from Built in NYC or Glassdoor (the latter more for specific companies and positions). Having experienced many a time the awful, painful process of searching online and applying to jobs with little to no success, the fact that we now have a new resource at our fingertips that we have direct access to through our course partnership is invaluable and something I am definitely grateful for.

It’s important to keep an open mind and remember that tech is huge. There are plenty of options out there for whatever it is you may want to do, and it’s totally okay to not even know what you want to do yet. Sometimes getting to know yourself takes time, and that’s cool too. So if any of my fellow cohort members are reading this and are still unsure, don’t sweat the small stuff! Keep your eyes on the prize (S.M.A.R.T. goals) and keep hustlin’. We’re all in this productive struggle together and it’ll pay off in the end.

Today is Wednesday which means the week is half over, and yet I feel as though we’ve already learned way more than we thought we would have at this point. When I was still in college, 3-4 hour lectures seemed like an eternity. Now they seem like they aren’t long enough. It’s amazing how fast time flies by when your mind is constantly engaged and motivated to keep going. At this rate, we’ll be pros in no time! (Sorta.)

A major concept we learned today was how to use variables, but more importantly, what they actually are and when to use them. In a nutshell, a variable is a placeholder for information, such as a numeric value assigned to an attribute. Most importantly, perhaps without being too redundant, is that variables can vary (pun not intended). Because variables are adaptable, the value assigned to them can change as necessary further down the lines in your code as needed. With longer projects that contain more lines of code, variables can also keep things tidy and organized, much easier on the eyes IMHO than hopelessly searching through a hot hardcoded mess. I can’t imagine how awful that would be. Actually, I can, but I’d rather not.

As you can see in the image above, everything that starts with “let” is a variable. You can pretty much name your variables anything and it will still run as long as you declare it, however I chose names that made the most sense (to me, at least) in this p5 project. Although it seems like a lot of code, nothing is actually being “done” yet. I am simply naming and assigning my values, however once they’re named I can then input my variables into the function/s I want to run. In this case, I will input this into the draw function.

Now run the code, and you get this beautiful masterpiece:

Now here’s the fun part. Because variables can be manipulated, you can do all sorts of cool things like cause objects to move with your mind, I mean, with code. Yes. Code. Check this out-

By adding 4 relatively straightforward lines of code, I was able to create an animated moving image that looks super rad that you can view in action here.

Not bad for 3 days, looking forward to the next 2 left in this week. #bringiton

Today was a fun day. For the first time, (and on the second official day of coding, ever!) we were given the chance to put theory to practice and apply what we learned in this whirlwind duo of long 8-hour days to do cool things with code we (mostly) wrote ourselves. Expanding upon yesterday’s lesson on basic shapes and colors, we learned new commands that allow you to create dynamic, almost “animated” manipulations, everything else we’d learned until that point was more or less static. One of the examples shown in class illustrated how keeping object location coordinates open-ended instead of setting an exact numeric value can lead to all sorts of rad effects. In this case, the x,y coordinates are set to the user’s mouse location, which “draws” circles following the user’s scroll pattern.

Here’s an example of code in P5 that demonstrates this-

The Reference section of P5’s website is an absolute godsend. Not only does it clearly outline how to do pretty much everything using their platform, you can even test out your own experiments and ideas using the built-in code editor that’s baked right into the reference page for whichever subject you’re viewing. It’s more or less an interactive wikipedia, except the content written is trustworthy and coded by the platform creators themselves instead of questionable randos on the internet.

In my previous post, I had mentioned that P5 was created for designers and novices to create digital art, however I find this just as viable of a source of entertainment as well as creative expression. Attempting to find the “perfect” shade of purple by playing around with numeric RGB values in code was as as fun as solving a puzzle game (and ultimately more rewarding, because learning and stuff. Knowledge is power!) Not to mention all the happy little accidents that somehow turned out to be neat works of work, to me at least.

However, in terms of not-so-“happy” accidents, tonight was a good learning experience of how code order affects outcome. Like any language, human or computer, syntax is important for comprehension. After playing around with different arrangements, I came to this self-explanatory conclusion below in the comments.

So to recap, here are the 3 main concepts in P5 that we were able to practice:

1. How to position and “shape” geometic figures using x,y coordinates within “canvas” constraints. All shapes are more or less a collection of points positioned in a certain way, which was a concept I more or less completely forgot about.

2. Using numeric RGB values to play around with colors and appearances. There are also other commands you can use such as “clear()” that dramatically affect objects (go on, try it.)

3. This doesn’t just apply to P5 or JavaScript, but ORDER MATTERS. You can’t put the carriage before the horse, or shoes on before socks, because it just doesn’t work properly. Same applies to code. For A to occur, B needs to happen first, and at the proper place and time.

You may have seen it as the mysterious window full of random words and code that hackers use in movies and TV shows such as Mr. Robot, but it’s much simpler than that.

At the very core, the Command Line is a “text-based application for viewing, handling, and manipulating files on your computer” as outlined by this Django Girls tutorial. It is basically the the same thing as the “Finder” folder on your computer where all your directories and files are stored, but without the visual “Graphic User Interface (GUI)” icon.

So why use it?

Sure, it may be more intuitive to click on a folder on the desktop rather than going into the Command Line, but if you have a cluttered desktop like me, sometimes this is easier said than done. Unless you’re a very slow typer, it can be much quicker to find the file or directory you’re looking for with a few keystrokes rather than scrolling/clicking through with your mouse or trackpad to find it. Once you become familiar with the commands, this process becomes even faster. Here is an example chart of some basic commands from the same Django Girls tutorial-