Internet Art: Explore the Seven Wonders of the Ancient World (Vasudevan)

Introduction

This project was inspired by my recent visit to the Great Wall of China which is one of the new 7 Wonders of the World. During my visit, I was invigorated to visit the remaining Seven Wonders of the World within the next 5 years. I have been wondering if these wonders are as known to as many people as it is supposed to because they are sites which are very rich in history and it is necessary for everyone to learn about them.

Even though the original idea was inspired by a visit to one of the 7 new Seven Wonders of the World, I decided to focus on my project about the Seven Wonders of the Ancient World which are less famous than the new one since some of them, for example, the Hanging Garden of Babylon, are extinct actually but people can learn interesting history by exploring them. In this project, the user is expected to guess the countries where they think a seven wonder is located. A beep sound and a hint are provided as feedbacks everytime they click on a wrong country. Also, that country is marked red in order to avoid clicking it again. Since the website is not intended to be a test to the users, the locations of wonders in a specific country are provided in the third hint.

Features of the website

At the end of the video, the users have an option to choose if they would like to visit the site. If they click YES, the pop-up window will show Google map details on how they can navigate from their current location to the site. If they click NO, the pop window closes and they may continue exploring other sites. There are other options when the video is playing like learning more by accessing an external website for more information about the site, quitting the video and adjusting the video’s audio.

 

A pop window with a video playing and more other options which shows when a menu bar on the video is clicked. The videos were taken from Youtube.

Up to three hints are shown per continent. The third hint includes the names of the countries in that continent.

Process

I used Jvector maps libraries for displaying the maps. This library also had a function which helps to access the names of the countries on hover and click. Several modifications were done to the codes in order to fulfill the aim of the project. First, I grouped all the countries by their continents so as to give particularize the hints which are provided when a wrong country is clicked. Also a Jvector function (onRegionClick: function(e, code) {ountry=(map.getRegionName(code));} was added in order to have access to the country names on click.

Hints are showing and hidden by taking advantage of the display property of divs which is manipulated by using Javascript. The hint shows when “display” is set to “block” and disappear when it is set to “none”. In addition, the pop-up windows are showing using the function window.open(). Also, most of the Javascript functions which I used have arguments in order to avoid rewriting similar codes.

Challenges

The first idea involved displaying current locations of all users’ mouses on the map in order to give them an idea about the other users’ guess of the location of the Wonders. However, this feature needed more advanced programming skills and also hosting data in a web server, skills which I could not manage to master during the semester. However, the analogous implementation of this idea is putting red markers on the map in order to give users an idea of their guesses.

The red marks on the map. It helps the user to visualize their guesses as well as avoid clicking a wrong country twice.

Conclusion

Despite the inability to give live locations of users’ mouses, the project was successful. However, reaching to this final product, there are many other versions which I either completely discarded or highly modified them. For example, before using the Jvector maps, I was using a normal image as a map as a result, the map wasn’t dynamic. Also, after several user testing, I decided to include a help info which shows when the map finishes loading but also can be hidden or shown again at any time. Also, I shortened my hints by observing testers behaviors–most testers were not interested to read long tips but spent some time reading the short hints.

Response to “Web Work: A History of Net Art” by Rachel Greene (Vasudevan)

Regardless of the very short time the internet has existed, it has already made so many histories. This is due to its demand in our daily lives which has led to rapid growth in a number of its users. In this book, Rachel Greene explains a history of the Net Art, a terminology which was a coined almost accidentally.

Green says that the internet was primarily used to convey information which was previously presented by using primitive HTML, which included simple texts without any formatting. Later, the Internet Art was introduced and enabled users to express their ideas beyond texts. This involved using other styles of conveying messages like drawings, images, and animations. Internet led to a redefinition of art from only things which we can touch like paintings and sculptures to very abstract things like an interactive website, a software etc.

It is very interesting to learn that even this ‘abstract’ form of art may convey different forms of messages, like political, economic, and religious messages, as well as entertain the user. Something very unique with the internet art compared to other forms of art is that it is cheap and easily accessible almost to everyone who has an internet access and a smartphone/computer.

Generally, internet art gives users an experience which otherwise they can not feel without a presence of  the browser.

Response to Paul Graham, “Hackers and Painters” (Vasudevan)

“He who makes has to decide  WHAT and HOW to make it.”

The essay explains in detail how painting and hacking are related to each other.  Paul Graham urges that they are both arts even though hacking is highly associated with science and sometimes engineering.

Just like in a case of painting, hacking or coding is done in pieces and it isn’t necessary for the hacker to have a prior knowledge of what the codes they are writing are going to do. However, big companies emphasize programmers to know every detail of what the program will do even before they sit in front of a computer screen to write the codes. As a result,  hackers are turned into robots which only implement high executives’ ideas and not design their own.

Since hackers are more considered as implementors and not designers, they are not given a chance to decide WHAT has to be done. Instead, they only need to figure out HOW to do an idea can be implemented. According to my point of view, this strategy kills innovation.

To conclude, he who makes has to decide  WHAT and HOW to make it. However, this doesn’t mean that the companies’ executives and committees are not supposed to be involved in the decision making. I think they should but they are not supposed to decide every single detail of what the hackers are supposed to do.

Response to Paul Rand, “Computers, Pencils and Brushes” (Vasudevan)

Are computers making us more creative or less creative? In the essay, Paul Rand attempts to answer this question.

Computers have increased our working efficiency and speed by avoiding us from doing repetitive tasks which we may not be able to them in the exact same way as we perform them.

Designers, especially architects, spend a considerable large number of hours in order to make a design of a certain structure. As a result, their clients have to pay them a lot of money for each design. What if there is an Artificial Intelligent (A.I) program which only requires an electric supply in order to produce a design which fulfills constraints and includes all the features provided. Will this be considered creativeness or design? According to my perspective, I think it still easy because the designer has to think about the number the features they need to include in the design as well as the constraints which the design has to fulfill. And this is only possible if the designer has a mental picture of the object which they would like to create. The only difference here is that they do have to go through the ‘pain’ of drawing each straight line by a pencil as they would if they are not using a computer.

Generally, computers have changed a lot the way people perform or even think of their work. For example, due to the fact that people, especially students, spend most of their time and do almost all their work on a computer, we sometimes assume/wish that everything in the real world is digitalized. For example, I have wished several times to have a copy paste feature whenever I am doing math problems especially when I have to write a certain procedure repetitive or when I delete a certain part of my assignment and later realize that I was right and need it. Control Z magic!

But does the computer do the computer do all the work for us? Pa says that of course, it does not. Having a computer is just a tool like how pencils are in painting. It needs a design/input in order to have a good output. It is useless if there is no input provided. This implies that people have to learn how design and then just use the computers as tools to help them express their ideas other just feeding information to a computer and then wait for it to give you a final design.

But anyway, regardless whether a designer use a computer or not, what matters to the audience after all is a good final product and not the procedures which were used to achieve it. Take an example of a person who is traveling for a meeting from Shanghai to New York. Why take a train and then a ship and spend several months while you can fly by a plane and spend less than a day. It matters more how convenient the travel was than how it was done.

Final Project Proposal (Vasudevan)

Title of the proposed project: Let’s Explore the seven wonders of the world together

During my visit to the Great Wall of China last weekend, I was inspired to visit the remaining Seven Wonders of the World within the next 5 years. I have been wondering if these wonders are as known to as many people as it is supposed to because they are sites which are very rich in history and it is necessary for everyone to learn about them.

In this project, my plan is to make an interactive website which will help the users to experience a tour of all the Seven Wonders of the World.

The first task of the user of the website is to locate a country where the Wonder is located. When they hover over the country, an audio/video will play from a pop-up window to describe a short history of the site.

Then, at the end of the video, the user will have an option to choose if they would like to visit the site. If they click YES, another pop-up window will show with Google map details on how they can navigate from their current location to the site. If they click NO, they may continue exploring the world’s map and look for more other wonders of the world.

I am not sure how to determine the user’s current location but since I have much time to work on the project I plan to talk to the professor and IMA fellows so that they may show me how to do this.

Another bonus feature which I am thinking of implementing on this website are details of other users of the website. These details will be presented by a straight line which shows on the map connecting their current location and the site whose video they are watching. Or in order to make it even more lively, a straight line connecting their location and the position of their mouse on the map will be shown. This will give a hint to the user where the other users are moving their mouse.

I think the last idea may require a web server in order to be implemented. I will look for more information and seek advice from knowledgeable people in order to know how I can implement this feature.

Generally, I hope this project will enable me to experiment more with HTML, CSS, and JavaScript. I also hope to explore more other things in web design which we haven’t covered in the class like embedding Google Maps on a website.

 

 

Video Project (Vasudevan)

Participants: Paschal, Mary, and Lisa

Documentation Date: November 22, 2017

Introduction

Some people are brown or black. Others are white. Some people were born from rich families while others need to work overtime in order to afford even a single meal. Some are men and other are women. Just to mention a few, all these differences make a huge impact in our lives. They determine how many steps we need to take in order to achieve a normal and stable life by being able to afford all our basic needs.  As a result, some people have to work hard and others just need to work a bit or not at all in order to survive. This is what is called privilege–a special advantage which one gets without working for it.

During our research, we discovered that there are many online privilege tests. Here is one of them. In order to offer a similar privilege test, we decided to make an interactive video. This video is more than just a test because it walks the user through the experience by answering questions from the speaker. The video is shot from a first perspective.

Unlike the normal online privilege test, in this video, the user gets a flashback which plays every time an answer to a question is given. The flashbacks were edited to black and white format in order to give a sense that they are not a part of the original video and they are just past memories.

The process

The process involved shooting of videos which were then edited by first cropping the unnecessary part and import and synchronizing the audio from the TASCAM. Then the flashback videos were changed in color from black and white.

Adobe Premiere was used most of the time with video and audio editing. At some point, we used Audacity to edit the audio especially when we wanted to use the fading effect for the imported music.

How the project work

A user assumes a preset character in the video. Since the video is recorded from a first perspective, the user is the one who is holding the camera and cannot see him/herself. There are other four characters in the movie who have preset responses to the questions. Their answers were randomly set and assigned to them for anonymity purposely.

He then listens to questions from a speaker and answers YES or NO. If the answer is YES, he/she will see him/herself moving forward. Otherwise, he/she stays. But before the movement happens, he/she gets a flashback which is related to the question. The flashback is presented in a black and white format. And after all the questions are answered all the participants in the video race but each starts at a different position depending on how they answered the questions. At the end, the speaker gives a concluding remark.

The main challenge we faced on this project was audio editing. Since all our shooting were done outdoors, we had a lot of background noise especially the wind. In order to reduce this, we were suggested to cover the TASCAM by a windshield. It helped a bit when we did that. Also, we used the noise reduction tool in Audition Audition in order to reduce the noise. However, we avoided too much reduction of the noise since it resulted in a distorted audio.

Generally, this project fulfilled our main goal which was to make an interactive online privilege test. We also had a chance to experience video editing and experiment more with website’s features for videos like controlling video audio and switching video contents by using Javascript.

Here a link to the website

The Pillow Project Part 2

Alanna and I decided to keep working on our pillow project which we were doing last week.

However, this time we changed our main targeted users from people in a relationship (romantic relationship or child-parent relationship) to patients and kids/parents. Our redesigned pillow has several additional features like periodic email updates which include different information about the pillow’s user like for how long they have been using it and if they are using it or not st the time the updates were sent.

This project may be implemented in homes to keep track of little babies sleep habits. Since the sensor which we used is made of fabrics, this means that it can be easily embedded in other fabrics other than a pillow for example bed sheets. A use of a smart fabric like this may help parents to keep track of their kids’ sleep pattern especially when they have babysitters and can’t spend much time with their kids. The parents will be able to know when their kids are asleep and for how long. Similarly, this project can be implemented in hospitals to monitor patients sleep pattern by using similar mechanisms.

In addition, a music playing feature was added in order to comfort a user. Research shows that people are like to fall asleep and can even beat insomnia when soft music is playing in a background.

The Fabrics design

The same design processes like in the previous project were used with few modifications. An embroidery machine was used to decorate the pillow by embroidering a “Good night” in Chinese.

The embroidered “Good night” message in Chinese

A larger complete version of the pillow

Also, the size was made bigger in order to make it look like an actual pillow and not just a prototype.

Programming

An MP3 Shield was added since the Arduino doesn’t have an ability to play mp3.

In addition, the SFEMP3Shield library was also added and the “FilePlayer” example, which can be obtained by going to “File” > “Examples” > “SFEMP3Shield” > “Examples” > “FilePlayer” was modified to suit our need by adding conditions.

The final product

Drawbacks

The analysis which is given by the pillow maybe misleading at some point. The program of the pillow didn’t include other uses of the pillow like seating on it, playing with it, which are still recorded by the sensor as a sleeping activity. In addition, it is not likely that a pillow will be sleeping on the pillow all the time. They may not slip away from the pillow during the sleeping time and hence the reported sleeping time will be less than the actual sleeping time.

Our initial idea was to include the automatic emailing features but it was too late when we realized that the Arduino where we soldiered the MP3 shield does not support accessing the internet. Instead, we just decided to print on the Arduino console the updates which were supposed to be emailed.

Details  of music playing at the beginning

Showing if the pillow is in use or not and for how long

Generally, I was very excited working on this project in such a way that I would like to keep exploring more about it during my free time and see how far I can take it.

/*This program is intended to be regulate patients sleeping patterns at hospital. Apart from doing that it also gives them comfort. The example file included #include <SdFatUtil.h> which cause a
  failure compilation. When we eliminated it, the error disappeared but still the Audio played so not sure how this works.*/

//send updates to a doctor every hour to tell if the patient is asleep of not. For demonstration purpose the emails will be sent after every minute.
//This project maybe used at hospitals and also for baby sitting. It helps you to have a live update of the patient or your baby. You can set the time interval when you want
//to be updated.


#include <SPI.h>
#include <SdFat.h>

#include <SFEMP3Shield.h>

SdFat sd;
SFEMP3Shield MP3player;
int buttonState = 0;
const int buttonPin = A5;
int sleepingtime = 0;
int count = 0; //to limit the number of times the music play in a day
int minutes = 0;
String statusPatient = " ";
int duration = 0;
int notifytime = 60; //set to receive notification after every one minute. This can be set to any number depending on user's preferences.

void setup() {

  Serial.begin(9600);
  pinMode(buttonPin, INPUT);
  //start the shield
  sd.begin(SD_SEL, SPI_HALF_SPEED);

}

//do something else now
void loop() {

  buttonState = digitalRead(buttonPin);

    if (buttonState == HIGH) {
    sleepingtime = sleepingtime + 1;

    statusPatient = "Patient is still asleep";

    if (count == 0) { //this limit the music to playing only once in a day. It can be reset by restarting the arduino to mark a new circle.

      int t = 0;
      int beAsleep = 30; //sleep after 30 seconds. It can be made to any number of seconds.

      MP3player.begin(); //initialize shield
      MP3player.playTrack(1); //start playing track 1

      while (t < beAsleep) {
        Serial.println("Goodnight music has been playing for these seconds:");
        Serial.println(t);
        t++;
        delay(1000);
        sleepingtime = sleepingtime + 1;

      } //end while loop. this loop gives time for the music to play but also count it has playing for how long

      MP3player.stopTrack(); //when it is time to sleep stop music
      Serial.println("Music stopped playing");

      count = count + 1; //increment at the end of the loop to avoid replaying the music if the person is still asleep.

    }//end if function
  }

  else {
    Serial.println("There is no one on bed at the moment!");
    statusPatient = "The patient is awake at the moment.";
  }

  minutes = sleepingtime / 60; //change seconds to minutes.


  Serial.println(statusPatient);
  Serial.println("Have been sleeping for this number of minutes today: ");
  Serial.println(minutes);

  duration = duration + 1;

  /*if duration>notifytime{ //send a notification after a certain time interval
    sendemail(sleepingtime, statusPatient);
    }*/

  delay(1000);

}

/*void sendmail(int sleepingtime, string statusPatient){
  //this function sends automatic updates to the user. it includes information like for how long the pillow user has been using the pillow. an if a person who is using the pillow
  //is using it at that particular moment or not.

  }*/

A pillow which automatically sends emails to your loved ones

“Don’t worry son…I will email your mom when you sleep. No need to spend half an hour writing an email when you are tired. I promise she won’t know that this message was sent by a robot.” By Paschal and Alanna’s Robot

Items

Arduino Yun, a web server, conductive fabrics, wires, Arduino software, a piece of fabric and wool

Inspiration

Imagine you have a very busy day. You have been working all day and you are back at home. The only thing you want to do is sleep and call it a day…but wait! You also need to tell your loved ones that you are safe and you are doing ok. This information exchange which may be neglected is actually very necessary in order to establish a good relationship. So then, in order to do that you need to spend more than half an hour writing a text or an email to your loved ones. But what if it happens that you forget to send the message?  Failure to do so may endanger your relationship like in a case of my friend who almost broke up with his girlfriend because he rarely texted her at night to say goodnight because he was too busy with other stuff.

In order to avoid all this and secure people’s relationships (including ours of course), Alanna and I came up with an idea, whose prototype is described in this documentation.

Procedures

Two pieces of fabrics were cut in a flower shape and then sewed together. A layer of conductive fabrics was attached to each side of the fabrics. Their ends were then attached to crocodile wires which acted as a connection between the pillow and the Arduino.

 

  When the pillow is pressed, the circuit is completed by forcing the two conductive fabrics to touch each other.

Wools were staffed inside the fabrics in order to make it feel like a pillow. And here is a picture of the completed project

Programming

This was the hardest part of the project because neither I nor Alanna has ever programmed the Arduino to be connected to the internet. But thanks to the internet! We watched several videos and got it working.

We chose the Arduino Yun for the project because it can be connected to the internet without any additional hardware or software. After the Arduino was connected to the computer, the computer was connected to the WIFI which was broadcasted by the Arduino and then used a browser to navigate to arduino.local/. Then, we set a username and password for our Arduino and choose a WIFI network to connect it.

The email sending process involved three things: a trigger (the button in the pillow in this case), a web server and the software.

Web server
I created a PHP file which I then uploaded it to a web server. This file was coded in such a way that an email is sent to a certain email address everytime the page was loaded.

Software

In order to send the email by using the Arduino, the Https Client example was used and modified accordingly. The codes were modified such that the Arduino only load the page which sends the email only and only if the state of the pillow button is HIGH.

How to access the Http Client example file. These codes give an Arduino web browsing capability as a normal browser but with less feature like you cannot use the Arduino to watch a YouTube video.

 

 

The Arduino codes

The PHP codes. They can be accessed directly at www.summertz.org/sendmail1.php

Wiring of the Arduino

 

And here is the message to mom!

Challenges
Configuring the Arduino with the internet took more than 2 hours after more than 10 failed attempts before we consulted an IMA fellow. We learned from him that Arduino cannot access the college network. We then decided to use a tethering hotspot by using a phone.

I am glad that we were able to make our project work. But this is not 100% how we envisioned it. Originally we wanted to send text messages instead of emails. This is because emails are too formal and not very commonly used in normal conversation. This was not easy to implement since it needed a GSM module to be used with the Arduino. However, I would like to explore this implementation in the future.

To conclude, this is the most exciting IMA project I have ever done so far. It forced me to push myself to learn more and more. At the end, I was able to appreciate the beauty of technology.

Disclaimer:  It is always a good idea to spend time talking to friends/relatives. The purpose of this program was not to discourage that human-human interaction and introduce a robot-human interaction. Therefore, this must only be used if there are no other alternatives to be connected with your loved ones.

 

Week 8: Response to “The Work of Art in the Age of Mechanical Reproduction” by Walter Benjamin (Vasudevan)

Imagine a world where it is free to reproduce any work of art. This implies that one doesn’t have to travel to New York in order to see the Statue of Liberty or go to France in order to see the Monalisa painting because all the artworks on the planet will be equally available to everyone everywhere. Of course, there will be consequences which are associated with this imagination. One of the consequences is that the artists and art dealers won’t be as rich as the ones in the normal world. However, everyone will have access to art and be able to appreciate its beauty.

Some people have become rich for mechanically reproducing ancient artwork and fake them to look like the original ones. For example, a case of a Spanish art dealer who is notorious for reproducing and selling fake paintings, acquired millions of dollars before he was arrested by the authorities.

In this essay, Walter Benjamin discusses how technological advancement by specifically referring to mechanical reproduction has affected the development of art. He argues, if our generation is more developed than the past generation, how is possible that we are less developed in the production of artworks which are as good as those were produced by Leonardo Da Vinci or even produce better ones.

The answer to this lies on mass reproduction which highly depend on use of machines to reproduce artwork. Of course, this is not a new skill. In the essay, Benjamin identifies several techniques which have been in use even before the Industrial Era: woodcut relief-printing, etching, engraving, lithography, and photography. The only differences between these techniques and the modern mass production techniques are that the modern methods are faster, more accurate and what is most important is that the machine does most of the work.

The desire for mass reproduction, which is highly associated with a desire to earn more profit from the artwork, encouraged a use of high technology in the production of artwork. It also encouraged production of unauthentic artwork which is copied from the original ones and faked to look like the original painting by using different techniques like aging. As a result, the artists focus more on copying and reproductions of existed artwork and not on using their imaginations to make new innovative artworks.

Is the mass reproduction of artworks real harmful to the public? I would like to answer this in a form of a question: What are the differences between a Monalisa painting which is copied from the original one and faked by different techniques to look like the original Monalisa painting which is in the Louvre Museum in Paris? What is wrong if looking at both paintings will make you appreciate Leonardo Da Vinci imagination and creativity. And what is more important is that the only way you can no that the other painting is not fake is by spending months in an expensive laboratory looking at the painting through a lens which we normally don’t need them in our daily lives.

I am not trying to encourage faking of artwork, but I am arguing that maybe the principles we follow about the authenticity of artworks are not 100% correct and we need to re-evaluate them. They hinder-creativity and also the accessibility of artwork to the majority. As a result, sometimes people have to travel half-way the world in order to see an artwork which could have been reproduced in the local place and be accessible for everyone.

 

Week 7: Audio Project (Vasudevan)

Date: October 30, 2017

Team members: Paschal and Alanna

Overview

The aim of this task was to make an interactive podcast which is integrated on a website. Audacity was used for audio editing. The website was built by using HTML and CSS. Javascript codes were added in order to make the website interactive by recording the user’s inputs on the screen and respond accordingly.

Process and how the project works

The audios were recorded in small chunks. As a result, they all have different volumes. Also since a single microphone was used by two speakers, the volumes of the speakers also had different intensities. so we had to use a volume adjustment feature on Audacity in order the check the volume.

Apart from the broadcasters’ voices, we also decided to add layers of voices whose volume was reduced in order to work as background sound. By using this technique, the podcast became more lively and interactive since it gives a multi-dimensional feeling to the listeners.

The final version of the podcast with all the layers combined

Design of the website

The website design includes several features like playing, pausing, forwarding, rewinding, or jumping a specific part of the podcast.

 

The progress bar was designed by using CSS. The position of the progress indicator is determined by JavaScripts which modifies the style properties of the progress bar.

We faced difficulty in making the progress bar which enables the listener to know the progress of the talk. We were looking for an alternative to make sure that it updates the current time of the audio play without any input from the user. In order to do that, we tried using a while loop in order to set a condition that it is true all the time. However, the program crashed after running for a very short time (the browser gave a message that the page is not responsive which may be a sign that the page was consuming too much computer memory)

JavaScript codes which manage the progress bar functionalities

Finally, we decided to leave that functionality and give an option for the user to hover on the screen in order to activate the JavaScripts for showing the progress of the playing audio.

Another interesting functionality of the website is jumping to a specific part of the podcast.  This will enable the listeners to skim the podcast or listen their favorite part several times. This feature was implemented by using CSS and JavaScripts.

Challenges

The jump feature was calibrated by using a Javascript mouse tracking function which records the mouse’s X position and then translates it to a percentage which determines how far the indicator can be from the left of the progress bar. By considering that, the pixel values of the mouse position is relative to the screen of the device used, this feature may not be very useful in other devices different from a 13-inch laptop screen device which was used to calibrate this functionality.

Generally, apart from the difficulties we faced on calibrating the progress bar, the project met our goals. We may need more knowledge on Javascript in order to make an advanced progress bar.

Here is the link to the website