Posts Tagged ‘html5’


So after a lot of work I’ve arrived at the second major update for my Major Studio Two project which tells the story of my brother Mike’s thru-hike on the Pacific Crest National Scenic Trail through an interactive web media experience.

Major milestones include:

1. Debugging a Leaflet map interaction where the animated marker (representing my brother’s position) triggers popups to open on the stationary markers.

2. Improving the interaction between scrolling and the animated marker start and stop using the JQuery Waypoint library. Now when the user scrolls, then animated marker will only start and stop when the user passes the correct chapter chronologically. I found that users tend to scroll up and down through the site fairly quickly to get an idea of long it is. Previously this would have caused the animated marker interaction to be buggy.

3. I’ve also managed to do some user testing for the site today which has proven to be super helpful. I will admit that all the folks that have helped me out have been DT students so I will also test the site with some people outside of my program for a different perspective. Here’s some feedback I’ve received so far:

1. The title bar doesn’t stand out enough and blends in with the rest of the site too much. The url of the site would also help with the title (no url as of yet…)

2. The Alan Watts quote on the opening slide is hard to read; try masking the area behind it with a transparent fill. (fixed)

3. Initially the user has no idea who the main character is. It would be helpful to add some background about Mike and the PCT in general prior to the start of his story.

4. The map transition from overview to the start of the trail should be slightly smoother and more seamless.

5. It’s somewhat confusing where the marker is going in relation to the content. Some suggestions to improve this are to break up each chapter’s path so that the marker will travel shorter distances. Then have photos or other text blocks trigger the marker to move. This would also help connect the particulars of the content with the map. Text blocks could even be highlighted so that when the user hovers or clicks on them their location is displayed in the map. Another suggestion was to repeat each chapter title over the top of the map so that the user is aware of the connection between the area being traveled and the map chapter.

6. When the marker is moving the map tends to shake. I’m not sure if this is something I have a lot of control over but will definitely think about.

7. Add a locator map to show the regional overview (ie: the current state or entire trail) so that the user has an idea of where on the whole trail Mike is.

8. Use Lazy Loading JQuery library to load the images as the user scrolls. This will help cut down on overall loading time and improve performance of the site.

9. Possibly consider adding menu options to the title bar so that the user can jump to certain chapters. This will be somewhat tricky to implement but may be necessary. Also adding forwards and backwards arrows could be helpful with navigating chapters. Worth testing though.

Positive feedback I recieved was that the site is very readable and would make a good narrative template overall. The first image is liked by everyone I’ve tested and serves as a good introductory slide.

Lastly, some updates from a house keeping perspective are to make the site cross-browser compatible (right now I’ve only been developing it using Google’s Chrome browser) and organizing the javascript code into separate modules / files.

Looks like some more updates and then another round of user testing will be needed. Looking forward to completing this project and submitting it to the student mapping competition for NACIS this year in Pittsburg, PA.







For my major studio two class this semester I’m working on creating an interactive web piece that tells the story of my brother Mike’s epic trek across the Pacific Crest National Scenic Trail in 2013. My inspiration for creating this piece came from a story by the New York Times titled The Russia Left Behind which features a map that animates as the user scrolls through the content. I’m attempting a similar feel with my piece, but rather than using the D3 JavaScript library for rendering the map I’ve chosen to use a combination of Leaflet JS, a few plug-ins for Leaflet including the Animated Marker and Maki Markers plug-ins and JQuery Waypoints to tie the scrolling of the content to creating changes in the map. Last of all and perhaps most importantly the base map I’m using is courtesy of Stamen Design‘s Terrain Tiles. Stamen did a superb job of using open data from both the OpenStreetMap Project and USGS to beautifully render topography in North America. I’m taking advantage of this open-source tile set to add an important visual element to my brother’s story; the user has a detailed visual representation of the mountainous landscape my brother hiked through. In fact you can see how this plays out in the story itself when he describes “the climb”, the first of many ascents on his trip, which he mentions in the second chapter (Warner Springs to Idyllwyld).

For the content of this story I’m scraping text from my brother’s blog using a Python script that uses the beautiful soup library. The photos and videos he  has shared directly with me and generously gave me permission to use. Needless to say there’s an added editorial and curated component to this work from choosing the best photos and checking spelling and grammar. Being comfortable with editing writing from my undergraduate studies in Geography and Urban Studies is definitely helping here!

I’m almost set to do some user-testing, with the intention to get some feedback to improve the next iteration of the project. One last part I’d like to accomplish is for the animated marker to trigger pop-ups on the stationary markers as it passes them. I also have the task of editing and curating my brother’s writing which is another huge undertaking given the detail and length of writing from his blog posts.

The project in its current state can be viewed here, though at this time I have only tested it in the Chrome browser so it may not work in Safari, Firefox and Internet Explorer.

CC Lab Midterm: Arduino & Node JS

Posted: December 13, 2013 in CC Lab
Tags: , , ,

screenshot1 screenshot2 screenshot3 screenshot4 screenshot5

This project uses an Arduino Uno with a Node JS server running locally to create an abstract visualization within the HTML5 Canvas element. The button and potentiometer on the arduino alter the the shapes being drawn on the screen. Code is available here and demo video available here


This past weekend I had the opportunity to participate in the Re3 Story Hack sponsored by The New School, Hyperakt, Vizzuality, Canada Engineers Without Borders, and Blue Ridge Foundation NY. The hackathon’s goal was to address social issues such as homelessness, poverty, immigration detention, solitary confinement, and gun violence through creating narratives and tools that challenge the main stream media’s representation of these issues. My team was to tackle the issue of gun violence; specifically addressing the lack of mental health resources for inner city communities that deal with gun violence as well as the normalization of violence, specifically with young adults. The first part of our day on saturday was spent doing research that took the form of interviewing two violence interrupters working in Brooklyn.  Both were men that had done jail time and chose to return to their communities with the goal of doing work to end violence taking place within them. Hearing these men’s stories, work, and perspectives was an invaluable experience and in itself alone worth attending the hackathon.

From these interviews we brainstormed ideas and reflected them back to one of the interrupters who spent the day at the hackathon with us and another team working on the issue of gun violence.  Our team who was composed of a documentary film maker, a professional graphic designer, a person working in media and a couple other MFA students from SVA and Pratt came up with the idea to create a series of posters and a website that centers around 4 central ideas we gained from our interviews; 1. Every Shooting is a Mass Shooting, 2. What goes up comes down, 3. Hurt People Hurt People. and 4. Check your status.

“Every Shooting” became the title of our project. It metaphorically refers to the act of a single shooting causing a ripple effect in a community. Not only are the perpetrator and victim affected but also are their friends, significant others, family, teachers, place of worship, and other community members. These ripple effects lead to unaddressed trauma in communities, a point which is expanded in #3.

“What goes up comes down” was inspired by one of the interrupters stories of firing gun shots into the air off a fire escape. At the time he had no thought that the bullets would land some where, potentially endangering someone’s life. This symbolizes that actions have consequences and asks youth to consider the consequences of their actions before acting.

“Hurt People Hurt People” draws from the fact that those who have been traumatized and abused are likely to inflict abuse on others. This was the case with one of the interrupters we spoke with, growing up he experienced both domestic violence and sexual abuse.  Not having anyone to talk to about these experiences he internalized them and as a result inflicted violence on others.  It wasn’t until he did jail time and reflected on his situation did he start to consider why he had performed violent acts.

The last point asks the viewer to “Check their status” or to reflect on their mental and emotional state. It asks a series of questions and then presents links to resources where the individuals can seek help.

Another web developer, Paul Schreiber, and I coded the website portion of the project while Stuart Rogers created the poster designs. Other members of our team worked on the copy and theme. The website can be viewed temporarily here:

Our goal is for this project to become integrated with a Instagram campaign (proposed by the other group that was also tackling gun violence) that targets youth and tries to create a point of entry for them to access resources that will help them achieve positive goals in life and stray away from violence. We are now looking into meeting andworking with the Fortune Society to see how the project can move forward.  The hackathon was very intense and a ton of work but it was a very rewarding experience, I’m glad I chose to dedicate a weekend to it.

Interactive Abstract Expressionism

Posted: September 25, 2013 in Web3
Tags: , ,


For this Web3 assignment I used CSS3 properties and Javascript to create an interactive and playful webpage. Using CSS’s transition allows for smooth animation like actions, so when using the :hover selector to change the objects’ shape, location, and color the transition happens smoothly rather than abruptly.  Additionally the @media query dectects if the browser is resized to a small width or height and causes the shapes to behave differently. If the user clicks on the shapes they will change color an action that is being implemented using a javascript function that converts HSV input values to RGB outputs for CSS. This allows for easier play with color (it’s much easier to adjust colors using HSV than RGB when passing number values). The function takes randomly generated numbers as inputs for the Hue and Saturation parameters. Saturation stays in the upper end so the colors don’t get too pastel looking, while Hue cycles through all 360 degrees of the color spectrum. Setting a min-max value for saturation involved a bit of a hack for the Math.random() method but appears to work well. Value (aka brightness) is kept at 100% so the shapes don’t get muddy or grey looking. For Safari to read the CSS transition selector it pust be prefixed with `-webkit-`.

link to live webpage here

Fun with Canvas and Javascript

Posted: September 25, 2013 in CC Lab
Tags: ,


For this assignment we explored the canvas element in html5 with javascript to create an interactive web page. My code incorporates two draw functions, one to create circles at random sizes and another for the lines.  JQuery maps the mouse’s position to the center of the circles and end point of the lines. while a setInterval function calls the drawing functions at a specified rate in frames per second.  The transparency effect is created using the rgba color mode where an “alpha” or opacity value can be given to the normal rgb color value.

link to live page here