My Life as A Collegiate Athlete

A Mandala art piece we made in an advanced javascript class using the HTML5 Canvas Element. Inspiration from my time on the swim team at UT. We were asked to combine 5 videos of our choice, create clipping masks based off of shapes created in Illustrator, and then combine them in javascript using a for loop algorithm to make the shapes spin.

  • Javascript
  • CSS
  • HTML5
                                                       

MOODS

One of my favorite assignments. An interactive image piece constructed completely out of HTML5 and CSS3 with also the incorporation of gifs. The assignment required us to have 20 something photos embedded somewhere inside the project. I’ve never been a fan of clutter so making sure that there wasn’t too much going on was high on my priority list. However, I liked the idea of a lot going on, but ultimately, there had to be some kind of organizational element in play. The idea of displaying Human Emotions seemed like an easy way to accomplish this. 

TOP LANGUAGES USED

CSS

This project revolved around the use of CSS. Mainly using combinator functions to point to one element while hovering on another.

HTML5

This code was structured through the use of html5 and its elements.

JAVASCRIPT

While it was minimal, javascript was essential for this project to work. The main functionality for JS here is used to reference other CSS classes.

Moonlight Island

One of the first projects dealing with the HTML5 Canvas element. Acting sort of as a test exercise, this assignment had us pick one image and illustrate it out in javascript code. A lot of math went into this one, but basically it dealt with creating a fractal tree based off of a recursive function. Read more about the code here.The real kicker with this one was that we had to implement some form of interactivity to the canvas.

While I had some experience with canvas before, this was definitely a huge jump. This was the project where I really realized how javascript worked on a webpage. 

  • Javascript
  • HTML5 Canvas element
                                                       

Car Radio | CSS3 Text Poem

This project was very CSS driven. Acting as another test exercise, this one had us practice pseudo elements and combinators to target other css elements. We were assigned to create an interactive text poem to practice this. I went with the hook to the song “Car Radio” by Twenty One Pilots. Each line has some form of interactivity. Most of them play off of what the lyrics are saying. Hover in the middle for the chorus!

  • Javascript
  • CSS
  • HTML5
                                                       

28.6.42.12

Our teacher kinda had a thing for mandala artwork. This was one of the last ones we did that had to be completely constructed by text. I was really into the movie Donnie Darko at the time and decided to use its staple time warning as the basis of this design. The code was pretty similar to the other mandala works: a bunch of for loops calling a string, and sometimes an array, of text and rotating it a couple degrees every iteration. The i variable (or the number that determines the amount of iterations) was based off of each number in the overall date sequence. There are 28 ’28  Days’,  6 ‘6 Hours’, etc. Additionally like the other mandalas, this one continues the practice of implementing interactivity into the canvas. Not much, but if you hover your mouse upon the x and y axis, you can move the diameter on which the for loops are rotating the text on. Basically, you set the x and y positions as a variable.

  • Javascript
  • HTML5 Canvas element
                                                       

Text Breakup (Interactive Live breakup chat)

Another interactive project working with HTML5 and CSS3. The assignment required us to pair 10 images with text. My friend who was taking this class with me, had recently told me about her ex boyfriend’s breakup over text and I was needless to say inspired by it. It’s absolutely not verbatim. The story that is ultimately constructed is cut most from basic breakup cliches, but this was really only the catlyst for the assignment. Our teacher, Santiago Echeverry (an excellent professor at his craft) had us study a lot to do with UI/UX. “THE USER’S EXPERIENCE IS EVERYTHING!!!” he would yell. And he was right! He got me interested in the subject as well and that overall experience aspect was definitely on my mind when designing this project. When viewing the piece alone on a page, the user could watch the text break up play in live action as it was happening. Additionally, all the text blurbs are somewhat interactive (part of the assignment)

  • Javascript
  • CSS
  • HTML5
Close Menu