Helpful Tips

Here are some useful tools for tools for JS programing:

Responsive Web Design

Helpful RGB Conversions

Helpful JS sites for JSON


Other Links

 * Returns a random number between min (inclusive) and max (exclusive)
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;

 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;

Prototype V: Backend Development - Client Side

Prototypes of the front end system were made using Javascript three.js libraries to simulate the Rotegrity Sphere of the Urban Fod Pod. Further code was written to prepare to receive the data from the Spirulina bottles. 

I put together a data-set of “simulated data” in order to begin to write the code to read-in this data from the Arduino. The data set is made using JSON formatted data. Now that my server-side code is pulling from a JSON file, once the sensors/hardware are fully functional, it should be a very simple exercise of sending the data from Arduino to the MongoLab hosted database and then sending it to the client-side (web-site). 

OpenFrameworks: On The Line

OpenFrameworks: On The Line

Welcome to processing.js for Open Frameworks! Have you ever made a project in openFrameworks and been like "This is awesome! I want to put it on my online portfolio!". You could always make a video or take photos, but what about the UI aspect of your project? How can people see the awesome mouse effects you made? Enter Emscripten. Emscripten turns your C++ code into Javascript code in a matter of minutes! So you can put your awesome OF project "on the line" in your portfolio. My project 'OpenFrameworks: On The Line' is a proof-of-concept of making the Emscripten library work. 

The Emscripten project spear-headed by Arturo Castro (a core OF developer) is really not being used widely in the community. By submitting this project as part of the OFOpen, my hope is that more people will start using it. By popularizing the functionality it could be a more core functionality of OF. Further research needs to be done to see the capacity of Emscripten, like which add-ons work and do not. Also, rendering speed is an apparent issue which should be addressed. 

I think one core question is:  Can OF on the web push our creative pursuits? Or is this just simply for documentation? I would like to hope that by adding functionality to our tool box we can push the limitations of our artistic expression and find new avenues in which to operate. I think more work here can help shape a new era of OF creativity. 

The piece that I have submitted as my proof of concept is called "Sol Lewitt Met" which is an interpretation of Sol Lewitt's Wall Drawing #118. The points are generated by performing a Self Organizing Map algorithm on data from the Metropolitan Museum of Art. Each point represents a work of art that is organized by the RGB color channel. The points are then connected by lines to create a data-driven-wall-drawing.

Emscripten Examples:

Install Emscripten:

Procedures to run it:

  1. Download the nightly build of OF:
  2. Open the Project Generator in the nightly build version of OF
  3. Make a new project (lets call this solLewittMet)
  4. Copy the source code of your running project into you "nightly build" version
  5. Go into Terminal and 'cd' into the solLewittMet project in the "nightly build
  6. In Terminal type: /Users/reginaflores/Documents/emsdk_portable/emscripten/1.30.0/emmake make (this is where you have downloaded your emscripten files)
  7. In Terminal type: /Users/reginaflores/Documents/emsdk_portable/emscripten/1.30.0/emrun bin/solLewittMet.html

After you run the emmake command you see that the Terminal gives you the .html file to run in the emrun command. Notice how the bin is now full of web files. 

In the /public_html files on your website put all the bin files: 

The HipHop Project: Translating Rap Lyrics into Art Encounters

Link to the website:

The HipHop Project is the culmination of a month long research project in data visualization. It explores a variety of academic concepts including the museum as medium and contemporary black culture as a "fluid amalgamation of reciprocal influences: fine art overlaps with music, music overlaps with literature, literature overlaps with dance and beyond." 

Rapper's Delight is a project undertaken as part of work for the Media Lab at the Metropolitan Museum of Art. Using the words from rap lyrics as key-word searches through the Met's digital archive of over 200,000 works of art, users can experience a curated "tour" of the work at the Met. 

This project could engage any visitor who love rap music and provide them with a unique lens through which to view the museum's collection. It could allow visitors, who are already familiar with the Met, to see work that they may not have otherwise known existed. However, the key audience for this project are the young men and women who live just a few miles away who may have never had the opportunity to come to the Met. Rapper's Delight, is a way to offer the Met through the lens of the poetic and culturally relevant music that is Hip Hop and to engage in contemporary black culture.

The website URL is playing homage to the song Rapper's Delight by The Sugarhill Gang, largely considered to be the song that popularized Hip Hop music. 

An ethnographic research study was conducted to determine the 13 rappers used in the project. Participants were asked two questions: (1) who their favorite rappers are and (2) who the most influential rappers of all time have been. The participants in the study are a group of cultural influencers including a Grammy Award Winning R&B singer, a comedy writer (and D.J.) who is known for writing on Late Night with Jimmy Fallon and HBO, and a crew from The Baisley Housing Project in South-Side Jamaica, Queens who are community leaders and activists.

This was accomplished using Javascript and was created using the Rap Genius API developed by Eddie Forson, the website Rap Genius, and the Met's API developed by the Met's Digital Media department. 

API Links:

Rapper's Delight: Hip Hop Curates The Met

Using words, phrases and meanings from rap music (rap genius api), I will create curated visualizations of the work on display at the Metropolitan Museum of Art (Met api). This is a way to engage visitors who love rap music and help frame their experience through a unique lens.

JavaScript Project: Experiments with APIs

Link to Javascript Project: HERE

This has affectionately been called the Frankenstein project because it is an amalgamation of 3 disparate APIs: Google Maps, Sound Cloud and Last FM. I also experimented using processing.js and other jquery plug-ins. I suppose this was an exercise in learning to use APIs and js rather than actually creating anything beautiful!