Connected Devices: 002

My life long technology dream has come true: I made a clap-light.

Using the Philips Hue API and accessing a device’s microphone through the browser, a user can toggle a pair of Hue bulbs on and off. Using p5.js, the browser routinely polls the microphone, checking for a sound reading above 0.1. When loud enough, the page makes an AJAX call to change the on/off state. The new state is then saved so it can be toggled.

The full code is available on Github; a snippet below shows the web-interface component.

 

Zoom Zoom Zoom (024)

Zoom Zoom Zoom is a triptych studying the relationship between scale, resolution, and zooming in aerial imagery.

The first image functions as a ‘typical’ zoom, where an increasingly smaller geographic extent fills the same area. The second image crops its extent to match the area presented in the first, while maintaining its pixel resolution and scale. The third image resamples pixels within the smallest extent as the first zooms out, with the largest extent being the most “pixelated”.

Why Zoom?

Zooming digitally represents the same features — whether buildings, parks, or streets — at different scales. However, each change in scale also means a change in resolution, transforming the feature again as it has more or less detail. Furthermore, each change in scale prompts a change in adjacency, and meaning, between those features. A leaf becomes a tree, which becomes a forest, which becomes a park in the city.

Technicals

The cropped and zoomed images were exported from QGIS at the various resolutions and extents. The pixelated third image is generated in the browser using p5.js, which also handles the scrolling action to change scales.

Next Steps
  • Export pixelated images from Processing rather than generate them in the browser, for better performance.
  • Repeat the study for other areas of New York City.

Intersections (023)

Intersections represents streets only where they intersect. On hover, the full lengths of crossing streets are shown, capturing other points along the way.

Intersections is similar to Dynamic Halftone (019), in that our mind fills in the missing pieces; the street grid is discernible even without the explicit connection.

Technical

Working from the NYCOD Street Centerline SHP, point objects were created from intersecting line segments, around which a buffer was drawn. Centerlines were then clipped to the buffer and exported as a GEOJSON.

Next Steps
  • Increase geographic extent, and make pan-able.
  • Try different color combinations for the background, line work, etc.

Typical, or All the Blocks in Manhattan (022)

Typical, or, All the Blocks in Manhattan rejects the notion of a “typical” New York City block.

When overlaid, all blocks appear to form a rectilinear density at the center. Yet, there is no standard shape or size, only a tangle of exceptions. Scrolling down the page individuates each of the blocks, and streams of skinny rectangles are routinely interrupted by irregularity.

Technical

A block shape file from NYCOD was exported from QGIS as a DXF file. In Rhino, individual line segments were joined into closed polygons, medians were culled, and self-intersecting lines were identified and trimmed.

The web map was built using d3.js. While typically used for charts, it also supports geographic functions including rendering GEOJSON objects as SVG elements. While the blocks were initially projected using the mercator projection, they were translated to form a cluster, and then positioned in a vertical line.

Next Steps
  • Automatically scroll, up or down, accelerated with mouse movement from the center of the browser.
  • Add blocks from all the boroughs of NYC.
  • Add labels, on mouse over, indicating borough or neighborhood and area.