Week 4: JavaScript Exercise 1 (Leon and Nimrah)

By Salomon Ruiz

Instructors: Leon and Nimrah

Link to my website: http://imanas.shanghai.nyu.edu/~srh450/js-exercise-1/index.html

JavaScript Exercise

For this exercise, first I created alerts when clicking each of the kittens pictures. For each image I wrote a different message. Then I created a button with the title “Kittens” and started adding different functions on an external JavaScript sheet, such as changing the colors of the paragraphs, the size and the content. I decided to change the title and its size when clicking this button. I also made the different sentences turn into different colors when clicking the button. Moreover, I made the second image of a cat change for another cat as well. Finally, I added a button (puppies) to open a pop up window showing the image of some puppies when clicked. I created a simple html page for this. Thanks to this exercise, now I understand better how to add DOM’s and BOM’s. However I would like to learn how to reset the original content when clicking the button again for example. Also how to style the buttons as the predetermined buttons doesn’t look very god.

 

 

 

Week 3: CSS and HTML website (Leon and Nimrah)

By Salomon Ruiz

Link to my website: http://imanas.shanghai.nyu.edu/~srh450/week33/index3.html

 

 

 

 

 

 

 

 

 

The original website I created the first week was about my favorite Mexican dishes. This time I styled my website thanks to all the functions I learned in class and some other that I looked on the Internet. I created 5 different divs in order to place all my content. One div was for the title, one for the main content, one for my signature and two more for some gifs. I used images from the web for the background and for the background of my title. I added some borders to my divs and also rounded the borders of the first div. I created two divs for the gifs because, first, I tried using the function “position: fixed” to add some funny gifs but then I realized these gifs altered the aesthetics of my website so I preferred using the function “position: absolute” to place some other gifs on the sides of the title. I selected images of the food shown from above in order to make my website more aesthetic. While working on the website sometimes when I added a function and then refreshed the page to see the result, the page wouldn’t change but then most of the time I found that it was due to some syntax error like writing “:” instead of “;” so I realized these minimal errors can affect the whole website. You can find my final codes here.

 

 

 


CSS Code


body {
font-family: Helvetica;
background: url(https://static1.squarespace.com/static/57dce10629687f44744c1d6b/58b76577197aea733bc62c3c/58b76579db29d65fdf3dcf15/1488414171566/tapas-background.png?format=2500w) #ffbfd3	;

}


.header {

margin-top: 50px;
text-align: center;
background: url(http://2.bp.blogspot.com/-snQJLE4173U/U9OcEtrONMI/AAAAAAAASF4/C1XRrIhUzWA/s1600/DSC_0156m.jpg) black;
color: white;
height:240px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 32px;
font-weight: bold; 
border-radius: 25px;


}

.content {

text-align: left;
margin-left: 300px;
margin-right: 300px;
background: white;
margin-top: 110px;
padding-left: 112px;
padding-top: 35px;
padding-right: 112px;
border-style: dashed;
border-width: 10px;
border-color: #ff00a9; 
padding-bottom: 40px;


}



.signature{
text-align: right;
font-size: 30px;
font-weight: bold;
color: white;
}

.gif{

position: absolute;
right: 150px;
	top: 105px;
border-radius: 25px;

}


.gif2{

position: absolute;
left: 150px;
	top: 105px;	
border-radius: 25px;


}


HTML Code


<!DOCTYPE html>
<head>
	<title>nihao</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
 <meta charset="utf-8"> 
</head>

<body>
	<div class="header">
		
		<h1> 你好! </h1>
		<h2> Hola! </h2>  
    </div>

	<div class="content">
	  <h1>我是墨西哥人 and these are some of my favorite Mexican dishes:</h1>
	    <h2> Tacos al pastor </h2>  

        <center> <img src="images/tacos.jpg" height =300, width=500 >     </img> </center>
      <p> Marinated pork shaved from a trompo (a vertical rotisserie) on a corn tortilla with pineapple, cilantro, onions and salsa.     
<br>

      </p>好吃极了! </p>

<h2> Tamales </h2>  
 <center> <img src="images/tamales.jpg" height =300, width=500 >     </img> </center>
      <p> Dish made of masa, which is steamed in a corn husk or banana leaf. The wrapping is discarded before eating. Tamales can be filled with meats, cheese, vegetables, etc.  
<br>

</p>甜甜的, 辣辣的!
 </p>
      
<h2> Chiles en Nogada </h2>  
 <center> <img src="images/nogada.png" height =300, width=500 >     </img> </center>
      <p>  It consists of poblano chilis filled with picadillo (a mixture usually containing shredded meat, aromatics, fruits and spices) topped with a walnut-based cream sauce, called nogada, and pomegranate seeds, giving it the three colors of the Mexican flag.

<br>

</p>甜甜的, 辣辣的, 酸酸的!
</p>


<h2> Pozole </h2>  
 <center> <img src="images/pozole.jpg" height =300, width=500 >     </img> </center>
      <p>   Traditional soup or stew from Mexico, which once had ritual significance. It is made from hominy, with meat (typically pork), and can be seasoned and garnished with shredded cabbage, chile peppers, onion, garlic, radishes, avocado, salsa or limes.
<br>

</p>酸酸的, 辣辣的!
</p>

<h2> Mole </h2>  
 <center> <img src="images/mole.jpg" height =300, width=500 >     </img> </center>
      <p>   Mole poblano contains about 20 ingredients, including chili peppers and chocolate, which works to counteract the heat of the chili peppers, but the chocolate does not dominate. It helps give the sauce its dark color, but this is also provided by the mulato peppers. This sauce is most often served over turkey at weddings, birthdays and baptisms.
<br>
</p>甜甜的, 辣辣的!
</p>

<h2> Cochinita pibil </h2>  
 <center> <img src="images/cochinita.jpg" height =300, width=500 >     </img> </center>
      <p>   Traditional Mexican slow-roasted pork dish from the Yucatán Peninsula. Preparation of traditional cochinita involves marinating the meat in strongly acidic citrus juice, seasoning it with annatto seed which imparts a vivid burnt orange color, and roasting the meat while it is wrapped in banana leaf.
<br>
</p>好吃极了!
</p>
	
<h2> Chilaquiles </h2>  
 <center> <img src="images/chilaquiles.jpg" height =300, width=500 >     </img> </center>
      <p>   Typically, corn tortillas cut in quarters and lightly fried are the basis of the dish. Green or red salsa is poured over the crisp tortilla triangles. Pulled chicken is sometimes added to the mix. It is commonly garnished with crema, shredded queso fresco, raw onion rings and avocado slices. Chilaquiles can be served with refried beans, eggs (scrambled or fried), beef and guacamole as side dish.
<br>

</p>yummy yummy的!
</p>


<h2> Aguachile </h2>  
 <center> <img src="images/aguachile.jpg" height =300, width=500 >     </img> </center>
      <p>  Aguachile is a Mexican dish made of shrimp, submerged in liquid seasoned with chili peppers, lime juice, salt, cilantro, and slices of onion. Fresh vegetables such as cucumber are usually added.
<br>

</p>辣辣的!
</p>

</div>
	
<div class="signature"> <p>   Created by Salomon Ruiz Hernandez      </p>   </div>   

<div class="gif">

<img src="images/muertos2.gif" height =150, width=250 >     </img></div>   


<div class="gif2">

<img src="images/muertos2.gif" height =150, width=250 >     </img></div>   





</body>

Week 3: Two interesting websites (Leon and Nimrah)

By Salomon Ruiz

My grandmother’s lingo 

https://www.sbs.com.au/mygrandmotherslingo/

 

 

 

 

 

 

 

 

The objective of this website is to teach the user Marra, a dialect that is being lost in Australia, in order to raise awareness and try to preserve it. The most interesting thing I found about this website is the fact that you need your voice to continue with the story. You have to pronounce some words in this dialect to the microphone three times in order to keep listening to the story. Moreover, you have to pronounce the words correctly, otherwise they wont be counted, although there is an option to skip as well. There is interaction between the user and the medium and also participation from the user in the story, which is quite unique. The graphics are also really cool, mostly white and black, with some natural elements in color to make contrast. It would be nice to have different chapters or levels in order to learn more words in this dialect, because this is only a 10 minutes story. Something I noticed is that you have to finish the story in one time, as there is no button to keep your progress, so that would be a nice feature to add.  In general, not only the interface of this website is very interactive but also the purpose is truly engaging. Websites like this one could keep alive many dialects that are being forgotten.

Flight radar 24

https://www.flightradar24.com/

This website shows real-time flights around the world. It allows the user to see all the planes that are flying at the moment and we can see information such as the model of the plane, the flight number, the estimated time to arrival, the distance between the two cities, the altitude the speed and so on. We realize how many planes are moving constantly around the world which is quite impressive, but we can also see some territories where the air traffic is not that crazy. The interface is composed by an interactive map where we can click on the yellow planes to see the information about that flight, displayed on the left. We can move the map with the mouse just as in Google maps. There is also a search tool to look for a specific flight. This website made me reflect how anyone can track the flights movement on real time which is kind of strange and maybe not too safe.

 

 

 

 

 

 

 

 

Week 3: Photoshop assignment (Leon and Nimrah)

By Salomon Ruiz

For this assignment I used three different photos and combined them to have a Barbie in a cat walk. First, I tried using the regular quick selection tool but it was selecting more than what I wanted so I tried using the Magnetic Lasso to select with more precision the shape of Barbie. I used the function mask to hide the parts I didn’t want from my layers to appear on the background. I had some issues with the selection tool so I couldn’t select the whole shape of barbie the first time. I used the eraser, the eyedropper and the brush to fix these problems. I also changed some values in the exposure, the contrast, the saturation and the brightness. I used the dodge tool to lighten the face and the hair of Barbie. I also used the brush for the lips and the eyebrows. Here is my final result and also the three original images.

Week 3: Response to “Understanding Comics” chapters 1-4 , (Leon and Nimrah)

By Salomon Ruiz

Instructors: Leon and Nimrah

Response to “Understanding Comics” by Scott McCloud 

Nowadays comics seem to have been forgotten. More people prefer watching movies, television or surf the web. Moreover, most of us don’t know a lot about comics, we tend to think comics just talk about superheroes, that the content is just for entertainment and that only kids and geeks read them. However, comics offer some amazing characteristics that other mediums does not and Scott McCloud explains about it in this comic book. One of these characteristics is the reader’s ability to choose the order in which they want to read the different panels. This way, we can create different paths of the story. This reminds me the video we saw in class in which the reader had the freedom to create his own story in a virtual comic. Another interesting characteristic is the fact that comics allow us to commit closure, which means that we are free to imagine what happens during the gap existing between each panel.  As we can imagine a lot of things, therefore each reader can have a unique experience while reading the same comic. Also, comics represent the notion of both time and space. Films and comics are both based in sequences of images but the images of a film cannot share the same space as they are projected one after the other throughout time. Meanwhile, on comics we can have different times in one page, and we can go back to the past or jump to the future at any time, resulting in a more dynamic experience.

Continue reading

Week 2: Response to “As We May Think” and “Long Live the Web”, (Leon and Nimrah)

By Salomon Ruiz

Response to  “Long Live the Web” by Tim-Berners Lee 

Nowadays the web is one of the most important tools in our lives. We share a lot of content online but most of the time we do not think of how far our information can reach. We click and sing privacy agreements that we don’t read because they are too long or because we do not think how the data we share can be powerful. Tim-Berners Lee, the inventor of the web, raises the question in this text of how this tool is being threatened by different factors, making it lose its essence and how important is the correct use of this tool in our future.

He describes the web as a “public resource”, a powerful tool that give us the freedom to share data with others, to access to a diverse content. However, over the last years this freedom have been shortened by different actors like the government or the internet providers. The content that we share is more and more controlled and the privacy of our information has also been disrupted. A lot of the information we share through the web can be used in a negative way and Tim Berners Lee lists a few examples “A company that bought URI profiles of job applicants could use them to discriminate in hiring people with certain political views, for example. Life insurance companies could discriminate against people who have looked up cardiac symptoms on the Web. Predators could use the profiles to stalk individuals. We would all use the Web very differently if we knew that our clicks can be monitored and the data shared with third parties”so he brings the question of how easy is to manipulate the data we share on the web and so we should be more careful about what kind of information we share. Also we have to be skeptical about certain websites as we do not know for sure how these websites manipulate our information.

The author also highlights how easy is to post something on the web “All you have to do is use three simple, standard protocols: write a page in the HTML (hypertext markup language) format, name it with the URI naming convention, and serve it up on the Internet using HTTP (hypertext transfer protocol)” and one of the things we’ll learn in this class is precisely how to upload data on the web so we can seize this tool. That is something that I’am really excited about because then I won’t be just an spectator of the web content but I can also contribute to this source.

Of course the web has a lot of advantages but it depends on us how to make a good use of it. It is crucial that we “examine legal, cultural and technical options that will preserve privacy without stifling beneficial data-sharing capabilities” like separating the Internet from the web and asking our governments a law that protects the freedom of content we want to share but at the same time that protects our personal information.  We have to make the web great again.

Response to “As We May Think” by Vannevar Bush

The author exposes how important is to have a record of all the improvements and achievements of science in order to keep progressing. He describes some methods used back then to store the information of the research made by scientists “Today we make the record conventionally by writing and photography, followed by printing; but we also record on film, on wax disks, and on magnetic wires. Even if utterly new recording procedures do not appear, these present ones are certainly in the process of modification and extension” and he raises the problem of this storage of information. There is a lot of information repeated or that is irrelevant, therefore new methods of storage need to be executed in order to facilitate the access of the relevant information to the scientists and therefore they can use this information in the name of progress. He proposes a method called memex “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”. Nowadays we have the web, where we can find a lot scientists works and consult this information. However, as Tim-Berners Lee states in his article, most of the time the information found on the web is pretty much the same or sometimes scientist do not share their research publicly making it hard for other scientists to use this information that could be crucial to make a big discovery, like finding the cure for a mortal disease for example. Therefore scientists should collaborate and should make a good use of this storage tool that is the web or maybe they could create a new method that would be better to share their knowledge.

Link of website,

http://imanas.shanghai.nyu.edu/~srh450/week1/index.html

Week 1: Response to “The Machine Stops” by E.M. Forster and “The Garden of Forking Paths” by Jorge Luis Borges (Leon and Nimrah)

“The Machine Stops” by E.M. Forster

Since the beginning this text is very intriguing, we do not know exactly what is happening but we get some hints. As we read, we can guess little by little the scenario in which the story takes place: a post apocalyptical world where the remaining humans live in a kind of underground machine that they built, almost like a cave where they can protect. These humans are sedentary, they barely move and they just use technology to communicate and do all their tasks (even showering), instead of having interaction, real contact between them and this could be interpreted maybe as a metaphor of what we could  be our future. In our today’s world, we spend more and more time in front of a computer or using our smartphones instead of enjoying the real world or having real interactions. When Kuno asks his mother to go visit him, she can’t think of a good reason to go see him as they can talk through the machine:

“I want you to come and see me.” Vashti watched his face in the blue plate.

“But I can see you!” she exclaimed. “What more do you want?”

It seems even abnormal the behavior of the son, who wishes to talk face to face to her mother. This society depends on the machine and they even let the machine rule over them even if it is not a living being. This society even sees the machine as a kind of god, as something that deserves to be adored. They are devoted to the machine and they even use “the book” as a kind of bible. The next passage shows how dependent they are on this machine.

“The Machine,” they exclaimed, “feeds us and clothes us and houses us; through it we speak to one another, through it we see one another, in it we have our being. The Machine is the friend of ideas and the enemy of superstition: the Machine is omnipotent, eternal; blessed is the Machine.”

This passage made me think of how we can do a lot of the things described in the passage in our today’s world thanks to technology, thanks to machines. For example we can order food online (“The machine feed us”), we can do online shopping (“clothes us”), we can use social networks to communicate with others and even see them through video conferences (“through it we speak to one another, through it we see one another”). And this society also seems to have lost its own capability of reasoning as when the machine starts sinking into decadence, they decide to believe on the machine and they are pretty sure that the machine will resolve all the problems until they realize it is the end of the machine.

“The Garden of Forking Paths” by Jorge Luis Borges

The second text is also very intriguing at the beginning, you don’t really know what is happening. Then we know a man is being persecuted but he goes to a garden before he is caught. There he finds Tsui Pen’s Garden of the Forking Paths which we can interpret as a metaphor of the different paths we can follow in life. There are thousands of different things that can affect the way our lives turn. And maybe technology is one of the things that have the most impact in our lives nowadays

 

Lab – 10 review

By Salomon Ruiz Hernandez

Date: November 24 , 2017

Instructor: Sean Clute

Task:

In the past ten weeks you have learned the basics of electronics and the fundamentals of programming. Now it’s time to review your skills.

Meet first in Room 823 to sign up for one of the workshops:

  • Soldering and Better Circuit Design – Room 818
  • Serial Communication – Room 824
  • Object Oriented Programming – Room 823

Follow the instructions as described by the fellow and instructor in charge of your workshop. Document your work on the blog.

Workshop:

The workshop I decided to attend was the one about Serial Communication as I have always found a little bit hard to establish a complex communication between Arduino and Processing, especially when it comes to my projects. Plus, for the final project, I have to use Serial Communication so I thought this was the best workshop I could attend.

First we did an example of serial communication from Arduino to Processing and then the other way around, from Processing to Arduino. At the beginning we also learned more about what serial communication means so I will try to explain more a little bit on this post. There is a serial communication when we transfer data one bit at a time, one right after the other between, in this case, Arduino and Processing. A bit is a unit to measure data. Another unit is the byte, which is equal to 8 bits. In order to establish this communication between Arduino and Processing we need to use a specific library in processing called  “Serial”.  The communication can be issued from Processing to Arduino or the other way.

For the example of serial communication from Arduino to Processing we used a potentiometer and a push button, then we create an animation that we controled with the potentiometer and then we could change the background by pressing the push button. For the example of serial communication from Processing to Arduino, we used the RGB LED and then on processing we created three rectangles, each one corresponding to the Red, Blue and Green colors. So if we selected the red color on Processing, then the LED will turn on red and the same for the other colors. Then we also added a function to control the intensity of the light. Here is a video of what we did during this workshop:

Reflection:

Thanks to this workshop I understood more how to establish a serial communication between Arduino and Processing and how this serial communication works. This is going to be really helpful for my final projects and for any other projects I want to do in the future using these two programs

 

Lab 8- Drawing Machines

By Salomon Ruiz Hernandez

Date: November 10, 2017

Instructor: Sean Clute

Task:

We will be creating drawing machines by using an H-bridge to control stepper motors attached to mechanical arms. Individually assemble the circuit using the SN75440NE IC and the pre-installed Arduino Stepper Library to control one stepper motor.

Materials:

  • 1 42STH33-0404AC stepper motor
  • 1 SN75440NE IC chip
  • 1 power jack
  • 12 V power supply
  • 1 potentiometer from your kit
  • 1 Arduino and USB cable from your kit
  • Laser-cut mechanisms
  • Pen that fits the laser-cut mechanism
  • Jumper cables; Arduino UNO; Breadboard

Part 1

For this part, first we built the circuit according to the schematic provided on the IMA website.

I had to be very careful when placing all the components on the breadboard as there were too many cables and also the order mattered a lot because of the ic chip. After building the circuit and checking that everything was good I tried the stepper_oneRevolution example on Arduino to check if the motor was working properly by getting it make one revolution.

It did work, so what I did next was to create the drawing machine by assembling all the laser cut pieces. Here an example

Part 2 

For this step, we had to add a potentiometer to the circuit in order to control the drawing machine with them. So I added this element and then I tried running the code “MotorKnob” to make this machine work. I changed the number of steps on this sample code to 200 as the motor we were using had this number of steps. Then I used the function map() to match the values of the potentiometer to the movement of the motor. Here an example of controlling the drawing machine with the potentiometer

Part 3

The next step to do was to create a code in processing in order to control the machine with data from processing. These are the codes I used in Arduino and Processing

import processing.serial.*;

Serial myPort;

void setup() {
 size(500, 500);
 background(0);

printArray(Serial.list());
 // this prints out the list of all available serial ports on your computer.
 
 myPort = new Serial(this, Serial.list()[ 6 ], 9600);
}



void draw() {
 // to send a value to the Arduino
 if (mousePressed) {
 myPort.write('H');
 } else {
 myPort.write('L');
 }
}

int valueFromProcessing;
const int stepsPerRevolution = 200;
#include <Stepper.h>

// change this to the number of steps on your motor
#define STEPS 200

// create an instance of the stepper class, specifying
// the number of steps of the motor and the pins it’s
// attached to
Stepper stepper(STEPS, 8, 9, 10, 11);

// the previous reading from the analog input
int previous = 0;

void setup() {
// set the speed of the motor to 30 RPMs
stepper.setSpeed(30);
Serial.begin(9600);
}

void loop() {
//int val = analogRead(0);
//map(val, 0, 1023, 0, 200);

if (valueFromProcessing == ‘H’) {
// get the sensor value
stepper.step(stepsPerRevolution);
}else{
stepper.step(-stepsPerRevolution);
}

// remember the previous value of the sensor
//previous = val;

}

Part 4

Because I spent a lot of time working on the processing code to send data to Arduino in order to make the drawing machine move, I did not have the time to combine the work of my partner with mine in order to create a complete drawing machine. Therefore we could not finish this part

Conclusion

This recitation was very challenging as there was a lot to do and the time was limited. Also it was not easy to make the drawing machine work. At the end I did not have time to combine my work with that of my partner in order to create a drawing machine with two arms. However I got the chance to practice the serial communication between Arduino and Processing. First we just used Arduino to make the drawing machine work ,  but then we sent information from Processing to Arduino in order to make the drawing machine work. In conclusion, this was a very interesting and one of the most difficult thing we have done in this class.

 

 

Final Project

By Salomon Ruiz Hernandez

Instructor: Sean Clute

Date: December 14 , 2017

FINAL PROJECT

Idea:

 

For my final project I originally had the idea of creating an installation to scare people, using some NYU Shanghai professor’s animations. However, after I started working on this project I changed my mind. I decided to create a videogame that most of the NYUSH students would laugh at, so I got inspired by a class everyone has to take: GPS. Here is the storyline of my game.

For this game I used Professor Corpis as the main character, a clicker as the object he has to collect, and some images related to gentrification as the background. I decided to use squared images to make the game more satirical. Also, I decided to set the goal as a million so the game never stops, just like gentrification. Here are the icons I used:

 

 

 

 

 

 

 

 

For the controller of this game, I decided to use an ultrasonic sensor as I wanted a controller you don’t have to touch and also because I had never used this sensor before so I wanted to try using it. In order to move Corpis up, you had to be further to the sensor and to move it down, closer. The circuit was easy as I only connected the sensor to the breadboard. I was just careful of connecting the Trig and the Echo in the right pin when coding in Arduino, otherwise the sensor wouldn’t work properly. Here is the schematic I used:

The code

First of all I used a random function to display one of the images of the background randomly in order to make the game look crazy and dense. I also use the function random for the clickers. I also added a score so every time the image of professor Corpis touches the center of the clicker images, then a point would be added to the score. I used the function “text” to display the score. Also I made the image of professor Corpis move according to the data collected from Arduino. Here are some screenshots of my Arduino and Processing codes

Here is an example of my final project working:

Conclusion:

I learned a lot during my final project. First of all, I experimented using a sensor I had never used before. Although this sensor was not the ideal controller for this game as it was not very precise, this sensor can be implemented in other interesting ways. For example, this could detect big objects at a certain distance in order to activate something else, like an alarm or a video. Moreover I learned how to use different functions in processing that I had never used before. I learned how to make images move thanks to different functions. I would have liked to include another element to establish a serial communication between Arduino and Processing, such as a buzzer to give sound to my game. Another thing I would have liked to use on this project, is the library of sound to give sound to my game or the video library to maybe start the game with an introduction video. I also could have used the camera of the computer so the main character could have the face of the player. In general, it was a project where I learned a lot and also where I conveyed the knowledge  I have of both Arduino and Processing