MS1 - FINAL PROJECT: BLOCKCHAIN AND CRYPTOCURRENCIES - PART 1

Today, Sunday November 5, 2017, marks the launch of my project. I will be setting up all the accounts I need to buy cryptocurrencies. Once I set up my profile I will look into which currencies I'll buy.

As I started looking into how to set up my profile, I ran into this video from Bloomberg that gives a really good introduction to what a cryptocurrencies are and how they work with blockchain technology. Furthermore it explains what's coming for these new technologies in the year ahead. The visuals are pretty cool too.

This is the Bitcoin initial purchase:

MAJOR STUDIO 1 - FINAL PROJECT: BLOCKCHAIN AND CRYPTOCURRENCIES

For my final project for Major Studio 1, I've decided to explore cryptocurrencies and blockchain, the technology behind this new form of currency. This is a research project in which I will mainly try to answer how design relates to this technology and how designers could potentially help its development. More specifically, I’d like to learn how this currency economy works today for a completely new user and how designers can get involved in the development of both cryptocurrency and blockchain technologies.

This are some of the main questions I'll try to answer in this project:

• What is the bitcoin and cryptocurrency experience for a new user in 2017?
• How easy is it to generate a profit through cryptocurrencies?
• What are some caveats of the technology?
• What are some creative applications for cryptocurrencies and blockchain?

How will this project work?

There is no better way to learn something than by practicing! Therefore, my plan will be to invest a certain amount of money in cryptocurrencies. I'm aiming for the amount I'm investing to be $200 (*cough* I'm a broke student *cough*), and my goal is to generate a 20-25% gain by Wednesday, December 13th. I'll be posting updates periodically in this blog, and will also be posting a video diary with every entry.

Now, let's get to it!

via GIPHY

You are in the intro. Follow this blog series here:

Part 1  |  Part 2  |  

CC LAB: JAVASCRIPT LIBRARIES PROJECT

For our Javascript Libraries homework we were tasked with creating a project that uses JQuery and a second JS Library. For my homework, I'm going to do a data visualization of my schedule this semester. More specifically, the amount of time I devote to each of my tasks each day. To do so I'm going to use the D3.js library and, as mentioned, JQuery.

I'm taking an elective in data visualizations, so I wanted to explore D3's capabilities further, however it was somewhat difficult for me to define the appropriate scope for this project. I also had a bit of trouble figuring out what are the appropriate scenarios are for using d3 over JQuery and vice versa.

I decided to create a bubble chart based on one of the examples posted on the D3 website. 

This example uses a .CVS file, so I had to create the database. As I mentioned before, I wanted to visualize my weekly schedule this semester, so the first step I had to take was to created the database I'd use. This is the database I created:

id,activity,amount,amount1
Monday,sleep,12,6
Monday,work,16,8
Monday,leisureOrTransit,8,4
Monday,homework,12,6
Monday,soccer,0,0
Monday,class,0,0
Monday,party,0,0
Tuesday,sleep,12,6
Tuesday,work,0,0
Tuesday,leisureOrTransit,8,4
Tuesday,homework,18,9
Tuesday,soccer,0,0
Tuesday,class,10,5
Tuesday,party,0,0
Wednesday,sleep,12,6
Wednesday,work,16,8
Wednesday,leisureOrTransit,8,4
Wednesday,homework,12,6
Wednesday,soccer,0,0
Wednesday,class,0,0
Wednesday,party,0,0
Thursday,sleep,12,6
Thursday,work,0,0
Thursday,leisureOrTransit,8,4
Thursday,homework,10,5
Thursday,soccer,0,0
Thursday,class,18,9
Thursday,party,0,0
Friday,sleep,22,11
Friday,work,0,0
Friday,leisureOrTransit,10,5
Friday,homework,8,4
Friday,soccer,0,0
Friday,class,0,0
Friday,party,8,4
Saturday,sleep,12,6
Saturday,work,0,0
Saturday,leisureOrTransit,8,4
Saturday,homework,18,9
Saturday,soccer,0,0
Saturday,class,10,5
Saturday,party,0,0
Sunday,sleep,18,9
Sunday,work,0,0
Sunday,leisureOrTransit,10,5
Sunday,homework,16,8
Sunday,soccer,4,2
Sunday,class,0,0
Sunday,party,0,0
Sunday,,,

With the database now in the correct format for D3, I went on to work on the code. I followed this tutorial, to help me streamline the basic structure. With the main code in place, I made some edits to fit the code with my data and add some design to the website. As I was short on time to finish my project, I decided to use JQuery as the legend for the bubble chart, so that the viewer can understand what the colors of the circles are. This what the final project looks like:

As you can see each color represents a day of the week, and each bubble represents one activity I do that week. The size of the circles represents the amount of time I have to invest to each activity that day.

This is the final Javascript code:

// Credit to sources:
// Create a jQuery Slide Menu (Side Pulling Content): https://www.youtube.com/watch?v=hxND35w0L2I
// This code is inspired in the work and tutorial of Jonathan Soma: https://www.youtube.com/watch?v=lPr60pexvEM


$(document).ready(function(){
        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');
        });
    });


(function() {
    var width = 1000,
      height = 800;

    var svg = d3.select("#chart")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(0,0)")

    var radiusScale = d3.scaleSqrt().domain([0, 22]).range([10,70])

    var simulation = d3.forceSimulation()
      .force("x", d3.forceX(width / 2).strength(0.085))
      .force("y", d3.forceY(height / 2).strength(0.05))
      .force("collide", d3.forceCollide(function(d){
        return radiusScale(d.amount) + 2;
      }))

    var color = d3.scaleOrdinal(d3.schemeCategory20c);

    d3.queue()
      .defer(d3.csv, "schedule2.csv")
      .await(ready)

    function ready (error, datapoints){

        var circles = svg.selectAll(".artist")
          .attr("id", function(d) { 
            return d.id; 
          })
          .data(datapoints)
          .enter().append("circle")
          .attr("class", "artist")
          .attr("r", function(d)  {
            return radiusScale(d.amount)
          })
          .attr("fill", function(d) { 
            return color(d.id); 
          })
          .on('click', function(d)  {
            console.log(d)
          })

    simulation.nodes(datapoints)
      .on('tick', ticked)

    function ticked() {
        circles
          .attr("cx", function(d)  {
            return d.x
          })
          .attr("cy", function(d)  {
            return d.y
          })
          }
    
    }

    })();

CC LAB: ARDUINO FINAL PROJECT

For my final project, I'm creating an experience for a retail store. As mentioned in my proposal, I'm working on a t-shirt brand called Pool Party, and I wanted to create the concept of what a pop-up store of the brand would look like. In particular I wanted to create a device for tables in the store. To make the experience more immersive, I came up with a sensor that would display the prices as a customer get's close to the product.

The idea is that as customer get near the table the opacity of the water will go down and the prices will appear. This is an example of how the technology would work:

To make this happen, I needed to connect Arduino with Processing. The first step is to make the sensor work in Arduino and then connect it to Processing using the Firmata Library. I did some research online and found some projects that were similar to mine, so I modified the code they used to make the sensor in my circuit send information to Processing. I used the code in this project and developed it further to create the one below:

#define echoPin 7 // Echo Pin
#define trigPin 8 // Trigger Pin
#define LEDPin 13 // Onboard LED

int maximumRange = 200; // Maximum range needed
int minimumRange = 0; // Minimum range needed
long duration, distance; // Duration used to calculate distance

void setup() {
 Serial.begin (9600);
 pinMode(trigPin, OUTPUT);
 pinMode(echoPin, INPUT);
 pinMode(LEDPin, OUTPUT); // Use LED indicator (if required)
}

void loop() {
/* The following trigPin/echoPin cycle is used to determine the
 distance of the nearest object by bouncing soundwaves off of it. */ 
 digitalWrite(trigPin, LOW); 
 delayMicroseconds(2); 

 digitalWrite(trigPin, HIGH);
 delayMicroseconds(10); 
 
 digitalWrite(trigPin, LOW);
 duration = pulseIn(echoPin, HIGH);
 
 //Calculate the distance (in cm) based on the speed of sound.
 distance = duration/58.2;
 
 if (distance >= maximumRange || distance <= minimumRange){
 /* Send a negative number to computer and Turn LED ON 
 to indicate "out of range" */
 Serial.println("-1");
 digitalWrite(LEDPin, HIGH); 
 }
 else {
 /* Send the distance to the computer using Serial protocol, and
 turn LED OFF to indicate successful reading. */
 Serial.println(distance);
 digitalWrite(LEDPin, LOW); 
 }
 
 //Delay 50ms before next reading.
 delay(50);
}

Once I was able to send information from Processing to Arduino, I modified my Processing code slightly so that the data coming from the sensor would become the opacity variable of the water image. This is how the final code looks like:

import processing.serial.*;
float x = 255;
PImage bg;
PImage front;

String comPortString;
Serial myPort;
int distance;

void setup() {
  size(852, 110);
  bg = loadImage("price.jpg");
  front = loadImage("water.jpg");

  myPort = new Serial(this, Serial.list()[1], 9600);
  myPort.bufferUntil('\n');
}

void serialEvent(Serial cPort) {
  comPortString = cPort.readStringUntil('\n');
  if (comPortString != null) {
    comPortString=trim(comPortString);

    distance = int(map(Integer.parseInt(comPortString), 1, 200, 1, height));
    if (distance<0) {
      distance = 0;
    }
  }
}

void draw() {
  background(bg);
  image(front, 0, 0);  // Display at full opacity
  float tintValue = map(distance, 0, 105, 0, 255);
  tint(255, tintValue);
  println(distance);
}  

Once the the sensor starts sending the data to Processing, the opacity of the water will vary depending on the distance of the object in front of the sensor. Here's a demo of the sensor working when a person gets close to the sensor:

Once the technology started working, I started building my enclosure. As the sensor is supposed to be hidden, I built an enclosure that would hide underneath the table. The idea is that a velcro strip on the top of the enclosure would allow for easy setup and removal, if needed.

Once finished the final project would look and work like this:

CC Lab: Arduino Final Project Proposal

For my Arduino final I'd like to work on a project I started for my Major Studio 1 class and which I'd like to take further. In this class I developed a t-shirt brand called Pool Party, and part of its development included the design of a pop-up store. Here below, I include a few pictures of the brand and a scale model of what the store would look like.

As the name implies, the story of the brand revolves around having fun and being in contact with the water, one of the 4 elements in our planet. This story is transferred into the logo and the pop-store in various ways. For example, when a user walks into the retail area, the floor would have a especial texture that feels like waves and looks like being in a pool. Furthermore, the art in the walls is inspired in street art, by using a stencil, and mimics the waves of a pool.

One of the main objectives I want to accomplish with the store is to make the experience as immersive as possible. I'm inspired by experiences such as the Daft Punk pop-up opened in Los Angeles, in which the entire store is thought to bring the visitor into the story of the brand. To accomplish the same objective in my store, I'd like to use my knowledge of Arduino to create an LED screen that will present the products' prices in a cooler, more immersive way. I think that seeing prices so directly in stores is a turn-off for customers, so my idea is to use a microprocessor and an ultrasonic sensor hide the prices until the user gets near one of the items that are for sale. This is a mock-up video of what the behavior would look like:

The idea is to use an ultrasonic sensor so that Arduino know when someone walks by, therefore showing the prices in the table or in any showcase in the store. 

CC LAB: ARDUINO ASSIGNMENT 3

For my third Arduino project, I wanted to connect an ultrasonic sensor to Arduino and create a visual effect with Processing. I wanted to hide a picture in front of another and have image in the front change in opacity as the object got closer or farther from the the sensor. This is an example of how this would look like:

I failed at doing this project as connecting Arduino to Processing is harder than it seems and I haven't learned how to do that yet. I want to come back to this project and make it work when I learn the skills to do it.

CC LAB: ARDUINO ASSIGNMENT 2

For our second Arduino project, we were tasked with creating a new kind of input not covered in class. For my project I wanted to use this task to solve a problem I constantly have with my roommates at our apartment. Since we all are in our rooms most of the time its hard to know who is in the apartment. Therefore, my solution was to create a gravity input along with a key hanger. When one of the roommates gets home, he/she can hang his/her keys in the hanger and a light will turn on letting the other roommates know who is home. This is the final setup without the enclosure:

This idea was inspired by Harry Potter's Magic Clock. This are some picture of the process. One of the main challenges was to create the lever that would create the gravity input. At first, I started looking into springs to create a lever that would close the circuit.

However, I quickly noticed that the springs I had available were too strong for the keys to pull the lever down. To solve this, I made a different kind of lever based on a weight. This is a close up of the lever system:

After figuring out the lever system, the code is fairly simple:

const int buttonPin = 2;  
const int ledPin =  13;


int buttonState = 0;       

void setup() {
  // initialize the LED pin as an output:
  pinMode(ledPin, OUTPUT);
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);
}

void loop() {
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // turn LED on:
    digitalWrite(ledPin, LOW);
  } else {
    // turn LED off:
    digitalWrite(ledPin, HIGH);
  }
}

This are some more pictures of the project:

This is the final project with an enclosure:

Major Studio 1: 5 in 5 Project 5

For my 5th and final project I wanted to return to photography. Over the weekend I was talking with a friend about a book called Ready Player One by Ernest Cline, and how Steven Spielberg is directing the movie, which will come out in 2018.

The book, which happens in the future has a lot of references to video games, arcades and 80s pop culture. Therefore, we decided to do a photoshoot inspired in that style. The pictures below were shot at a bar in Brooklyn called Barcade, which I felt provided the perfect lighting and colors to take these pictures.