Final Project – Internet Art Project (Leon and Nimrah).

by Salomon Ruiz Hernandez

Instructors: Leon and Nimrah

Partners: Adriano Albarosa and Zain Majid.

Date: May 9 2018

Project  name: Shanghai 360

Link: http://imanas.shanghai.nyu.edu/~aga323/Final/

Shanghai 360°

Description

The goal of our project consists in showing the mixture between the traditional and the modern in Shanghai. With Shanghai’s economic prosperity not only the landscape has changed but also the culture of the city itself.  Since more and more people adopting Western brands while at the same time conserving traditions in the middle of this urban jungle to foreigners adapting to this new culture, Shanghai has become a cosmopolitan city that transforms at a fast pace. As a result the culture of the city is also in perpetual definition. As the Travel China Guide states “In addition to its modernization, the city’s multicultural flair endows it with a unique glamour. Here, one finds the perfect blend of cultures, the modern and the traditional, and the western and the oriental. New skyscrapers and old Shikumen together draw the skyline of the city. Western customs and Chinese traditions intertwined and formed the city’s culture, making a visitor’s stay memorable” (https://www.travelchinaguide.com/cityguides/shanghai.html)

For this purpose our project presents small clips and audios that expose some aspects of this mixture through food, music, language, customs, etc. Moreover, these videos live in a 360 image that shows two sides of the city of Shanghai: Puxi –often referred as the old side of town- and Pudong –often conceived as the modern side of the city. However, both traditional and modern elements coexist in these sides of the city, sometimes easily noticeable by us and sometimes not so easy. Therefore, our project also works as an eye-opener for the user by highlighting how small quotidian actions are a result of this blend the city is witnessing.

The process

Given the workload of our project we decided to split the multiple tasks, so we all worked on the filming of the videos and I also worked mostly on the code for the website. First of all, I edited the 360 image by changing contrast, brightness, saturation and warmth. Then, in order to work with the 360 image, Jiwon advised us to work with the library A-frame and so we did. We used some basic properties of A-frame in order to paste the 360 image into the website as well as the location tags that we used. This library also allowed us to change the position of the tags in the x, y and z axis and also to increase a little bit the size of these icon when hovering over them.

For the rest of the code we used normal JavaScript functions, such as the “onclick” function. When clicking any of the location icons we decided to show the films and audios that we created. At the beginning we were using popups in order to open our content in new tabs, but then we realized there was no purpose and need to do that, as the user will have to close these new tabs and go back to the main site. So then we decided to open our videos and audios in a div in the center of the screen. We created eight different divs, each of them containing one of the videos or audios. Then by using the “onclick”  function we changed the display of these divs in order to show them and hide them when clicking on the “x” button. We tried to best associate our content in the map to the place where this scenes or conversations could take place. For instance, for the scene we filmed in the Bund, we placed our location tag in the Bund; for the scene in the park, we placed the location tag in a place that looks like and park, and so on. We also decided to add an info tab at the top in the right corner so people learn about the purpose of our project and also added the logo of our project that we designed. We fixed the position of these two so people can see them even when they rotate the image.   

After receiving feedback on the User Interaction Testing that we had in class, we decided to do some changes. We decided to keep the same font along the website in order to have consistency. We also decided to put a border in the info div. Moreover, after we let the users play with our website, we realized that when closing the videos the audio kept playing, as we were just hiding the div where the video was pasted, so we modified the code in order to also stop the video when clicking in the “close” icon. Another feature that we added was making the background of the website go dark when playing a video so that the user can focus on the video without being distracted by the 360 image on the background. We also changed the color of the closing button as it was not visible in the parts where our videos were black. Additionally, we changed the color of the location icons to black and made them turn red when hovering over them. Finally we made the videos look bigger.

For the filming part we filmed 6 different videos and we recorded two audios. The audios correspond to a conversation between a taxi driver and a foreigner in Chinese, and a Chinese kid speaking English. For the videos we picked six different locations: Lujiazui, Jingan Temple, a park, The Bund, Tianzifang, and burger king. For the Lujiazui scene we have two business men eating traditional Chinese food in their office. In Jingan Temple we filmed a tourist being impressed by this gem of Shanghai. In the park we filmed a foreigner flirting with a Chinese girl. In Tianzifang we filmed a foreigner bargaining in Chinese with a local vendor. For the Bund scene, we have Chinese people asking to take a picture with a foreigner and finally, in burger king we filmed a Chinese guy listening to English songs while enjoying a burger. I filmed the Lujiazui scene, the park scene and the Bund scene. Also I acted for the Jingan temple scene. Here are some of the scenes:

 

Learnings and challenges

This project has been without doubt the most challenging project I have worked on. First of all, taking the 360 picture was not an easy-task. As 360 images are difficult to edit, we had to find the right spot in order to have an image that works well for the project. After being kicked out of some buildings, we finally found a rooftop where we could take the 360 picture with the help of the tripod and the app Theta V. Then we did some basic edition to change the brightness, the color, the contrast and the warmth. In order to overcome this challenge, my team and I learned how to make use of the 360 camera and we also kept trying in different buildings until we got a decent view.  

 

 

 

 

 

The second big challenge was putting this 360 image into our website. For this we used a library called “A-frame”, which allows to work on WebVR. We could then paste this image and exploit its 360 characteristics. So we had to learn some basic functions of this library in order to place our location tags in different places.

Another challenge was filming the videos as sometimes our logistics were not well planned beforehand resulting in having to film some scenes multiple times. Also matching the audio and the video was complicated for some of our scenes. And adding the subtitles for the conversations in Chinese also took us a lot of time.       

 

What I would change

Something that I would change first of all would be the 360 image as I feel the current image does not show a lot of the traditional, old side, of the city. Moreover, there is a big part of our image that shows a wall, therefore the 360 view is limited, which limited us to only place th location tags on one side of the image. So we could maybe find a better location and take a new picture.

Secondly, I would make a small animation for the logo so it can rotate every certain seconds.  

Also I would not only change the color of the location icons when hovering over them but rather change the color when clicking them and keep that new color in order to remind the user they already clicked on that icon. In addition I would try to see if there is way to rotate these location tags in A-frame as the icons that are far on the x-axis look very tiny.  

Overall, our project met most of the objectives we initially had, which was an interactive website using a 360 image and show our content when clicking in different locations of this image. The content I also think met our expectations. Nonetheless, improvements can still be done, but all the work we did is reflected in the final product. 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>360&deg; Image Gallery</title>
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
	<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
	<script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script>
	<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
	<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
#randomBox{
	width: 100px;
	height: 100px;
	position: fixed;
	top: 20px;
	left: 20px;
	display: block;
}

#randomBox2{
	width: 100px;
	height: 100px;
	background: blue;
	position: fixed;
	top: 0;
	right: 0;
	display: none;
}

</style>
<body>
<div id="logo"></div>

	<a-scene>
		<!-- 360 image -->
		<a-sky src="images/shanghai360.jpg"></a-sky>

		<!-- image tags inside of aframe library -->
		<!-- position="x y z" -->
		<a-image id="jingan" position="-0.7 3.5 0" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
		<a-image id="bund" position="-3 0 0" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
<!--
		<a-image id="puxi" position="-6 1.5 1" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
		<a-image id="river" position="4 1.5 3" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
		<a-image id="lujiazui" position="-3 1.5 3.8" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
		<img width="" height="" src="">
		<a-image id="mcdonalds" position="2 -0.6 0" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
		<img width="" height="" src="">
		<a-image id="street" position="2.6 2.5 -1" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
		<img width="" height="" src="">
		<a-image id="nihao" position="-3.7 -1 2" src="images/icon.png" 
		event-set__enter="_event: mouseenter; scale: 1.2 1.2 1" 
		event-set__leave="_event: mouseleave; scale: 1 1 1"
		></a-image>
-->



		<a-entity position="0 1.8 4">
			<a-entity camera look-controls mouse-cursor>
				<a-cursor></a-cursor>
			</a-entity>
		</a-entity>
	</a-scene>

	<img id="logo" src="images/Logo.png" width="180" height="180" style="border-radius: 50%">	</img> 


	<div id="randomBox">
	</div>
	<div id="randomBox2"></div>

	<div id="video">
	 <video>
	<source src="video/BestFriend.mp4" type="video/mp4">
		    </video>


	</div>	

	<script src="js/p5.js"></script>


<span onclick="clickInfo()" id="info-button">i</span>
	<div id="info">
		<span onclick="closeInfo()" id="close-button">X</span>
		<h1 id="title">Information about Project</h1>

		<p id="paragraph_1" style="font-size: 30px; left:10px " , > The goal of this project is to showcase that Shanghai is a city that is both traditional and  new. Through our audio and video pieces, we would like to show the different ways in which the locals develop Western ways and similarly, foreigners develop traditional values while they go about their daily lives in Shanghai. </p>
	   <br>
	   <p style="font-size: 30px; left: 10px"> We hope you enjoy our project! </p>
	   <br>
	  
	  <p style="font-size: 30px; left: 10px"> The Shanghai 360 Team</p> 




	</div>


</body>
<script type="text/javascript">
	document.getElementById('jingan').addEventListener('click', function(){
				document.getElementById('randomBox2').style.display = "block";


		//window.open("popups/video1.html")
		//document.getElementById('randomBox').style.display = "block";
	});

	document.getElementById('bund').addEventListener('click', function(){
		document.getElementById('randomBox').style.display = "block";
	});


	 function clickInfo(){
  	document.getElementById('info').style.display="block";
  }
  
  function closeInfo() {
  	document.getElementById("info").style.display="none"
  }
</script>
</html>

Response to “Web Work: A History of Net Art” (Leon and Nimrah)

By Salomon Ruiz

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

Rachel Greene explains in this article how the art on the Internet or “net.art” became very important. Artists found on the web a great medium to create art that could be easily accessible and where they could collaborate easily. Many artists started to use the Internet to present art that was not only entertaining but that most of the time was meaningful. For instance, some artists published artwork supporting cyberfeminism. Then it started to become more and more popular among artists and among people as well, that even museums such as The Whitney Museum or the San Francisco MOMA recognized this kind or art living on the web. Nowadays, art existing on the Internet is even economically profitable, that many artists prefer this medium to create their work. A big advantage of this kind of art, I would say, is that you do not even need to go to a museum in order to be exposed to art, just one click and you can discover really interesting artworks with a great purpose behind.

However, Rachel Greene also mentions about how there is a lot of meaningless content on the web. Because the web is free anyone can publish any kind of content, therefore we need to draw a line between what can be considered as art and what can not. Otherwise art could be devalorized.

 

Week 11: Response to “Hackers and Painters” and “Computers, Pencils and Brushes” (Leon and Nimrah)

By Salomon Ruiz

Response to “Hackers and Painters” by Paul Graham

In this article Paul Graham talks about how hacking shares similarities with painting. He argues that hacking is not a science such as math, but rather an art. Hackers are creators of software. However, most of the time companies do not give them the freedom to create what they really want, therefore they even forget about the essence of hacking. And this is dangerous because nowadays hacking is in its glory. As Graham states every time “a new medium appears […] people are so excited about it that they explore most of its possibilities in the first couple generations. Hacking seems to be in this phase now”, therefore it is crucial that hackers get the freedom to exploit this medium by designing whatever software they want without limitations. This is why open-source hacking has become really important as hackers can make contributions there without someone telling them what to do. Another thing hackers can do in order to make plenty use of their creativity is launching their own start-ups, though this might not be so easy. However, when a start-up has a good idea and consider to a great extent the user, it can be successful. For instance, in recent years a lot of startups have risen as a response of people’s needs such as Uber, Eleme. etc. Therefore the user is a really important element when it comes to hacking as well as painting. The revolution of hacking needs to push forward.

Response to “Computers, Pencils and Brushes”by Paul Rand

In this article, Paul Rand talks about the conception of the computer in design. It is often said that the computer is just a tool, just like a pencil or a brush, that helps designers create their work. Nonetheless, it often seems that designers depend on this tool in order to create their work, rather that just using the computer in order to create what a pencil or a brush do not allow them to. The question arises then that if moving the mouse and clicking in order to create something on the screen of the computer can be called designing. Especially now that even in design schools the computer seems to be replacing the drawings, the paintings made by hand. In this article, Rand shows a drawing of a bunch of lines that at first I thought had been made with a computer. However, after reading the note at the bottom of this drawing, I learned it was a handmade design made with the help of a pen, a compass and a straight edge tool, which was surprising as it seemed to be really virtual. I believe digital design is also as creative as handmade design because even though it seems that in digital design we just click the truth is that creativity is also required in order to make an outstanding design. Even if a lot of people can easily learn how to manipulate a computer, the most important factor in digital design is learning how to make use of the different features of the design software in order to create something unique.

Video Project (Leon and Nimrah)

by Salomon Ruiz Hernandez

Instructors: Leon and Nimrah

Partners: Kaitlin Poon and Jaime Jo

Date: April 12, 2018

Project  name: Paint Your Own Future

Link: http://imanas.shanghai.nyu.edu/~kp2184/VIDEO/index.html

Paint Your Own Future

Description.

For our video project we first had the idea of talking about the stereotypes of different cultures but then we decided to change the topic and talk about pursuing your dreams. Our video presents the story of Taylah, a young girl who wants to apply to an art school as she is really good at painting. However, her parents, her friends and even the school counselor do not support this idea. They all think art school is a waste of time and that she won’t make it. Besides the confrontations she has with all these characters, she succeeds to get into her dream school, showing that dreams can become true even if everyone is against those dreams, if we keep fighting for them.

The process.

First, we started by creating the storyboard. We divided the work so each of us did a dialogue between the main character and the other characters. I wrote the story between Taylah and her school counselor. Here is the beginning of the storyboard I made:

 

 

Then we divided the work so I ended up working on the code for the website. For the interaction part we decided we wanted to pause our main video when showing a specific object that would be clickable in order to open a new video in a new window. For this we cropped the main video in different parts and at the end of each part, where the specific object is displayed, an image that we previously Photoshoped with a glowing border around the object appears in order to let the user know the object is clickable. The videos that open in the new windows correspond to the scenes of the different confrontations Taylah has with her parents, her best friend and the school counselor, in regard to her desire to apply to Juilliard. After those videos end, the main video is resumed to where it stopped. On the videos Kaitlin applied an ending to indicate it is something like a vision of the main character.

Continue reading

HTML code 
<!DOCTYPE html>
<head>
  <title>INTERACTIVE VIDEO PROJECT</title>
<link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="header">
    <h1> PAINT YOUR OWN FUTURE </h1>
   
    <video id="vid" onclick ="playVideo()" width="900" height="500"  style="border-style: solid; border-color: black; border-width: 10px; background-color: black;">
		   <source src="video/TaylahPart1.mp4" type="video/mp4">
    </video>
    <img id="brush" src="image/PaintBrush.png">
    <div id="tape"></div>  
<div id="tape2"></div>  
<div id="tape3"></div>  

<div id="tape4"></div>  
    <div class="footer">
      <h3>Copyright 2018 NYU Shanghai. Site by Jaime Jo, Kaitlin Poon and Salomon Ruiz</h3>
    </div>

    <script type="text/javascript">
      var vid = document.getElementById("vid");
      var body =  document.getElementsByTagName("body")[0];
      vid.addEventListener('ended', ()=> {
        console.log("ended!");
        vid.poster = "image/PaintBrush.png";
        vid.autoplay = false;
        vid.src="";

        var border = document.createElement('div');
        let width = vid.width - 10;
        border.setAttribute('class', 'border-div');
        border.style['z-index'] = 100;
        //border.style['border-color'] = 'purple';
        border.style.width = width + 'px';
        border.style.height = vid.height - 10 + 'px';
        border.style.top = vid.offsetTop + 'px';
        border.style.left = vid.offsetLeft + 'px';
        border.style.cursor = 'pointer';

        body.append(border);
        border.addEventListener('click', ()=> {
          document.location = 'parents.html';
        });
      });;

      function playVideo(){

        if (vid.paused==false) {

          vid.pause();
        }
      else{
        vid.play();
      }

      }

CSS code 
html{
	height: 100%
}

body {
	height: 100%;
  background: url(https://media.gettyimages.com/photos/multicoloured-paint-splatters-on-weathered-wooden-floorboards-picture-id493748504?b=1&k=6&m=493748504&s=612x612&w=0&h=7AQX0UA0EekzqOr3QFKk-uKBgb7Y0YRcjCUBqjxD0Cc=) black;
}

h1 {


}

img {
	width: 880px;
	height: auto;

}

#brush{

display: inline-block;
display: none;
}

#tape {
    width: 200px;
    height: 50px;
    position: absolute;
    background: white;
    transform: rotateZ(140deg);
    opacity: 0.6;
    top: 146px;
    left: calc(50% - 39%);
}


#tape2{
	    width: 200px;
    height: 50px;
    position: absolute;
    background: white;
    transform: rotateZ(218deg);
    opacity: 0.6;

        top: 146px;
    right: calc(50% - 39%);
}
#tape3{
	    width: 200px;
    height: 50px;
    position: absolute;
    background: white;
    transform: rotateZ(224deg);
    opacity: 0.6;

        bottom:  22px;
    left: calc(50% - 39%);
}
#tape4{
	    width: 200px;
    height: 50px;
    position: absolute;
    background: white;
    transform: rotateZ(140deg);
    opacity: 0.6;

        bottom:  22px;
    right: calc(50% - 39%);
}

@font-face{
font-family: paint;
src: url('chocolate.ttf');

}
.header {

/*@font-face{

	font-family: paint;
src: url( font/chocolate.ttf);
*/
 font-family: futura;
	font-size: 25px;
	text-align: center;
	width: 1350px;
	height: auto;
	margin: 0 auto;
	color: black;
}

.content {

	font-size: 15px;
	font-family: futura;
	text-align: center;
	align-content: center;
	height: auto;
	width: 880px;
	margin: 0 auto;
	padding-top: 70px;
	background-color: #cfe3ff;


}

.footer {
	font-family: futura;
	font-style: bold;
	font-size: 18px;
	text-align: center;
	height: 50px;
	width: 880px;
	margin: 0 auto;

}



#overlay {

    position: absolute;
    display: none;
    width: 655px;
    height: 500px;
    top: 284px;
    left: 240px;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}

img {
	cursor: pointer;
}

.border-div {
    position: absolute;
    border: 5px solid transparent;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
       -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
            transition: border 0.1s linear, box-shadow 0.1s linear;
}

    </script>


</body>

Week 9: Response to “The Work of Art in the Age of Mechanical Reproduction” (Leon and Nimrah)

By Salomon Ruiz

Response to “The Work of Art in the Age of Mechanical Reproduction” by Walter Benjamin

Walter Benjamin talks about the reproduction of art, especially about the film. It is commonly believed that a reproduction of an artwork can not convey what Benjamin calls the aura of it. So it is believed that a film, contrary to a play in a theater, can not convey the aura of the play, of the actors. A film forces the spectator to focus on the image the film is showing, the spectator has no choice. Moreover, a film does not give the spectator the time to reflect about what is being displayed on the screen as the images move constantly and quickly, as opposed when you appreciate a painting where you have all the time to analyze it. However, a film can offer things that a theater play can’t. For instance, a film can play with the reality thanks to techniques like the slow-motion where the time can be extended. Moreover, nowadays the film is changing its conventional form in order to let the spectator be part of it. For instance, the film is allowing the spectator to choose part of the story and to choose the perspective they wanna see, resulting in a whole new experience. Therefore, I believe a film has its own aura.

 

 

 

JavaScript Exercise 2 (Leon & Nimram)

By Salomon Ruiz

Link: http://imanas.shanghai.nyu.edu/~srh450/js-exercise-2/index.html

JavaScript in-class Exercise 2

The purpose of this exercise was to highlight only the box clicked using JavaScript. The hint was the CSS properties on the class “innerrect”. So what I thought first was making the background-color change when clicking the desired box. I tried adding on the function “checkLocation” “document.getElementById().style.background  = blue” using the Id of every box but it didn’t work. Then I realized I needed to change the display according to the coordinates of the boxes as the background color was already established on the CSS. So for this I introduced two variables “Xpos” and “Ypos” corresponding to the position of the mouse. Then I introduced if statements so that according to the position of the mouse the display property would show the color of the box clicked and then hide the color for the rest. I used then  “document.getElementById().style.display  = none or block”. I used 250 in my conditionals as that was the size of the boxes according to the CSS. Here is my final code. 

 

<!DOCTYPE html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

	<div class="outerrect" onclick="checkLocation()">

		<div class="innerrect" id="topleft"></div>
		<div class="innerrect" id="topright"></div>
		<div class="innerrect" id="bottomleft"></div>
		<div class="innerrect" id="bottomright"></div>

		<div class="vertdivide"></div>
		<div class="horizdivide"></div>

	</div>

	<script>
       var Xpos;
       var Ypos; 
 		function checkLocation() {
        
        var Xpos =event.clientX;
        var Ypos = event.clientY;


        if(Xpos < 250 && Ypos < 250  ){
     
         document.getElementById("topleft").style.display = "block";
         document.getElementById("topright").style.display = "none";
         document.getElementById("bottomright").style.display = "none";

         document.getElementById("bottomleft").style.display = "none";

        }
       else if (Xpos > 250 && Ypos < 250 ) {
       	document.getElementById("topright").style.display = "block";
       	document.getElementById("topleft").style.display = "none";
       	document.getElementById("bottomright").style.display = "none";
       	document.getElementById("bottomleft").style.display = "none";

}
        if(Xpos <  250 && Ypos > 250  ){
     
         document.getElementById("topleft").style.display = "none";
         document.getElementById("topright").style.display = "none";
         document.getElementById("bottomright").style.display = "none";

         document.getElementById("bottomleft").style.display = "block";
}
    else if (Xpos > 250 && Ypos > 250 ) {
       	document.getElementById("topright").style.display = "none";
       	document.getElementById("topleft").style.display = "none";
       	document.getElementById("bottomright").style.display = "block";
       	document.getElementById("bottomleft").style.display = "none";
}

	}
		
	</script>
</body>

Week 8: Response to Chimamanda Adichie’s TED talk: “The Danger of a Single Story” (Leon and Nimrah)

by Salomon Ruiz

 Response to Chimamanda Adichie’s TED talk: “The Danger of a Single Story”

In this talk, Chimamanda Adichie highlights the importance of not sticking to one single story. Every person, every place has multiple stories so we shouldn’t base our perspective of those just on one story as this just give us an incomplete perspective. Adichie says “a single story creates stereotypes and the problem with stereotypes is not that they are untrue but that they are incomplete”, so we shouldn’t believe in stereotypes as most of the time they just reflect an aspect of a certain culture. For example, a lot of people think about Mexico City, my hometown, as a dangerours city, and even though yes there is crime just like in many other cities, its not like if you just walk and get shot. Stereotypes can make us forget about the other stories. For instance, my hometown is also one of the cities with the most museums in the world and I found a comment on a thread on reddit.com (https://www.reddit.com/r/todayilearned/comments/14fas0/til_that_mexico_city_has_more_museums_than_any/) that said “I bet the average person doesn’t think of Mexico City as the type of place with a lot of museums which shows how limited our perspectives can be. And of course we can not know everything about every single culture but we should keep an open perspective on things.

Stereotypes can really stick to people, and they can result in hate or racism against a whole culture. For instance, many middle eastern people are seen as terrorists, which is a very dangerous assumption. And it is not only about cultures but we shouldn’t judge anything or anyone just by a single story. We often criticize people even at school when they do something we see as of bad reputation but we do not know if there might be a story behind that explains why they do such a thing. And the comments we make can really impact that person’s live. Bullying can be a result of that for example.

Audio Project (Leon and Nimrah)

by Salomon Ruiz Hernandez

Instructors: Leon and Nimrah

Partner: Ahmad Raja

Date: March 17, 2018

Project  name: Cultural fusion!

Link: http://imanas.shanghai.nyu.edu/~srh450/week2/audio%20project/intro.html

 

Cultural musical fusion 

Description:

For this project my partner and I had different ideas. We both wanted to create something related to cultural diversity. We first thought about mixing different English accents but then we thought this could be offensive for some people. Then we thought about mixing different languages but then the users wouldn’t understand all the audios so then we came up with the idea of music. This project creates a cultural fusion through music. A website introduces the project and then you can go to a second website where the user is free to play different sounds corresponding to different musical instruments from different cultures such as the Chinese guzheng, the Mexican marimba or the Indian dhol. An opera can also be played and then add the sound of the different instruments in order to create a unique musical experience.

The process

First we decided which instruments we were going to choose. Then we collected the sound of these instruments from freesound.org. Then we croped these audios and modified the intensity of the sound thanks to Audacity. We lowered the volume of some sounds so if someone plays those sounds while the opera sound is playing it doesn’t result in a annoying noise. Then we created an intro and modify it with Audacity to give it a robotic effect and then we added a gif simulating the screen is talking in order to match the sound We created two websites, one with the introduction sound and the other with the instruments sounds. On the intro website we decided to play the audio as soon as the page loads and we added a button saying “start” in order to go to the next page.

On the second website we added gifs corresponding to the musical instruments that also function as buttons to play and stop the music. We decided to change the cursor to pointer when hovering on the gifs to make evident the user has to click on the images to make something happen. Alto on the header of the page, if the mouse is moved to the right the volume increases and if it goes to left the volume decreases.

This is how the final website looks like:

 

 

Challenges and learnings 

The coding part was challenging as we didn’t know how to make the sound play and stop when clicking on the gifs. We tried using the code we saw in class but we didn’t really understand it so at the end we created different divs and associated a function to each div, so the code got really long, which was not helpful when we found errors.  Also we realized that after playing the opera sound sometimes you have to click on the gifs twice or otherwise it won’t work

I learned how to use the basics of Audacity when modifying the audios we got from the web. I also learned how to play an audio using JavaScript.  During Jiwon’s workshop I also learned how to change the cursor when hovering on an element.

What would I change 

First of all I would use shorter audios, just some beats, to avoid  the opera to sound like a mess. Then I would record the sounds of the instruments, although that would be difficult as some instruments we picked are not very common. Then I would change the way to play the opera as it is not too evident the user has to click on the title. Same for the control of the volume. Also I would choose other gifs to make the whole website more aesthetic. Also I was thinking maybe it would’ve been interesting using sounds created with normal objects such as chopsticks.

 

<!DOCTYPE html>

<head>
	<title>Audio Project</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>

<div id = "title"><h1    onclick="playAudio0()"  onmouseover="changeVol()" > Cultural Fusion </h1></div>	


<audio id="opera">
		<source src="audio/Opera.wav" type="audio/wav"   loop preload="auto">
	</audio>

<audio id="myAudio">
		<source src="audio/maracas1.wav" type="audio/wav"   loop="loop">
	</audio>
<audio id="myAudio2">
		<source src="audio/GuZheng1.wav" type="audio/wav" loop preload="auto">
	</audio>
<audio id="myAudio3">
		<source src="audio/dhol.wav" type="audio/wav"   loop preload="auto">
	</audio>
<audio id="myAudio4">
		<source src="audio/Conga.wav" type="audio/wav"  loop preload="auto">
	</audio>
<audio id="myAudio5">
		<source src="audio/Guitar.wav" type="audio/wav"  loop preload="auto">
	</audio>
<audio id="myAudio6">
		<source src="audio/marimba.wav" type="audio/wav" loop="loop">
	</audio>

<audio id="myAudio7">
		<source src="audio/trumpet.wav" type="audio/wav" loop preload="auto">
	</audio>

	<audio id="myAudio8">
		<source src="audio/oud.wav" type="audio/wav" loop preload="auto">
	</audio>
<audio id="myAudio9">
		<source src="audio/flute.wav" type="audio/wav" loop preload="auto">
	</audio>
<audio id="myAudio10">
		<source src="audio/banjo.wav" type="audio/wav" loop preload="auto">
	</audio>


<div id = "audio1" >   <img onclick="playAudio1()"   src="images/maracas.gif" height="150" width="100%/3"  >   </img> onclick="playAudio()" </div> 
<div  id = "audio1">   <img onclick="playAudio2()"   src="images/guzheng.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio3()" src="images/dhol.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio4()" src="images/conga.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio5()" src="images/guitar.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio6()" src="images/marimba.gif" height="150" width="100%/3">   </img> </div> 

<div  id = "audio1">   <img onclick="playAudio7()" src="images/trumpey.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio8()" src="images/oud.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio9()" src="images/flute.gif" height="150" width="100%/3">   </img> </div> 
<div  id = "audio1">   <img onclick="playAudio10()" src="images/banjo.gif" height="150" width="100%/3">   </img> </div> 


	


</div>
	
	<script type="text/javascript">
		var aud0= document.getElementById('opera')
		var aud = document.getElementById('myAudio');
        var aud2 = document.getElementById('myAudio2');
		var aud3 = document.getElementById('myAudio3');
		var aud4 = document.getElementById('myAudio4');
		var aud5 = document.getElementById('myAudio5');
		var aud6 = document.getElementById('myAudio6');
        var aud7 = document.getElementById('myAudio7');
		var aud8 = document.getElementById('myAudio8');
		var aud9 = document.getElementById('myAudio9');
		var aud10 = document.getElementById('myAudio10');



        var state = true   
        
         function playAudio0() {
		if (state == true)  {
        aud0.play();
        state= false;
    }

        else {

       aud0.pause();
        state=true; 
}
}

        function playAudio1() {
		if (state == true)  {
        aud.play();
     
        state= false;
    }

        else {

       aud.pause();
        state=true; 
}
		}

function playAudio2() {
		if (state == true)  {
        aud2.play();
        state= false;
    }

        else {

       aud2.pause();
        state=true; 
}
		}

		function playAudio3() {
		if (state == true)  {
        aud3.play();
        state= false;
    }

        else {

       aud3.pause();
        state=true; 
}
		}

		function playAudio4() {
		if (state == true)  {
        aud4.play();
        state= false;
    }

        else {

       aud4.pause();
        state=true; 
}
		}	
	
function playAudio5() {
		if (state == true)  {
        aud5.play();
        state= false;
    }

        else {

       aud5.pause();
        state=true; 
}
		}

	function playAudio6() {
		if (state == true)  {
        aud6.play();
        state= false;
    }

        else {

       aud6.pause();
        state=true; 
}
		}
function playAudio7() {
		if (state == true)  {
        aud7.play();
        state= false;
    }

        else {

       aud7.pause();
        state=true; 
}
		}



		function playAudio8() {
		if (state == true)  {
        aud8.play();
        state= false;
    }

        else {

       aud8.pause();
        state=true; 
}
		}

		function playAudio9() {
		if (state == true)  {
        aud9.play();
        state= false;
    }

        else {

       aud9.pause();
        state=true; 
}
		}
		function playAudio10() {
		if (state == true)  {
        aud10.play();
        state= false;
    }

        else {

       aud10.pause();
        state=true; 
}
		}

		function changeVol(){
    var vol = event.clientX / window.innerWidth;
    aud0.volume = vol;
}
		

		</script>

</body>

Week 7: Response to “Theft & Artistry: Coldplay + Beyonce” (Leon and Nimrah)

By Salomon Ruiz

Response to “Theft & Artistry: Coldplay + Beyonce”

I have no great knowledge about the Indian culture so I can not tell for sure what could be acceptable and what be offensive for Indian people on Coldplay and Beyonce’s video. I just see they’re trying to depict India but some images might be stereotypes or they might no. And the fact Beyonce is wearing, what I suppose is a traditional Indian dress, just for the video might be disrespectful, as she does not come from India. But who knows? Maybe people from India do not really care.

The thing is that many artists use cultural appropiation for the sake of their artwork, which creates a big debate. Is it ok for these artists to use the culture of others? Especially if most of them just make it for the money.

Nitasha Tamar Sharma claims that the problem is not wether cultural appropiation is bad or not but rather how we use this appropiation. If it’s just a superficial appropiation then what we convey might be wrong about this culture and therefore offensive. This can result in stereotypes of the culture which is rather negative. Also, people from the same culture might have different opinions when someone is using their culture in songs, books, movies, etc.

In this article, for example, they talk about the song “Sorry” by Justin Bieber and a Chilean accuses Bieber of appropiation of reggaeton. I personally, as a Latino, don’t consider this song as reggaeton or don’t see a strong link between reggaeton and this song , therefore it’s not really offensive for me. This song even has a “latino remix” with a reggaeton singer called J Balvin, though the only thing that changes in this “remix” is a part in the song where the Latino singer sings in Spanish. Besides that, the music is the same, they do not include a reggaeton beat, so I’m not completely convinced that calling this remix a “latino remix” was the best choice. Does including a Spanish part makes the song a latino remix? Should we then call “Despacito” ft Justin Bieber an “American remix” just because it includes an English part? Here we see the importance of the terms as it could result in something offensive.

However, cultural appropiation can also be positive. The fact of how the Singer Paul Simon “brought South African music to the global stage” is an example. I can also think about “Coco” the Oscar winner movie that depicts the Mexican tradition of the Day of the Death and even if it was not made by Mexicans it really respects the tradition and the directors spent months in Mexico to learn about the culture, they just didn’t make the movie based on superficialities. So yeah I think we have to be careful when taking something from other cultures to put it on your work because it can be offensive or it can even be dangerous. For instance we can talk about how some movies just reinforce stereotypes of some cultures.

Week 2: Response to “The Medium is the Message” by Marshall McLuhan (Leon and Nimrah)

By Salomon Ruiz

Response to “The Medium Is the Message” by Marshall McLuhan

McLuhan tell us the medium, the way we receive and send information, is more important than the content itself. He refers to the medium as “any extension of ourselves”. Through a pen, we can write down our thoughts. Through a movie we can convey any information. I believe yes the medium can be really powerful. For example, now instead of using coins or bills, we can pay using our phone, which has more advantages than using the other medium, as we do not need to worry about change or about splitting a bill.

He also mentions that the medium “shapes and controls the scale and form of human association and action” He offers examples such as the plane and the train. Thanks to those mediums now we can travel longer distances in less time. So our actions can be limited by the medium as well. In the past we couldn’t travel as easily as we can nowadays. Another example are the movies. Now we can talk with anyone about a movie we have both watched, so it’s easy to establish a communication with them.

McLuhan also highlights the importance in which the medium is used. There is no bad or good medium but the way in which we use it can be positive or negative. For instance if we use a weapon just to kill anyone for fun, then we would see this weapon as a bad medium, but if we use it in order to protect ourselves from something bad then it can be seen as a positive medium. Another example is the social networks which are really controversial as they can have many advantages but also many disadvantages. They can be addictive, superficial and even drive someone to commit suicide but they can also start a revolution or give us freedom of speech.

The most interesting about this text is the fact it was written around 50 years ago, because we can see that nowadays it is still the medium that have the greatest impact in our society.