ICM Final

Black Market Vending Machine

The intent with this final project was to manipulate information and data into an interesting, interactive, and palatable form.


A particular infographic about the cost of legally acquired organs caught my attention at the beginning of this year. While the legal acquisition of organs does occur, more often than not in this country, they are officially donated.

However, as is the case when the demand far outweighs the supply, people tend to look elsewhere.

Around then I became enthralled with black and underground markets.

These illegal centers of commerce speak to many of humanity’s honest demands, however disturbing they may be. Their existence serves to highlight our ability to commodify almost anything in this world.

There are the obvious products, such as drugs, but then there are the darker and more disturbing commodities, like girls being sold for less than 1 US dollar in some places.

My initial idea was to make a graphic that was a little more playful, but while I was researching, this approach felt trivial and thoughtless considering the subject matter. I started to feel as though I needed to provide solutions or more information about the subject at large.

When I spoke with Sam Lavigne about how to present this loaded information, we both came to the conclusion that just the presentation was enough, that there was no need to hit people over the head with solutions. In other words, merely making someone aware of such disturbing commodities and their relative prices was a powerful and not tacky approach.

I still wanted to highlight the absurdity of the whole situation, so I did choose to make a vending machine-style interface and added some lighthearted shopping music. I wanted it to be a little uncomfortable.

I chose to use Havocscope for my information as opposed to live underground market sites (like the Silk Road) 1) for ease of access to information and 2) it provided an interesting data set since it has specifically cited incidents in various countries. It became apparent, while sifting through the information, that comparing the prices of things in different countries contributed to the disturbing nature of the underground market.

It is also interesting to note how Havocscope obtains their information:

Havocscope is currently monitoring 50 black market products and activities around the world for which an estimated financial value is available. These values are usually obtained from government agencies, non-governmental organizations, and academic papers or media reports. Every figure that is a component of the Havocscope World Black Market Value is documented with the original source.  In some instances, the total illicit trade value is an aggregate total based upon several sources. In these instances, a link to every data source is clearly listed.

This is the first testing version of my project.

I received some good feedback about how small the vending machine was and decided to scrap this version and make a zoomed in version. I was also struggling with how to make the complicated, interacting buttons.

Each of the buttons are invisible DOM elements that toggle on and off.

This project, while incredibly useful for me, was difficult. It was mostly difficult in the sense that I knew there was probably a better way to do what I was doing, but I just didn’t know how to execute it in such a way.

Looking back, I see a lot of things I would change —
1. Cleaning up the code by looping through repetitive code: I have a lot of repeating elements, just with slightly different locations that I could loop through. If nothing else, I learned the long way.

2. Combining several different languages is difficult: I used both DOM elements and p5.js and applying common rules for each of these proved difficult and caused my code to be less condensed than it was.

3. Add more animations and graphics: Right now, it’s a little lacking in that department because of time, but I do see a lot of potential and would enjoy working on this some more in the future.

4. Make the interaction more intuitive: I think I got a little lost in the concept and as a result, the way the user interacts with the sketch isn’t fully intuitive. I believe resolving #3 would help this issue.


Thank Sam Lavigne for his creative input, Melanie Hoff for her help with never-ending-interacting DOM elements, many of my classmates for their useful input, and of course Dan Shiffman for his patient guidance.

ICM8: Final Project Proposal

For my final ICM project, I wanted to use an interesting data set, in particular, a real-time data was most appealing. While I was brainstorming, I thought back to an infographic I had previously found during my visual language class.bodyparts

Aside from loving the visual, I also loved the information being displayed. It speaks directly to my love and curiosity in the body. While this infographic is depicting prices of ‘legal’ organs, this led me down the path of trying to find real time data with regards to prices on the black market.

Underground markets are not only a fascinating anthropological study in and of themselves, but they comprise a serious subsect of the actual economy. According to Buehn et al., underground or “shadow” markets make up about 1/6 of the estimated world GDP. What is being sold and where is it being sold?

As one can imagine, finding public information on illegal goods is not an easy task. I was considering searching through darknet markets (like the former Silk Road), but information on these sites is not easily parsed and nor is it something I care to have lingering in my browser history. Many of these sites have actually been shut down and are readily watched by authorities.

Analysis of goods on a former darknet market, Evolution by Ryan Compton - http://ryancompton.net/2015/03/24/darknet-market-basket-analysis/
Analysis of goods on a former darknet market, Evolution by Ryan Compton – http://ryancompton.net/2015/03/24/darknet-market-basket-analysis/
Timeline and status of darknet markets, as of June 7, 2015, http://www.gwern.net/Black-market%20survival#analysis
Timeline and status of darknet markets, as of June 7, 2015, http://www.gwern.net/Black-market%20survival#analysis

During my search, I came across the website Havocscope.

Havocscope provides information and threat intelligence on the global black market. Due to the ability of transnational threats to cause financial losses and social harms, key statistics and data about the illegal economy is provided to help mitigate this risk. The information about the black market has been collected from government agencies, academic studies, media reports, and reported data from our sources.

While not foolproof, it is probably one of the more reliable sources concerning this type of information.

On this site, there are a number of datasets that typically breakdown by country. The information can be very specific (for example, user reported price of a single incidence) to the point where it could be difficult to present.

My original idea was to make an interactive infographic that depicted costs of body parts on the black market. Static infographics about this information have been done before (see above, herethis) , but I’m interested in creating an interactive visual that adds layers of information, including links to organizations actively working to prevent such activities and even those that shockingly contribute to the problem:

no. http://kidneykidney.com/
no. http://kidneykidney.com/

Screen Shot 2015-11-10 at 12.27.11 AM

The more I look into the illegal markets of organ donation, the more appalling it is, most importantly because it takes advantage of poor, unwitting populations.

The purpose of this would be to bring light to this type of trafficking in a visual engrossing way. Often, this type of information is presented in a very light-hearted way, while the reality is anything but — I want the project to depict this. While it may be educational, that is not my sole purpose. Rather, I would like to emotionally engage people with respect to this issue by way of presenting the honest and unpleasant truth. I feel as though a quirky and morbid fascination might initially engross a viewer (as it did me), but the reality of the situation would soon become apparent. I don’t intend to shock, but rather shed some reality on a situation.

Since Havocscope.com really only has figures on kidney prices globally — the most sold organ — I would have to use other sources, for which there is no lack. However, I would be interested to hear from the class if they would rather interact with other types of information or perhaps a visual that was a Black Market Pop Up Shop, which had interactive items with their associated prices and information. My only concern with this is the scope is too large to really add interesting layered data.

Some inspiration
Build a human



ICM8: Video & Sound

This week was a struggle.

I’m not entirely sure why, but I think it was a combination of mismanaged time as a result of starting a new class, post-midterm mind melt, and a general lack of inspiration. I have used video and sound in many past projects successfully, but I really racked my brain to think of something inventive this week.

My first attempt was to pre-load several videos and put a randomly chosen video next to the camera capture video and create a sort of dance-along game, where you could watch the choreography in the video and yourself simultaneously. This felt a little simplistic, so I moved on.

I decided to use one of my favorite videos which is an interactive dance performance by Klaus Obermaier called “the concept of….(here and now)” and create a little homage.

I wanted to use both the video and the sound from the video, but this proved a little tricky. I wanted to visualize the frequencies in the track of the video, but I couldn’t figure out a way to do this without loading the song separately. Unfortunately, when you preload the song and video, there is a time delay. I tried many things to sync the video and sound, including using a video cue to stop and play the track, but was unsuccessful.

I even tried to find a way to mute the video track. How do you do this??

I’m just seeing now that there is a p5.Delay function, so I’m not sure if this would help the issue.

There is an ellipse to which I mapped the Y-position to the amplitude of the song.

Again, not my favorite week, although I do like the aesthetic of the whole thing.


ICM7: Data

I really enjoyed the assignment this week. I knew that I wanted to try and gather information from Reddit, which I assumed would have an open source API. In particular, I grab information from the subreddit called Relationships. This subreddit is a place where people post relationship problems in hopes of receiving advice form the Reddit community. It offers a very intimate and fascinating look at the dynamics of human relationships.


When I first went to the site where Reddit offers up it’s API info, I found it was not as intuitive as I had thought. I think they have provided quite a bit of information for serious coders and developers, which, as it stands, is not me. I did a little searching on the interweb and found that grabbing data from Reddit was actually as easy as placing a .json at the end of the url. Since I wanted the top posts, I used:


The next task was to figure out where the title of the post was actually housed amongst the multitude of information this json returned. This is where I was made aware of a chrome extension that organizes json data. It was a life saver.

redditData = data.data.children[10].data.title;

Changing the object number in the array changes the title of the post.

When I looked more closely at the information on the site, I realized what was more interesting were the comments and advice people would give: Some were harsh, some were funny, some were thoughtful.

Grabbing the top comment was a little more difficult, because the comments associated with a particular title/problem were loaded in a url with a specific id key. In order to randomly sift through comments, I needed these associated keys.

What the previous data that I grabbed did give was the url of the title. In the url was also the key, so I put that information into a new loaded json as such:

var commentUrl = ‘https://www.reddit.com’ + redditUrl + ‘.json?’;

(Initially, I wanted the top comment, but some titles had so few comments that they had not been rated yet and so the search returned nothing. So I dropped the sorting)

From this new loaded json, I went back in and found the comment siting in .body:


Finding this last bit of information was the most difficult and time consuming. I also realized, since I was searching from new titles, some of these titles had no comments. Interestingly, the time of day in the western hemisphere influenced this a lot — there were few comments at night and many during the day. If there was no comment, I wanted to insert my own saying, so I made an If statement concerning the length of the array children.

With the comments, I wanted to create an advice generator. Since the information on the site was being refreshed so quickly, I wasn’t too worried about making it random at this point and instead, I could just cycle through the titles (1-25) one at a time:

redditUrl = data.data.children[d].data.permalink;

Creating the DOM elements wasn’t too bad, but I realized that in order to make a button, I needed to queue up my data retrieval in functions and I also needed to place the comments into an array, in order to clear them.

I really wanted to make the pictures of the random relatives change, but I was having problems loading dom images into an array, since CreateImg displays the image rather just loading it.

I added a bit of decoration at the bottom, but for some reason, the animation stops when the button is pressed — why is this?

I really loved the detective work involved with this assignment.


Final project inspiration:
Another data set I’m really interested in exploring (and which I should next class) is that of lost languages. I would love to make a visualization for this information as well as an interactive image.

ICM6: DOM Elements

This week, I decided to combine and Visual Language assignment about color and ICM. I found that I actually enjoyed having a constraint with respect to creating an image. Coding-wise, I knew I needed to incorporate DOM elements.

Rainbow of Acrylic Ink in Water. Color Explosion
Rainbow of Acrylic Ink in Water. Color Explosion

As a result, I had a clearer image in my head of the sketch I was trying to draw. I knew that I wanted to make concentric circles with increasing RGB values on a monochromatic spectrum.

I first started simple and small by creating a For loop to create the circles. (If you adjust the howManyTimes variable, this can actually create some really interesting patterns)

// var dia = 500;
// var howManyTimes = 8;
// for (var i = 0; i < howManyTimes; i++) {
//   var g = 0;
//   fill(g, 50, 50);
//   g = g + (dia – i*100);
//   ellipse(circle.x, circle.y, dia – i*100, dia – i*100);
// }

At some point, this proved problematic as I wanted to tie the Fill() to the i limit, as well. Then I created an object array with a color value contingent on the associated 4 loop.

In thinking about DOM elements, I decided to add sliders. Since in this first drawing, I had the Blue value incrementally increasing in the circles, I decided to make 2 sliders: one that would control the R value and one the G. I also printed the values of the sliders on screen so that you could see exactly where you were on the RGB scale.

I also made 2 more drawings, G & R, which had these color values static.

I started with a black background, but soon decided I wanted another slider to toggle the color from black to white in order to visualize the effect on the displayed colors.

In our VL class, we also spoke about color-associated emotions and how businesses manipulate this concept for advertising purposes. For each color, I added an array with a list of emotion strings associated with the static color in each drawing. Originally, I wanted this array to be a DOM element, but ran into some problems. I decided to code it on the canvas first and then tackle how I could do this as a DOM. I came across an example from Lauren’s class that used an add button to add a new paragraph. This worked. However, it seems to add all the words into my array whether or not I push them — simply because they are listed under the AddButton function. The words also would not clear individually or even as a set — just all at the same time.

I played around with a lot of other DOM elements (captureVideo, images), but was not too successful. With the video capture, it ended up creating 2 videos: one on the canvas that I could manipulate the properties of (like tint) and one off the canvas that I could not manipulate.

I also really wanted to create an array of color-themed images off the canvas that would cycle through every time the mouse was clicked. Ideally, I would have loved to draw live from Google searches.Screen Shot 2015-10-14 at 11.25.38 AM

My greatest hurdle this week was with the central drawing. Because I was changing the the colors of the circles with a slider, I couldn’t create the object in setup.  Afterwards, I decided I wanted to give the illusion of motion, so I created a move() function. However, since the object was in draw (and therefore be continuously redrawn) and the

For help, I spoke with Alon about this. His suggestion was to create a constructor function. CODE HERE

After speaking with The Dan Shiffman, he suggested I keep with my current approach, but move my object to setup and give my .display() function arguments that are the colors coming from the slider values.

With Dan’s adjustment, I really liked the movement quality, so I included his adjustments in one of my drawings.

ICM5: ASMR Array


Inspiration for my drawing this week was derived from the fascinating Autonomous Sensory Meridian Response (ASMR) videos found on YouTube. ASMR is a neologism to describe a perception phenomenon that causes pleasurable tingling in the body in response to sensory or cognitive stimuli.

The trigger that most ASMR videos online use is that of whispering. The idea is that this barely perceptible and low-tone sounds trigger that sort of tickling, hair-raising feeling that you get when someone whispers in your ear.I love that people have dedicated their time and efforts toward making these videos for the purpose of pleasuring other people’s senses beyond just a visual component, but I did want to create a visual for this feeling.

I found this video after I had the initial idea of concentric circles. It’s ambient and trippy theme fit well with the visual in my head. (Authors note: I really like these videos as an alternative to white noise – they are quite pleasurable as a working background. Do try this one)

Making this drawing was a mix of grand successes and failures. I love that feeling when you visualize something and then realize you have the knowledge and tools to actually create that. Unfortunately, there are still many things out of my grasp.

My initial idea was to have tiny squares along coincentric paths around the main ellipse (sun) in the image. Sadly, I wasn’t able to do that — I need some help here.  Instead, I went with actual circles.

The majority of the drawing was really about using objects with associated functions. This was quite fun to see come together.

I hit a wall with the tears. I had intended to have one fall and then have another replace it after it left the screen, but I was having trouble doing so. This problem occupied a hilarious amount of my time last night, so much that I decided to change course. I did wake up this morning with an epiphany that I simply had an inequality pertaining to the y-heigh the wrong way. It’s always the little things.

I also changed course, because I realized I hadn’t used any arrays in my drawing. Using an array, I decided to push() a Tear into my tears[] array every time the volume + button was clicked, given the volume > 1. I actually preferred this effect to my original intention, but I’m glad the epiphany happened, nonetheless.

I quite like the simplicity of this sketch along with the strange hypnotizing effect. It’s a good prelude to Halloween.

SYNTHESIS: on chickens

At the end of last week, we had a chance to put to use some of our burgeoning skills during a class called ‘Synthesis’ wherein we began to integrate physical computing (Arduino) and computational media (p5).

All 1st-year ITPers gathered on the floor. We were separated into pairs of 2 and given less than 2 hours to build a browser experience that responds to a single button/switch/sensor input.

I was paired with David, whom I had never met until that day. We quickly bonded over our mutual affection for Werner Herzog and decided he needed to be a part of our synthesis project.

Mr. Herzog has a particularly unique view of life. He can take the simplest idea and weave it into a hypnotic, even therapeutic (albeit, dark) narrative with both his choice of words and his distinctive voice.

In our effort to highlight this, we decided to make a digital switch out of a reclining leather chair so that when the headphone-clad user was fully reclined, a soothing Herzog monologue would play. David quickly rigged up a circuit so that two pieces of metal would touch when the chair was upright and then separate while reclining.

We used an audio clip from a segment wherein Werner muses on chickens:

When our switch was closed (or digital input = 1), the user would see the following on screen:

Digital Input = 1
Digital Input = 1

When the switch was open (digital input = 0), the user would see and hear:

Digital Input = 0
Digital Input = 0

Our code worked perfectly, but we had some problems with our switch connection on account of building quickly. As a result, all of our visitors had to find the sweet spot to hear the sweet nothings of Mr. Herzog. The spot was so finicky that even moving the slightest inch reset the track, so our invitation to ‘Relax’ turned into quite the opposite which, in reality, complimented the voiceover quite nicely.

Rebecca approves
Jamie ponders chickens
I test drive



ICM-4: Compartmentalizing — code feng shui

This week, I wanted to work within a distinct set of confines with respect to the image I wanted to create. When the outcome of the code is an image, I found it easy to let your imagination wonder without constraint or much focus on organization. And since this week, we were to focus on compartmentalizing and organizing our code, so I choose to work from the well-known game ‘PacMan.’Pac-Man_-_Pac-Man_Collection_(GBA)

First of all, let me say that I gained an enormous amount of respect for a game that is often described very simple. When I started to unpack all the animation and interaction present in this game, I realized how much detail was really involved.

I took quite a bit of time just drawing the background. I used a for loop to iterate though the dots and created functions for the border of the actual game. For many of the barrier elements, I created double lined boxes or unique shapes. To do so, I created the first shape and then just shifted it so that a slightly smaller shape would fit inside. I tried to play with the resize() function, but was having significant problems.  Many shapes, I just copied by translating and rotating pre-existing functions.

This project became much more complicated when I started creating the animated elements, in particular the ghosts. My first approach was to create a compartmentalized function for the ghosts, with the idea that I could just call the function 3-4 times depending on the number of ghosts I wanted. This worked, except when I tried to get the ghosts to move randomly from -1 to 1 in a confined space, I ran into problems.

After a serious heart-to-heart-to-heart with 2 of the residents, it became clear that what I needed to do was create individual ghost objects and assign them to part of the ghost class in setup(). Then, I could create functions within the ghost function that would dictate certain characteristics of these objects, such as display and move. The residents also helped me out infinitely with the idea of “this” within functions.
See code comparison in links below:

Simple Ghost
Class Ghost

In this way, I also created pacman. However, with pacman, I also had the added challenge of trying to get him to appear to “eat” things. I knew I wanted him to flash quickly between a circle and a pie arc, but it took me some time to figure out that I could use a counter to do so. Using the counter also pointed out to me the importance of order in “if, if else” statements, meaning, the program cycles through the code sequentially and will execute the “if” statement until it is true. In this way, it became very apparent that the option at the end of the counter needed to be stated  first. I still have questions about smoothing out motion with the counter as there is a significant difference in motion between adding 0.4 and 0.5 to my counter.

[UPDATE: Shiffman was able to figure out the counter issue. I shouldn’t have written the counter as an “If Else” statement. Doing so made the program cycle through several FALSE statements before landing on a TRUE once, imparting an artificial delay in the flash between the circle and arc. The solution to this was to simply make 2 IF statements, like so:Pacman Eating Counter


At this point, I knew I couldn’t build the game exactly, but I really wanted to add as many elements as possible. My greatest struggle to this point was with confining the motion of pacman AND making him interactive along that path of motion at the same time. In order to do this, I tried to confine pacman using a series of IF statements that dealt with the x & y location of pacman. To actually confine him in my grid would mean many of these statements and as I started to add them, I realized that there were too many conditions. I got as far as about half the grid and then pacman started traveling on a diagonal, which was not intended. I understood enough to realize this was probably a larger conceptual problem beyond my scope at this point, but not enough to actually fix it.

After meeting with Shiffman, he offered a conceptual solution to the confined motion problem. He suggested I create a grid system under the game itself and use an array to assign valid and invalid arguments to each portion of the grid. Meaning, pacman can only go where the grid is valid. In this way, it’s independent of the user’s cursor.

Shiffman suggested that I pare away all the extraneous background and focus simply on the motion of pacman on a grid as a future project, which is a suggestion I would like pursue for next week.

Until then, Pacman will live as ‘Paceman’ HERE until further construction can be done. Code

ICM-3: space collaborations

In keeping with our themes, Lindsey and I chose to collaborate on a p5js spaceship hull. We decided to separately create our own spaceships and then trade code and tinker with each other’s iterations.

My version of space can be viewed HERE!
Lindsey’s fantastic version of my sketch is HERE!

Some problems I ran into while doing this project:

1. How do I combine ‘for’ loops with animation?
I wanted to give the sensation of flying through space by creating fast flying stars (short lines) that would fly off the side of the page in either direction  AND emanate from their original points of origin so it seemed as though they were being replaced every time they shifted their length over.

2. Creating a slider from scratch was more difficult than I envisioned.
This was in particular due to the ‘offset’ variables that I did not necessisarly think about on my own.

3. Using numbers in place of global variables
When I did finally look at Shiffman’s slider example, I amended my own code to fit his model. In doing so, I used some numbers instead of pre-defined global variables. This gave me some problems later on down the road with respect to the slider slider length under the mouse pressed function. The limits of my y-value for my slider were too confined and therefore, the slider only worked within in a 20 pixel space. This took me some time to figure out and made it clear that I need to work on the concept of working with global variables.

4. strokeWeight
This relatively simple command gave me a huge headache. I forgot I had previously changed the weight to 4 and was then drawing small ellipses and trying to fill them with random() colors. When the colors were not changing, I was completely perplexed until I finally figured out that the stroke was so thick that it was engulfing the center of the ellipse and rendering the fill() moot.

In general, this exercise very clearly demonstrated to me how much time can be spent tweaking and fixing all the details of a p5js animation! I did not have time to get to all the little details that I would have liked to on my illustration. For instance, when I handed my sketch over to Lindsey, I had still not finished amending the “Freeze Time” button. The code for this button was as follows:Screen Shot 2015-09-23 at 9.00.52 AM

This code allowed one to push this button (L), Screen Shot 2015-09-23 at 9.14.54 AMconfined by the x,y values above, and freeze the page to give the illusion of standing still in space. However, as the code is written, you need to press outside the button, which is not intuitive. To fix this problem, I would have had to use a TRUE and FALSE statement and incorporate a mouseReleased function.

(As an aside, I animated a word for my visual language class – here – using p5 and I was surprised how much easier this little task was this week compared to a couple of weeks ago. Progress, I suppose)

Amending Lindsey’s Sketch

Lindsey’s original sketch is HERE plus the code.

My amendments to her ship are HERE! but the image does not want to seem to load.
I added sparkling stars overlaid on her image of space, as well as text information to her sliders:

Screen Shot 2015-09-23 at 10.57.36 AM

Despite the slow loading frustrations — which I assume is due to the size of the image she chose -doing this exercise was truly helpful. It was really informative to dissect someone’s code. From Lindsey’s sketch, I learned a couple of things:

  1. Layering
    The order in which the code is written determines the layer of the elements. When you’re writing your own code, you naturally progress through the layers, but when you just try to insert something into pre-written code, it sometimes does not appear depending on the order of the elements. This was not clear to me before
  2. New functions
    Lindsey used blendMode() and tint which were objects I had previously not used.
  3. This code was a nice demonstration of loops and a new command.
    Screen Shot 2015-09-23 at 9.57.36 AM

ICM-2: Bowie

This week, we were to create a dynamic sketch that included the following:

  • One element controlled by the mouse. 
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

Beginning this sketch was more difficult than the last because I didn’t have a clear image in mind, but something more abstract. The whole thing kind of began and ended with a lot of playing around, tinkering and a lot of, eventually, unused lines of code.

My main frustrations were A) that I was sure I was building certain elements in a wildly inefficient manner and B) that my desires did not match my current abilities — a common thread throughout all my classes at ITP at the moment.

Again, many of my questions were answered while going through the process of try, fail, repeat. One example of this was using translate() with and without push()/pop(). Before I knew the latter were needed to “turn off” the former, I had to circumvent the problem of translating my whole image by incrementally adding values to the y position of my triangles above the initial lines of translate() code, a shining example of discovered inefficiency! Screen Shot 2015-09-16 at 7.40.16 AM

It also took me sometime to realize that I can’t assign a random() function to variables defined before the function draw(), as the program recognizes random() as a pre-installed function and it gets confused. And then I get confused.

Unsurprisingly, I started drawing a sketch that seemed reminiscent of the 80s/early 90s — it always seems to erupt from some deep-seated, obnoxious aesthetic within me. I’m not proud of it. I realize Bowie was before this time, but Bowie was ahead of his time, so I think he fits with this whole neon motif.
Bowie lives here