Interactive Media Arts @ NYUSH
Vincent, Susie, and Tenielle. We all worked on our comic project website, and this is what we have so far: We drew and looked online for the visual assets.The visual assets we found online mainly consists of the houses we had to look at. The PNG of the wood will be used as one of our materials that we will use a lot.x
The ones we drew consists of a character walking, talking, standing, and showing:
Screenshots of the webpage so far:
The title appears from the darkness.
Code:
For the javascript exercise, I wanted to give myself a bit of a challenge and create a button that uses the if/else statement, so I only need one button to turn the picture left/right or big/small.
First was to make create the buttons and the image.
The “test1” class for the buttons is just simple CSS to make them look more aesthetically pleasing. The important part is the id “red-box”.
I first worked on the button to make the sizes different:
This wasn’t actually a big problem, just a simple if/else statement and also using the getElementById. I actually had some problem with defining the “turned” within the function. I forgot I needed to define it, and by checking the console on my browser, I saw that “turned is not defined”. The simplest way was to use var to define it, and I would use it for the other button as well.
The second button was to change the direction of the image:
I originally wanted to flip the image within the coding, which actually turned out to be a lot harder to do, so the easiest way to work around it would be adding a flipped image into the img folder and having the button change the images itself.
For my photoshop exercise, I used these three images:
I wanted to create something interesting with some of my favorite artists. By using the lasso tool, I cropped the head of Drake and the bodies of Kanye and North and put them onto the beach.
I didn’t want a head of Drake floating, so I decided to lower the opacity of the picture and make it seem like Kanye is thinking of Drake.
For some reason the resolution of the picture is extremely low and I didn’t know how to fix it.
I felt like I could’ve used a lot more tools to make the images blend in better.
Our interactive comic idea is a timeline scrolling webpage. The stick figure is holding materials on the bottom of the screen. The timeline is of households, ancient present whenever. At each different time period, the stick figure will tell you what and how much materials is required to build the house. The point of this webpage is to portray the houses of different cultures throughout history.
Everything that I did for my CSS was inspired by w3school and the IMA fellows, massive thanks to them 🙂
Everything I coded below is in chronological order:
Navigation Bar:
This was the first step I wanted to work on, because a navigation bar is very aesthetic and easily accessible for the users. I went to ask some fellows how to work on a navigation bar, and the easiest way was just to look online on w3school. On w3school, I first tried to copy and paste the coding and it worked on the first try so that was really nice. Afterwards, I changed some colors and did border-radius to make it look nicer. Extremely easy to do a navigation bar.
Social Media Icon Links:
After building the navbar, I wanted to include icon links inside of it. I looked up social media buttons and once again w3school helped me out. I looked through the coding on the website, rewrote it on my own, and implemented it into the navigation bar.
Photography hovering:
I wanted to make the photos interactive, so I looked up how to hover on photos, and once again w3school was there to help. There is a transparent image section where I learned you could make a image transparent, and another section to hover over photos. I implemented the two codes together and made it so when you hover over the blurred photo, the photo turns back normal. This was one of the harder parts of my coding because I had to implement both codes together.
Hero-Image:
I asked the senior what I should put at the top of my photography page, and he suggested a hero-image. Prior to his explanation of it, I had no idea what a hero-image was, so I googled it and opened up w3school. It was pretty easy code to follow, I made my own and implemented it, it also looks extremely nice.
Flashing Text:
I wanted to make the text seem cool so I added a flashing black and white effect to it. I thought it would be similar to the photo blur but it wasn’t at all. I had to look up how to make the text itself flash.
It was a lot of work, but I finally got it working. I also had to do a little bit of copy and pasting because it was hard to understand it all….
Overall Experience:
I spent a good couple of hours working on this, it was extremely fun and satisfying to see the end results. But in the middle when you’re stuck and don’t know what to do, it can be extremely frustrating. Nonetheless, extremely fun and I learned a lot more CSS throughout the process!