tayleurh

[tayleurh]

Website on Git Hub Pages Server: 

https://tayleurh.github.io/WebDevelopmentWork-/officialmidtermproject/Page1CSS.html

Tayleur Hylton

Web Development

Midterm Portfolio

Process: I first started with the html. Then I went to w3 schools and started looked at the types of css I could utilize. I worked on positioning and layout first because I knew I would have trouble with that. Then after everything was laid out, I started to add the pictures, links, and essays. I worked on the javascript typewriting last because it was new to me, I wanted to get everything else down first. I ended up getting the typewriting to work with trial and error. 

Code: I used javascript for the typewriting effect. I had trouble at first because the W3 School showed the typewriting after a click me button, but I wanted it on page load. It took me a while to find the correct wording in order to get it to start automatically when the page loads.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter

Challenges: Generally I got stuck on the positioning and organization of the site. I would move something and then another thing would shift. I went back and forth with that for a while. Then I started to work with the margin-left and margin-right wording and was able to fix a lot of the positioning.

Issues: I also struggled with getting the background of the pdf to not have the print options and gray background. This is something I would change if I had more time. I wanted the resume to stay on the page without the extra edges. I uploaded it as a picture, but it did not look as sharp that way, so I converted it back to an object for now until I figure out how to remove the gray edges.

Learned: What I learned to accomplish the project was a mix of the problems I encountered. Using the syntax is usually confusing but w3 schools explained everything well. Utilizing margins and alignment was my biggest lesson and working with the javascript. One thing that I wouldn’t normally do was using the buttons as the navigation instead of a navigation bar. I felt as if it allowed me to create a more “google-like” experience, which is what I was striving for.   

Next Steps: For next steps, I want to fix the pdf, add a contact me form, add more pages and add some of graphic design work to the portfolio. I will go through and also play with some more fonts, styles, and orientations of the items on the page. I also want to add more to the front page typing other than “Tayleur Hylton” I want to add more sentences that keep typing that which will introduce new visitors to me and the portfolio. Overall, I really enjoyed this project and definitely would like to keep working on it more.

Pictures of the site pages:

[tayleurh]

The original concept for my Final Project was an interactive photography portfolio. The idea was to combine my photos in a way that was interactive and enjoyable to engage with. In the future I can see this work posted on a portfolio site showcasing all of the work I have done in college and the skills I have acquired over the last couple of years at NYU. Past my own website I could see the format being used in an installation where users could interact with a large pixelated screen and play with color before they click and see through to images and other works of art (such as paintings etc).

Here are the original reference sketches that first inspired my project:

https://www.openprocessing.org/sketch/159091

https://www.openprocessing.org/sketch/410867

Work Process:

In the beginning I wanted to put the pictures behind the rotating boxes. I had trouble with rotation so instead I played with the size of the rectangles and number of pixels shown. Depending on the way the user moves the mouse the boxes get larger and show less pixels at one time or get smaller and show more of the images pixels.

At first I only had four pictures, but then I added 10 in order to make it a more full presentation. During the critique in class for future steps I had mentioned wanting to to add music for each picture. I attempted to but the screen would keep freezing or go blank. I decided to add music but instead do it in setup. The sketch takes a while to load, but the music start immediately so I thought it would be great to add something in the beginning, during the load time. Also the choice of the song was from a favorite movie of mine Step Up. It is dramatic but till soothing to listen to and I think it makes the presentation more dynamic. If this was an actual installation in a music I think it would be great to have music to add character to the experience.

Also, during class it was brought up that my original setup with the words on the canvas was not working out because it was hard to decipher and was intruding on the images. I decided to move the text outside of the canvas. I ran into some issues with that I forgot that createDiv was needed. When I figured that out I rotated all of the text around the canvas to highlight the details, and all serve as a frame for the interactive portfolio to live in.

I also, changed the dimensions of the canvas so that when the image was clicked the rectangles behind the image would no show and distract from the image. In the previous version some of the rectangles still appeared at the bottom which I liked a first, but then realized that I wanted  to change when I was editing the sketch.

Things I learned:

I learned how to use buttons. Even though we touched on it in class going through the struggles of making it work for the project helped me to better understand how to do it myself. I also worked a lot more with images and feel comfortable loading them. Also, we touched on picking up pixel color in class but this project really made me focus on getting it done and understanding how to manipulate it well.

Extra credit focus:

To make up for the late assignment I asked to focus on making this project better and improving it. To do this I worked a lot to improve the stylistic choices and worked with the music. I really wanted to make the portfolio look unique and through my changes and different placements I worked to do this and I think it looks much better and has a much more deliberate and finished feel.  

The first 5 photos are the old version and the rest are the new version! I hope you like the changes! Thanks for a great semester! 

Best Regards, 

Tayleur :)

[tayleurh]

Level 2 Game 

Homework: Level 2 in P.5 JS 

For my original concept, the user need to click on the circle before they trailed off of the screen. I had done that sketch in processing. 

Originally I had made all of the circles individually and the had them correspond to another shape shown when the mouse was hovering. For this iteration I used a for loop to make the circles. I had trouble corresponding shapes to the specific circles in the loop so I used mouse pressed instead. I found the shape for the flower of p.5 reference. It represents a flash. 

I also tried to add sound into my sketch on the mousePressed but the local host kept failing. I tried to change the index but it still was not recognizing the sketch. I used the mouseX and mouseY to manipulate the color. I struggled with put up a next page(you won or you lost screen) based on time. For further iterations I would like to add that. 

Overall I learned how to take the sketch for processing and translate it into p5 using different methods. Although it doesn’t function the same way as my first sketch, I am glad I used new methods to recreate it.

[tayleurh]

Our homework assignment was to use the New York Times API to showcase different search parameters. 

Things I struggled with: A lot of what we need to complete the sketch was from class reference, so we were able to learn from looking over the slides and code. The problem for me was looking through the code and information and github and assigning the parameters to parts of our sketch. We also had trouble with the time interval.

Things I learn: Having to repeat a similar structure for the API from the one we had in class, helped me to understand and remember why the sketch was set up the way it was during class time. I still am back and forth about the API’s but now I feel comfortable with being able to display it on screen. It was great to work with the group on this project and get feedback and opinions from my members as we went through the sketch.

[tayleurh]

This is an updated version of the previous sound assignment. 

Struggles: 

I struggled with the whole concept of the array. I made on of the circles manually. I also struggled with the dist method of finding the radius of each circle. After, I found that out I was able to work with sound more easily, but still ran into issues, especially when getting the music to stop outside the circles.

Lessons learned: 

Although the circles are not perfectly adjusted for the sound the mousePressed position is very close and the music does stop when the mouse is clicked far outside of the circle. I also feel comfortable with using the radius of ellipses for mousePressed sand hovering situations. 

Style choices: I have the colors adjusted by mouse movement. I also have different instruments playing for every circle. I believe the sound maker has a very retro and fun style.

In the future, just as in the graph assignment, I would love to play with more interactivity, including changing sizes and volume per circle.   

[tayleurh]

The homework assignment was to create a graph using Json Data. 

Struggles. 

I went through a lot the JSON data that the homework assignment linked but but I couldn’t find one that included numbers for a graph, like the one we did in class. I took a JSON about food and manipulated it to add my own terms. I also had some difficulty lining up the words and the circles. 

Overall, I learned how to showcase atleast, a version of JSON data. Worked on the concept of preloading the data. I also tried to make the static graph more visually pleasing by having the color change according to the mouse. 

In the future, I would add interactively and learn to line up the words and graph in a better manner.  

[tayleurh]

The assignment was to change the sound according to the object. 

I struggled with this assignment, I struggled with making the arrays and especially with constraining the size of the object. I was confused on how to make the object correlate exactly to the sound. I looked at the wiki, youtube and my old sketches and I honestly ended up getting frustrated with myself and about the work I did. 

This is not my best assignment, but I put a lot of work in making the sound. 

I started over a lot of sketches, erased and repeated. This sketch is my outcome. I want to try the assignment again if that is possible. 

Overall I have a hang on the sound, but am still having difficultly with arrays. 

[tayleurh]

Working with Classes

Assignment: Class work where we used this.variables and classes. 

Things I struggled with: 

I first struggled with assigning size and movement to the balls, but then got the hang of them. I struggled with assigning color to each ball which we discussed in class. I tried the methods we talked about and wasn’t getting results. If possible I would love to visit this. 

Overall I learned the this. methodology and how to utilized it to create more consistent and formal variations of ellipses. 

I enjoyed this assignment.

[tayleurh]

Sound - Contact

For the assignment where sound was supposed to play when balls contacted that wall was fun, but difficult for me. 

At first I struggled with make the sound play, in the key pressed assignment. I was getting confused with the pre load. I also was having trouble with server 8000, but that was remedied by switching to another server. When I got to understand those problems, implementing the sound to the balls went more smoothly.

What I learned:

I think struggling with the sound, adjusting the index and working with the assets folder helped to me understand the concept more. Overall, I think I can apply these techniques to my work in the future.

As far as aesthic choice, I decided to play with size and color to make the sketch dynamic. The size of the ball is control my mouseX and mouseY positions. The color of the background and the ball are also control this way.

[tayleurh]

Original Concept:

My game is called CollageMan. It has the user, look through several images to find either a specific part of an image. If the user clicks within ten seconds they can move to the next level. If they don’t they will lose an arm and eventually their whole body as the levels continue. 

Struggled with: 

I struggled with the time and getting the loop to stop. It keeps going after ten seconds. I also had trouble making the mouse a hangman. It is a little off. 

Things I learned:

Overall, I think that I have learned a lot this semester as compared to the first few weeks of class. I feel comfortable setting up the sketches, adding images and adding text. This project was difficult for me to execute just because of the small details, but overall I’m happy I stuck to the idea. Struggling with the time and the mouse allowed me to do more research into getting them to work and although, they are not perfect now I believe I can perfect these techniques in the future. I also learned how to work on open processing which was new but easy to work with because it is similar to what we work with in class. I also used all of my own images that I took around the city for the collage. I think my own images instead of the internet collages I initially chose were a better representation of my style and overall idea!  

Here is my link to my github and open processing:

https://www.openprocessing.org/sketch/464601

Midterm-CollageMan/Midterm Code

[tayleurh]

CollageMan. - Midterm Sketch

In the beginning of the game a black object flashes and there is text that shows “Find and click the object in order to advance to the next level.” Within a photo collage, the object will be hidden with camouflage and the user needs to find and click the object on the image within 10 seconds of the level running. Each level up will be harder to find the object.

The object that moves with their mouse will look like hangman. Every time, they don’t click within the level they will lose a limb and so on. 

* Later Iterations: If they click object on time and they have a full body they will get a green friend in the box on the right. If they get 10 friends before they win the game. If they click the object in time and the are missing a hand, for instance, they will get that body part back and will be able to try to get another friend in the next level when they have a full body. *  

If the players loses all of their body parts, they lose the game. The screen will fade to red. 

Later Iterations: *At this point where all body parts are gone , if they have made any friends, the screen will go red the friend box will empty.*

References to Collage Ideas:

Reference to how friends would look in later iterations after the project(mini pandas):

Reference to my whole sketch: 

Reference to the part of the sketch I will be focusing on:

*Will not be focusing on “friends” first. Will be focusing on having the object appear, working out the timer,etc(the more functional and initial interactions)

[tayleurh]

Partner-Project---Tayleur-/Class Assignment 10.5 Partner/index.html

Partner-Project---Tayleur-/Class Assignment 10.5 Partner/sketch.js

Tayleur and Deanna Partner Project 

Original idea: 

In our original idea we wanted to work with several shapes and vary their colors. At first we were unsure of how we wanted the final look to be, but we we wanted to utilize a lot of different functions and activities. We decided to work with varying color, creating a shape function, scale and using mouse pressed to create a fun surprise. We also utilized the background color so that only one group of shapes would show, because we thought it looked more organized. 

Challenges you encountered: The first thing we encountered was getting the triangle to move around the screen freely. We had the wrong points but we discussed that with you and learned how to do it in class. We also, had some problems with scale, but after referencing slides, classwork and p5js we got a grip of it. Overall, little problems came up here and there but when working to together we both were able to remember and put together the pieces to create the sketch. 

Overall, it was really was fun to work with a partner and helpful to help each other with parts we didn’t understand. I’m looking forward to doing more partner projects! 

[tayleurh]

sol-lewitt-homework/Tayleur H-Sol LeWitt-Oct. 3/sketch.js

sol-lewitt-homework/Tayleur H-Sol LeWitt-Oct. 3/index.html

Here is the link to the original painting: https://www.1stdibs.com/art/prints-works-on-paper/abstract-prints-works-on-paper/sol-lewitt-bands-equal-width-colour-3/id-a_837663/

During the course of this homework exercise I did struggle. I had a hard time figuring out the direction of the ellipses and having each part of the work over lap correctly. Also, I at first I thought it would be easier to make the color random but it was actually harder. 

In this exercise I worked with ratio’s for a while to make arcs but they didn’t turn out the way I needed but by working with these I learned how to make them. I ended up using ellipses. I also worked on making continuing shaping with “while” and “draw” which I hadn’t used much before. 

I would like to try this assignment again it that would be possible and make the next iteration closer to the painting. I would work on the random colors and the direction of the ellipses. 

 The blue, red and green is my final version and the pink and white is an earlier version that I was stuck on until I fixed the code. 

[tayleurh]

[tayleurh]

For this version, I was able to get the shapes to move off of the screen which is what I intended to do. The struggle I encountered was getting the flashes to still pop up over the specific circles, because before I only had the flashes equal to specific points and not the actual shapes. For later versions, I would like to fix this. I also struggled and was challenged with getting the circles to move. Even though we covered it in class I was still confused. After several Youtube videos I got a hang of the int = x idea. Now I am able to moved them am I have that skill. I also had trouble with active and static modes and getting my text to show up, but after moving the text and the shapes below the moving circles I was able to have them show up correctly. The next step is adding more circles to the game, monitoring points gained and lost and having the flash correlate with specific shapes instead of just specific points.

github link:  Game-Version2-9.21.17/Version2/Version2.pde

[tayleurh]

This series of pictures shows each step of my game. As you hover over a dot a flash will come up that corresponds to the next dot. The user is supposed to click the next corresponding dot as quickly as possible before it disappears. I had some difficulty coding the fading, but I do want to add it in later iterations of the game. During the course of the this homework assignment, I did struggle with creating shapes over each other, but after a while I came to understand how it is done. I enjoyed this project. Here is the original concept for the game as stated in my last post: 

The game begins with several balls on the screen. Each time a user clicks a ball it will flash a different color. Example: 1. User clicks a green ball 2. A pink flash will pop up over that clicked ball. 3. The user needs to find the actual pink ball that is the same color as the flash on the screen and click it. The user needs to find the ball with the same color as the flash and click it before it disappears from the screen. If the user does not click it they lose one point and another ball will light up so that they can continue there. Every time the users click the correct corresponding ball they get 3 points. When they hit 25 points they move to the next level. At the next level the point requirement increases and the balls disappear more quickly.

I am looking forward to continuing this project and learning how to fade objects and color and work with timers!

[tayleurh]

The game begins with several balls on the screen. Each time a user clicks a ball it will flash a different color. Example: 1. User clicks a green ball 2. A pink flash will pop up over that clicked ball. 3. The user needs to find the actual pink ball that is the same color as the flash on the screen and click it. The user needs to find the ball with the same color as the flash and click it before it disappears from the screen. If the user does not click it they lose one point and another ball will light up so that they can continue there. Every time the users click the correct corresponding ball they get 3 points. When they hit 25 points they move to the next level. At the next level the point requirement increases and the balls disappear more quickly.