Archive for the ‘Web3’ Category

Guess That NYC ‘Hood from Chris Henrick on Vimeo.

An in progress NYC neighborhood guessing game for the web that runs on Node JS via the Express framework and MongoDB with Leaflet JS, GeoJSON and Underscore JS. This was my final for Web 3: Javascript last semester, taught by Mani Nilchiani. The user navigates a map of New York City and selects neighborhoods that come from a dataset by PediaCities. Their guesses are checked against the neighborhood boundary data and then stored in a NoSQL database (MongoDB). If the guess is correct then the polygon for that neighborhood disappears from the map and they are color coded blue in the left part of the interface.

I’d like to make the game two player using web sockets so players¬†could compete against one another, as well as add a timer to give a sense of urgency. There is also the possibility of making this game more in depth conceptually such as providing historical information about the neighborhood being guessed as commentary on gentrification in NYC.

Code for the project is available on GitHub.

Interactive Abstract Expressionism

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

interactive-abstract

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