Variations on circular 10 print

For this week’s assignment for Intro to Computational Media with we were to create an algorithmic design with simple parameters, using a rollover, button, or slider from scratch. 

I took inspiration from the mandalas and the 10 print CHR$(205.5+RND(1)) book by Nick Montfort, Patsy Baudoin, John Bell, Ian Bogost
Jeremy Douglass, Mark C. Marino, Michael Mateas
Casey Reas, Mark Sample, and Noah Vawter.

Interact here.


Public observation – The Highline

For this assignment I’ve chosen to observe the High Line park. The High Line is a 1.45-mile-long (2.33 km) elevated linear park, greenway and rail trail. It was created on a former New York Central Railroad spur on the west side of Manhattan (between 12th street and 34th street). The park is built on the disused southern viaduct section of a New York Central Railroad line called the West Side Line. Repurposing of the railway into an urban park began in 2006, with the last section leading to Tenth Avenue and 30th Street to open by 2018 once the first phase of the Hudson Yards Redevelopment Project is complete.

The park’s attractions include naturalized plantings that are inspired by the landscape that grew on the disused tracks, views of the city and the Hudson River and various art installations that are scattered across the park.

The abandoned railway has been redesigned as a “living system” that draws from multiple disciplines including landscape architecture, urban design, and ecology. These enable a quick green getaway amidst the manhattan lower west side concrete and glass buildings.

For it’s visitors, the High Line serves as an escape from the regular sights and sounds of the city by elevating them to a bird’s eye view of the street and neighboring buildings. Unlike other parks in the city, I find the High Line special for its intricate mix between nature and the surrounding city. 

In this current observation I visited the High Line at 2pm on a Monday. I managed to identify locals on their lunch breaks, lots of tourists – an assembly of humans enjoying the mixture between the city sights and the feeling of a green oasis within the noisy city. the average amount of time people come to visit ranges between 10-20 minutes and hours (it takes about 30 minutes to walk from end to end).

There are multiple entry points to the park (12 to be exact), Visitors need to climb up a staircase or take an elevator to reach the High Line’s level.

I started my observation in the 14th street entrance.There are 2 main ways which a visitor can enter the park, via a case of stairs or an elevator. there are 44 stairs to climb which take approximately 40 seconds, the elevator ride is also 40 seconds. I placed a camera on the street level to measure how many people take the stairs vs. the elevator.

Almost four times the amount of people chose to climb the stairs over taking the elevator.

The park has a lot of different attractions that could be experienced while walking around, some main ones are:

  • A pathway between West 14th and West 15th Streets, is flanked by lounge chairs and a water feature that offers visitors a chance to dip their toes during the spring and summer. I’ve found this part of the park surprisingly refreshing as a lot of the visitors actually took their shoes off and dipped their feet in the water. For those who did not want to take their shoes off, the sound of the flowing water creates a calming atmosphere. There were alot of children playing in the water and it was hard to find a spot in the seats across the water.  

  • 10th Avenue Square and Overlook – As part of the High Line’s conversion to a public space, many of the structure’s steel beams were removed from this unique space where the High Line crosses 10th Avenue, creating an amphitheater-like space with views up 10th Avenue to the north and views of the Hudson River and the Statue of Liberty to the south. Even though the view is stunning, most of the people that sat there were tourists that took photos of the street, it was a hot day and the sun made it difficult to stay there for long. Across from there was a corner with trees and benches that seemed more occupied by locals and tourists alike that found a hideout from the sun.

  • Faucets are distributed across the park, and serve cold water. People stop and fill their water bottles and drink from the faucets. I have found that those that have shade are more in use than those without.


  • The High Line’s only lawn stretches for an entire block north of West 22nd Street. Anchored on the southern end with seating steps made of reclaimed teak, the Lawn is a popular spot for picnics and the site for many of the park’s summer programs. Shade was a rare commodity here, with a quick look you could see most of the lawn was cleared from people because of the sun.

When thinking about architecture and urban planning, these are two domains that their main objective is humans and their wellbeing. Designing a park, a place where people come to interact with nature, is a task that occupies a wide variety of fields and responsibilities. I think that the designers, urban planners and gardeners did an amazing job. an example of this is the right answers to the right questions in terms of maintaining a strong visual connection between the past and the present, the city and nature and overall experience of visitors in the park. the close, almost violent proximity of the city to nature and the rapid gradients from one to another.

One thing was missing for me when walking the park, it seemed like there was not enough shade for visitors in places it mattered the most, lookout points and faucets, among other places.

In the end of the park, close to 10th street, there is this large mural on the opposite side of the building, which kind of connects you to the geographical past of the park, which to me serves the point for human centered design.



p5.js Versions on halftone camera

In this sketch, I continued using the ‘halftone effect’ and loaded into the sketch a live video feed using the capture video method in p5.js. The video’s pixels are being processed and converted to different shapes according to their luminance channel. Another feature in the sketch is an echo effect that is increasing over time – that effect can be reseted by clicking the screen. 

In this sketch, I used random(); operation to color certain elements of the ‘halftone effect’ + The video’s pixels are being colored by mouse movement on the screen. Another feature in the sketch is an echo effect that is increasing over time – that effect can be reseted by clicking the screen. 

In this sketch, I used random(); operation to color certain elements of the ‘halftone effect’ + The video’s pixels are being colored by a counter cycle that determines each shapes color. Another feature in the sketch is an echo effect that is increasing over time – that effect can be reseted by clicking the screen. 

Simple application for switches and LED circuit

For this week’s lab circuits building I focused on 3 basic circuits:

  • LED connected to a power source

Similar to the lab example, I used an arduino to power the breadboard, connected the LED to a resistor and closed a circuit.

  • LED connected to a power source and controlled by a potentiometer

Similar to the lab example, I used an arduino to power the breadboard, connected the LED to a resistor and closed a circuit. I added a potentiometer to control the voltage that the LED receives. 


  • LED connected to a power source and controlled by a LDR (light dependent resistor)

Similar to the potentiometer example before this one, I used an arduino to power the breadboard, connected the LED to a resistor and closed a circuit. I added a LDR to control the voltage that the LED receives. once the circuit worked I built a small wood box to hold the two components together.

For the next itteration of this projects I’d like to invert the LDR sensor so it would light in the dark as opposed to light when bright.



P5.JS first sketch – self portrait

For the first assignment I decided to create a self portrait. 

I thought a lot about what would be interesting for me to work on, and after a few Ideas were tossed around in my notebook I decided I want to abstract the self portrait and to try and break down a high resolution image and work with the 2d matrix.

A 2D image is based of pixels distributed in matrix of X and Y. every pixel has an X value and a Y value for its position, plus holds its color attribute, for example if we look at the smiley face below X = 0, Y=0, (255,255,255,1).

Initial mock

Every pixel has its own luminance attribute that ranges between 0 (absolute black) and 255 (absolute white).

Pixel luminance – graphic representation

In the above drawing there are 6 squares that illustrate 6 different representations of luminance (the brightness channels of an each pixel).

I wanted to create an abstraction of those 6 squares to simply illustrate a graphic representation of them with p5.js 2D Primitive shapes. if we constrain each shape inside a square (a representation of a pixel) we can see that each shape fills up the square and creates an array of different brightness values. 

Pixel luminance – graphic representation

  • Part 1 – Image processing:

I started with picking a picture I liked – me destroying a donut. This picture will be used as a map for the code to determine what primitive shape (rect, ellipse, dot line or point) it needs to put on each location of the 2D matrix – by its luminance value. For optimization purposes I did a little photoshop processing to the picture (scaling it down to 50 by 50 pixels and converting to greyscale values) in order to for the code to run faster.

Pre p5.js Image processing

Part 2 – writing the code:

First thing I did was to start with an example code that loads the image file witch I have uploaded to the internet. 


Second, I needed to scan and load all of the original picture data into an array to get the luminance attribute, witch was the tricky part. I did that by forming a ‘nested loop’ – one loop for all the width pixels and another loop for all the height pixels in the image. After that I stored that number into variable that I named pixel (with the kind help of Barak Chamo).

Third, I wrote a series of If statements that would draw different shapes for each color range. for instance, all of the most bright pixels will be big white squares and the most dark pixels would be just a dot.


And the final result:

Source code