Day 8 of Tech Impact Vestibule

The last 2 weeks have been one of the best experiences of my life. Better than the time I went back packing in Europe all alone. Why do I say?

I say this because, I have met 21 other students who are determined and hard-working just like me. Everyone in the class has not taken any days off and have made it to all 8 days to the vestibule. We all have helped each other throughout the program and have development friendships along the way. For someone like me, who I never thought I would be able to help out a fellow classmate with code or anything related to the programs we used in class, I was asked questions and I was able to answer confidently.

Well, as far as today’s vestibule class, Dawn introduced HTML, CSS and DOM and showed us where we could download a clone copy of Dan Shiffman’s tutorial’s to HTML, CSS and DOM.

During the afternoon part of the class we finished any incomplete projects and update our WordPress blog post.

Overall, this program has been a great and a once in a life time opportunity to learn to become a web developer. And I am thankful for being here, I hope I see the whole class back in class on March 6th.

Until then, See you guys and gals! Peace.


Day 7 of Tech Impact

This morning in class, we had 3 teams who worked on projects together and came up to present some exciting projects.

The first project presented was from Madeline. Madeline created a music visualization project were there was a play button and a slide bar for the volume. When the button play is pressed, the amplitude of the song creates a visual effect on the canvas. Pretty cool stuff Madeline! ūüéľ

Next up was Naomi and Lisa who created a bouncing sunflower project with a cute little bee ¬†flying above it. When the mouse moves closer to the bee, it flies the opposite direction and off the canva while a leaf of the sunflower falls off and bounces back on. ūüĆĽūüźĚ

The last presentation was from the man of the hour, Usman. He showed the class two of projects he had been working on. The first project was a cool scare tactic anyone and use on a family or friend. First he has you put your “What is your name?” then “What is your age?” and last “What are you doing?”. Once all the info is put in, a message in bold pops up stating that the person who created the webpage has taken your info and now knows who you are. I need to use this on my mom when I get home. ūüėā

Usman last project titled “Racing Car”. He made a car game with the ability to use the keyboard arrow keys to guide the car. The car slows down when it is in grass area and goes fast on the road. He showed us the code and it looked complicated but I hope to create one myself as I get better. ūüöó

Overall, these teams created some really cool projects and can’t wait to see what other cool things they will create.

Before lunch, I worked on my Github profile and dated new repo to my account, pretty much just added what I didnt add before.

The rest of the afternoon was spent on refresher on what we learned during the week in details.

BTW, photo credit to Muhammad Usman. It is a screenshot of calculator he created.

Spotify Music Visualization Event 2/18/17

As an assignment for the Tech Impact program, we had to attend a tech related meetup and document what we saw or if we worked on a project at the event. I chose to go to the monthly Spotify Music Visualization Hackathon with my fellow classmates.

The Spotify event was my first ever tech meetup and going into it, I felt nervous because when I think tech meetup, I get an anxiety because of the possibility of building a project and presenting. Especially, right now with not knowing much coding, I am not 100% confident to show off my work. Nevertheless the event kicked off with four keynote speeches by :

Deborah Johnson’s, who¬†talked on Historical Examples of Music Visualization, at the Music Visualization Hackathon.

The second speaker was Matthew Kaney explored music composition through interactive visuals in a NYU Music Experience Design Lab project with New York Philharmonic.

The third speaker was George Michael Brower of Always & Forever Computer Entertainment talks interactive music visualization and VR instruments.

The last speaker of the day was Marie-C√©line Merret’s recent work includes audio-reactive sculpture and a “Concert for the Deaf”.

All the speeches were inspirational because of the way code can be mixed with music to create visual effects to the beat of music. My favorite part was when George Brower showed off his Plaything VR game that puts virtual drumsticks in your hands to play music. In Playthings, the instruments are made out of food: like hot dog xylophones and jelly bean harps. This game would be great to have around and play with family and friends when they come over.

The event was a great experience and I was glad I was able to be accompanied by my fellow classmate who are going through the Tech Impact Program with me from Start 2 End.


Day 6 of Tech Impact

Today at the Tech Impact, it started with Leila’s career development portion of the day. During her advisement, we went over the basics for a few websites we may use for references, careers and upload projects. We briefly touched base with Github, Stack Flow, what a portfolio¬†contains, LinkdIn, etc.

The class assignment was to create or enhance our LinkedIn page in the following way:

  • Lookup & add counselor and other students in class
  • Update LinkedIn profile
  • Add profile picture
  • Add a headline with keywords describing how you want to be known on LinkedIn
  • Add at least key skills to your profile
  • Make a list of 3-5 Organizations interested to lookup on LinkedIn
  • Join 3-5 Industry groups and organizations
  • Add any relevant project you worked in or are currently working on

This assignment was helped to me because I needed to update my LinkedIn to more current skills and adding a photo to boost my likelihood to be contacted.

Before the break, Dawn went over how Github works and though I have checked out the Github website in the past, I never created an account until today!

I created my Github account and read the guide from the Github website and followed the guide to:

  • Create and use a repository
  • Start and manage a new branch
  • Make changes to a file and push them to Github as commits
  • Open and merge a pull request

My first repo was emlop/likes and I added a list of my favorite sports teams with the NY Mets as #1 #LGM. Thereafter I added 2 projects worked on with the team and all the other projects will be uploaded soon.

The rest of the afternoon was used to work with my current teammate Madeline on the projects we did not get to finish yesterday. If you want to know which projects were assigned, please out my last blog ūüėČ .


Day 5 of Tech Impact

Today was an information galore from Start 2 End of the day. The topics that were discussed in class were: conditional statement IF, reverse ball movement, elseif, boolean MouseIsPressed, booleanVariableGlobal, while and _NestedLoops.

Though, I can’t explain the exact definition to these topics, I managed to work with the examples during the team pairing part of class with Madeline. Together we used the examples as a template to create our own unique projects.

We didn’t get to finish working on all the projects but we managed to work and power through¬†issues¬†we kept coming across. The number one issue, at least for me, was making a circle bounce from one side of the canvas to the other without disappearing.

After many trial and error situations, we FINALLY got the circle to bounce side to side of the canvas!

The code at the bottom is part of the finishing touch of the back and forth circle:

if (x > width) {
speed = – 5;
if (x < 0) {
speed = + 5
x = x + speed;


Day 4 of Tech Impact

Day 4 of the Tech Impact was used as a refresh class and went over more in depth on how to use custom variables with and without moving objects, Boolean, the difference between local and global directories.

The class was worth staying to better understand the concepts of the material we had learn during the week. From Start 2 End, I will not give up and learn to become better at web development.

Day 3 of Tech Impact

During today’s career advisement part of the vestibule, Leila, went over the difference between junior developer and senior developer and also went over some career industries we may have an interested in. I am particularly interested in the tech, media and corporate field as career goals.

During Dawn’s lecture, we took a few moments to refresh Day 2’s lecture to get our juices flowing.

For today’s lecture we went over¬†mouseX, mouseY and function mousePressed () and their capabilities. I learned with these codes/function, I was able to move the mouse and have an object of my choice move along with it.

For the second exercise we learned how to identify a variable before entering code so we can make move across the canvas and we also played around with the code to customize it or add features like looping an ellipse continuously.

The third and fourth exercises was based on the variable’s which I didn’t get too much practice with since I was focused mainly on the first two.

In the feature photo, there are two ellipse’s. The blue ellipse is looping from left to right continuously¬†while the pink ellipse moves as my mouse moves from left to right at the bottom. I was trying to get the pink ellipse to move up and down but I couldn’t figure it out :-(.

I can’t wait for tomorrow’s class, I’M READY FROM START 3 END!


Day 2 of Tech Impact

On the second day of the Tech Impact program vestibule we opened up the day with a basic careers assessment exercise. The assessment was short and therefore made basic and generic career recommendations.

During Dawn’s lecture, we revisited the p5.js in more depth than the day before. I learned that p5.js is great to create¬†graphic and interactive experiences,¬†based on the core principles of Processing.

For the basic drawing exercise, I paired myself up with Eric Vargas. We created a couple of basic shapes in the time we had to do the exercise.

First off, in p5.js, there are 2 functions. Those functions are setup and draw. In the setup function, I used it to create my canvas and background to get the correct sizing and color of my choice. For the draw function, I used it as a playground to design shapes.

I learned in order to start creating on for the p5.js program, you first need to enter createCanvas(), in between the parenthesis you identify the size of the canvas you’ll be working on. I found changing the background of the canvas was much smoother if I kept the code within the setup function. The code for the background is background(”), in my own project, I used red.

We first started by using the code ‘fill’ to set a color to the shape that would follow in the next line of code. The first shape we chose was a rectangle. The code for the rectangle is rect(.., .., .., ..) within the parenthesis we had to set the parameters to our rect. The first number: x-coordinate of the rectangle, second number: y-coordinate of the rectangle, third number: width of the rectangle, and the four number: height of the rectangle. Positioning the rectangle was challenging because it was the first time using the p5.js program and not having a grid was tough trying to find the best spot for the design. But with trial and error, Eric and I quickly knew we had to keep practicing to get it right.

The second shape we created was a quadrilateral shape. We filled the quad with blue using fill(‘blue’); code. This part was pretty much straight forward. The code for the¬†quadrilateral is quad(.., .., .., .., .., .., .., ..); just like the rectangle, we had to set the parameters for our quad shape. We started with x1 – number: the x-coordinate of the first point,¬†y1 –¬†number: the y-coordinate of the first point. We followed this guide for the next points x-2 to x-4 and y-2 to y-4.

To better illustrate the code, I have copied it below:

function setup() {
// Eric did the driving and Emel typed
createCanvas(500, 500);// custom canvas created
background(‘red’); // picked red for the background


function draw() {
fill(‘green’); // filled rect green
rect(100, 125, 100, 200); // created rectangle

fill(‘blue’); // filled qua blue
quad(300, 125, 350, 100, 400, 100, 450, 300); // placed a quad

You will notice two forward slashes and description at every line, this is called a comment and it is not being executed. The slashes tell the program to skip the comment and move on to the line of code.

Today, was filled with lots of useful ways I can use the p5.js program to create graphics in different colors, sizes, virtually anything. Day by day I will get more familiar with p5.js program and from start 2 end of the Tech Impact program become skilled with inputting code to create advanced designs.


Kick off – Day 1 of Tech Impact

I know I am a day late with this post but stay with me for the next few sentences or paragraphs.

Day 1 of the Tech Impact vestibule:

I got to meet all my classmates this morning during an exercise Leila had us get up and introduce ourselves to each other.

Leila also had us fill out a sheet where we identified some of the things we would like to learn in the class, some strengths we bring to the program and some challenges we had to overcome.

The last exercise Leila had us do, was one where we closed our eyes and envision ourselves at our first job after completely the Tech Impact program and give specifics into our level of happiness, some challenges we faced, etc.

When Dawn, our instructor, took over she went over the way in which the group will be communicating/collaborating. The applications we were set up with are Slack, Dropbox, Google Group and WordPress which we will be using from start 2 end.

We then installed Homebrew, Node, NPM, Ruby/RBENV, Python, Git to the machines in class. Last thing we took a crack at was p5.js which is a directory for JavaScript and learned that there are a lot of cool things it can do visually.