NM: FInal Project: nibble

May 9, 2017

nibble design concept

nibble is designed for my personal interest in exploring physical or virtual spaces through database and servers.

The project started off by learning to scrape off and take advantages of free images that are available online and saved them to my own database (Midterm Project) where I used nasa api to retrieve these images from nasa’s archive.

I originally planned to create large scale images from these patches of images but after I soon learned that the stitching process to stitch these images all together to form a city, a country or a continent was not as simple as I thought and also there was no high resolution images available from the nasa api. I quickly moved on to find other ways I can use the power of server and databases as a creative tool.

I have come to realized that I was working more and more on three.js and 360 photography camera like samsung and ricoh theta as ways to generate my own content; both images and video. So what I often do with these tools were, I imported 360 photo into a three.js virtual world. I ended up taking a lot of screenshots. A lot of images in order to tell my ideas and get my message across to my peers and teachers or whenever I’m presenting. My desktop quickly look like this…..

Design Solution

So what I am attempting to make is to find ways to ::

a smoother , cleaner work flow
save images online - data

Camera angles in 360 images environment is very different from 2D images where it is flat, when you are in a 3D world, if you move a camera's position even a little bit, it is hard to come back to where it was. I had to navigate and maneuver my point of view, adjusting my angle to get it just right and the process has become repetitive. This is the reason why I want to save images online.

I believe, my project is gradually developing into an early development stage of what will eventually be a media management application.

Welcome to nibble

Registration / Login Page

Press" Save" Button to save the image to mlab and ajax call.

Single Page Web Application

Database - mLab

I saved the camera's position and url in JSON file in the server database, so I can retrieve the url through ajax call and show the image onto the client side, web page.

Screen Shot 2017-05-03 at 5.59.11 PM.png

I know that 360 image file is big and has a lot of data but the first time I console.log() the image's url, I did not expect to get this really Longggggggggggg url. The data is humungus.

What's Next?

I tried to get our presence into the virtual world through kinect but it’s very slow and super glitchy. I think that the big big file of the 360 image also contributed to the lagginess.

Special Thanks!

Shawn Van Avery
Abhishek Singh
Craig Pickard
Wipawee Sirikolkarn
Sebastian Morales
Grau Puche
ITPers!

NM: Midterm Project: Timelapse Images

May 9, 2017

Time-lapse Images

For the midterm project, what I tried to do was a time-lapse image sequences where I retrieve satellite images from nasa's database using nasa's api.

In 2004, the tsunami hit the southwest coast of southern Thailand which is where I'm from. I saw the before and aftermath of how much damages the mother earth can do so I was inspired and intrigued in exploring free catalog of satellite imagery and geospatial datasets where there were major differences in map trends and detect changes of the Earth's surface.

Concept

I started off by retrieving the url images of the same location and calculated backwards. (minus 16 days :: the satellite's orbital timeframe)

The nasa api returned JSON, so I use "npm requestify" to turn the JSON into images

I did not get far in this assignment, because I did not realize how ambitious I was. However, I learned many things that did not work.

NM: Class 03

February 20, 2017

Class 03 | Assignment: Reading Response

The Declaration of the Independence of Cyberspace by John Perry Barlow

The Declaration of the Independence of Cyberspace by John Perry Barlow was written in 1996, more than 20 years ago. I doubt that his point of views on the subject matter in regard of regulations of the cyberworld remained the same.

His writing claimed that the world of the internet does not have any physical presence in the real world therefore no government nor state have authority to impose any jurisdictions on what is happening in the cyberspace. Although, I must say I agree to some of his statement to a certain degree, but overall I don’t entirely agree with his writing and my reasons are as follow:

“Your legal concepts of property, expression, identity, movement, and context do not apply to us. they are all based on matter, and there is no matter here.”

1. Internet do have tangible and physical presence. For example, routers, cables, deep sea fiber optics(maybe not 20 years ago), and servers.

2. Internet require human to maintain and operate certain tasks. For example, setting up the systems and maintenance so it does not break down.

“We are creating a world that all may enter without privilege or prejudice accorded by race, economic power, military force, or station of birth”

“We are creating a world where anyone, anywhere may express his or her beliefs, no matter how singular, without fear of being coerced into silence or conformity”

3. There should be some law to protect ourselves from hackers and especially abuses online. Everyone is not tech-savy. Different levels of censorships should be imposed on the cyberworld. For instance, young kids and teenagers behind closed doors should have some kind of protection against bullies and abuses because just like Barlow stated, cyberworldis a place where parents are unfamiliar and that “anyone may express his or her beliefs, no matter how singular, without fear of being coerced into silence or conformity.” this statement easily backfired when kids kill themselves due to stress.

A Declaration of the Independence of Cyberspace by John Perry Barlow.

Amusing ourselves to death, Chapter 1 - The Medium is the Metaphor by Neil Postman

The first chapter of The Medium is the Metaphor by Neil Postman discussed about the concept of several mediums human has created like television, clock, or eyeglasses.

Newspaper was used to deliver news before the creation of television. Postman stated that the birth of television, humans had created physical expressions for the content through the people who read the news and that if you look good you are more likely to get the job in front of the camera, be the face of the content. As a result, television, the man-made technology has a power to take control of the culture and what’s being delivered. Just like facebook holds the power nowadays. Facebook drives todays culture in nearly all aspects of our lives. It can favor one particular kind of content and suddenly its trendy and eventually became a culture.

Class 03 | Assignment: HTML Javascript DOM | CSS Styling

As I was doing my homework this week, I came across this problem several times [screenshot below]. According, to Stack Overflow it’s an issue of the port: 3000 is still running and that I might not close the terminal properly. However, I am sure I did do all these commands listed below in the terminal:

ctrl + c
exit
as well as restart the computer

This problem still came up from time to time. I found that after I left it for a few hours and returned, the server works fine and I did not change the code too.

Screen Shot 2017-02-19 at 1.19.39 PM.png

After I finally got the ‘POST’ and ‘GET’ HTML form to work, I added some CSS styling to it. The page still got a lot of work to do though. But, I’m very happy with my progress so far since this is the first time I’ve really dived into HTML & CSS. (ICM last semester didn’t really count). Tutorials from Codacademy was quite helpful.

The Button "ENTER" just don't wanna move to the center....whyyyy?

Code : Github

NM: Class 02

February 15, 2017

Class 02 | Assignment: Understanding Media: The Extensions of Man, Chapter 1: The Medium is the Message | Link

I must say “Understanding Media” is a hard read. There are some theories McLuhan’s examples I don’t understand. For instance, when he gave an example of Othello, a Shakespeare play, it just seems like he’s babbling about the way the play was communicated.

Anyway, my thoughts on the reading are that McLuhan’s theory of media or technology is that it's all about looking at media as a form of an extension of human’s senses. Radio expanded our senses of hearing, phone expanded our voices, printed books and television expanded our eyes, computer and electronic media now acted as our central nervous system where they were once limited.

In addition, the reading revealed that the influences of media/technology is more than its content and these technological advances manifested its impact in all types of medium. At the beginning of the chapter, he mentioned that airplane as a mean to commute to work speed up the existing means to get to the destination, it connected us to work and business to home where we take leisure. Media and technology consequently maneuvered its way and its influences, good and bad into our everyday lives routine. This means that we always link to everything, in particularly to work, the idea of taking a rest at home away from the office, a two separate entity are slowly becoming one.

The creation of airplane also contributed to this concept, although airplanes are convenient, it reduced the time of commute from one place to another, it took away conventional means of transportation like railways where one used to enjoy the journey and does not always care about the destination. Personally, I feel like I want to get from one place to another as fast as possible.

We don’t often realize the media’s effects that it’s little by little slowly numbing one part of our sensation while straightening another part of our sense, which I do find convincing. We have to start thinking that technology is a part of our physical body, a limb that we, humans has created and begin to explore its implications and having the ability to control it as well.

Class 02 | Assignment: Build a simple Express application which takes in data from a form and outputs the results on an HTML page. One example might be a quote generator or you could build a guestbook.

FORM POST

NM: Class 01

January 31, 2017

Class 01 | Assignment: Net-Art

Make a work of hypertext art, fiction, or poetry, put it online with a simple node based HTTP server and link to it from your blog. Some Inspiration may be found in Rhizome's Artbase, in particular their Hypertext Collection

I made a simple welcome, landing web page design with p5.js sketches and GUI control. >>

>>> Link

Steps on getting the files onto server:

Terminal > ssh root@138.197.66.229
ls (check to see the files in folder)
Open fetch (Put the files that I created (web page) into sketch + the server.js file from Shawn)
ls again (will see files names)
cd filename
type “node server.js”
Chrome> type in the ip address > 138.197.66.229:8080/filename

Screen Shot 2017-01-31 at 11.37.30 AM.png

Screen Shot 2017-01-31 at 11.46.05 AM.png

Screen Shot 2017-01-31 at 11.40.08 AM.png

Screen Shot 2017-01-31 at 11.40.03 AM.png

Screen Shot 2017-01-31 at 11.40.39 AM.png

Node:

// HTTP Portion
var http = require('http');
var fs = require('fs'); // Using the filesystem module
var httpServer = http.createServer(requestHandler);
var url = require('url');
httpServer.listen(8080);

function requestHandler(req, res) {

    var parsedUrl = url.parse(req.url);
    console.log("The Request is: " + parsedUrl.pathname);
        
    fs.readFile(__dirname + parsedUrl.pathname, 
        // Callback function for reading
        function (err, data) {
            // if there is an error
            if (err) {
                res.writeHead(500);
                return res.end('Error loading ' + parsedUrl.pathname);
            }
            // Otherwise, send the data, the contents of the file
            res.writeHead(200);
            res.end(data);
        }
    );
    
    /*
    res.writeHead(200);
    res.end("Life is wonderful");
    */
}

Class 01 | Reading Assignment: As We May Think by Vannevar Bush

The reading talk about human's creation on technology advancement and how we use these machines to store information. In the beginning of the the text, Bush introduced several machines, how they are used, their advantages and disadvantages, and how they were developed. Not until nearly the end of the readings that he finally introduced the ultimate machine, "the Memex", the solutions on how we can store and use information that none of the prior machines failed. It's a personal desk that store your private information and organize them, like a personal hard drive. Bush's envision of the machine is pretty much a world wide web in today's world.

Bush states,

“Science has provided the swiftest communication between individuals; it has provided a record of ideas and has enabled man to manipulate and to make extracts from that record so that knowledge evolves and endures throughout the life of a race rather than that of an individual” (Bush 2). With the ability to preserve information far beyond the lifespan of any individual, the problem then comes of how to access and disseminate that information in a valuable way. As Bush notes, “[a] record if it is to be useful to science, must be continuously extended, it must be stored, and above all it must be consulted” (Bush 3).

"Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, “memex” will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.… [A]ssociative indexing, the basic idea of which is a provision whereby any item may be caused at will to select immediately and automatically another, [is] the essential feature of the memex. The process of tying two items together is the important thing."

Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, “memex” will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.… [A]ssociative indexing, the basic idea of which is a provision whereby any item may be caused at will to select immediately and automatically another, [is] the essential feature of the memex. The process of tying two items together is the important thing.

In the reading, Bush named quite a number of devices and machines to explain his point on the discovery and its history of the mass technological and theoretical advancement. And I find myself jumping between google search page and wikipedia, pictures and digrams when searched are very helpful while reading the texts.

Thermionic Tube: