Documentation to Internet Art Project (Krom)

Partner: Turab Ali Zia

A description of the project:

This project is a bear exploring the city and the rural place. Then he finds when he goes back to nature, he can feel the greatest pleasure and he belongs to the nature.

This is a project most focus on p5. At first, we want to compare the nature and the urban life. Because we found many people feel stressful in the city. They want to travel to the forests, beaches, mountains and some other natural place to lease his stress and relax. We want to use comic to express our idea but it looks quite similar to the comic project. We also want to make some wonderful visual effects to reflect on the project. Our main character is a bear who work in the city. There are four parts which are offices, city roads, sky, and forests. This is a transition from most pressure to relax mood. We select some symbols in these different places to represent the place. So, when the user clicks, there will different things pop out at different speeds. For example, we make a shape of the coffee cup to represent the office and select birds and trees to represent the forests. These things are all made by p5. And the background is black because we do not want the uses to be obvious to know where they are and can image the things will happen. What else, the speed of different kinds of stuff is different. the things move faster in the city than the things in nature which can show the pressure in the city. We also express the bear’s mood by changing the degree of bear’s mouse. When the user scrolls the mouse to the city, the bear’s face will become sad and turns happy when the user scrolls to nature. There are also some sounds with the different shapes. It can express better.

A discussion of my process and how the project works:

When we reload the page, there is an alert popping up and can instruct the user how to play with it. We make the canvas first and compute the size of the different parts. And I made 5 different bears and they have different emissions. The biggest problem is to coding part. I need to make the bear always in the middle of the screen no matter how I scroll the mouse. My partner had done the shape of the things with p5, and I put the song with the click and the scrolling part and the bear. What I thought first was to make the picture in the CSS. And then let the position absolutely. But the image was above the canvas. After the help of IMA fellows, I learn the “window.pageXOffset” which can reread the position of the webpage. And when the user scrolls to the different part, the bear’s face will change. It is showed by setting up the position of mouseX and mouseY. And the sound added to the mouse pressed function.

We want the things that we created by p5 can have boundaries, so when the things touch the boundary, they will go back at the same speed. By setting the boundary position with the shapes’ size and setting the returning speed, the things can stay in a fixed area without floating to every where.

 

A post-mortem on whether or not the project met your goals:

This project is almost the same as our goal. But we think if the images can change after user click the different area different times, it will look better. And the other one is we wanted to do is to make a time-line in the bottom of the screen. It will help the user to finger out how to play with the project.

Art Project (Final) Documentation

Project Title: The Throwback
Partner: Irina Wirjan

Process

For our project, Irina came up with the idea of creating a “time capsule” like-website that would be based on the idea of Harry Potter. In theory, the idea seemed like fun and simple when it came to implementing, but once the Javascript came into play we realized just how in over our heads we ended up being. Like mentioned before, the project went from being a simple nostalgic website of pop culture in the past 17 years to a more interactive website that quizzed you on your 2000s knowledge. Thus, this project ended up being one with a lot of different folders/files/images/videos/

In order to tackle the situation, Irina and I split up specific responsibilities for one another. Irina dealt with a lot of the JS/CSS that came with creating the dialogue function (something I am forever impressed with cause I didn’t understand), as well as the aesthetics of the webpage. I took on the responsibility of creating a function that would allow the user to input a year and have specific divs pop out from the web whenever the enter key was pressed.I also figured out implemented the popout window function that was used for when the icons are clicked. Furthermore, I was also in charge of the movie/music editing that went out throughout all 5 years. Irina and I compiled the movies and music we wanted for each year and then I put them together into the videos. We each balanced out the work evenly, which I think was fair.

During the course of this project I finally understood what creating a loop, and stringing together variables actually meant when implemented. Though I am a little rusty, I think I have the hang out the concepts now. In terms of the website, aesthetics we wanted to create a more simple retro look that referenced back to the Myspace Page aesthetics (the blinking blue lights background). We used more simple icons for out buttons to further give it the retro feel. I personally think that the look that Irina ended up giving the website was really cute and befitting the “time capsule” aesthetics we originally had in mind.

Reflection

One of the biggest takeaways from this project is understanding just how much coding/JS goes into making even the littlest of things occur on a website. From our initial idea of implementing a “time capsule” mentality to the evolution of a nostalgic throwback website testing you on your 2000s knowledge, all of the coding done was quite more than I imagined I would be doing. However, I did enjoy the process of creating the website and making the content that goes into the website/ the quizzes.

One thing I will admit though is that I may not have been the most efficient partner this time around. I underestimated some of the parts of this project that were my responsibility, thus leading to a stressful situation when we uploaded our project to Google Drive the day it was due and the processing time took up to 1.5 hours. My time management skills were not the best, and if we had had more time (where not all of my other classes had presentations/tests due) I would have been more involved that I was with the project. Irina took a lot of the initiative in this project, which I am grateful for.

One major improvement I would make this the project is probably making the videos/quizzes less homogenous and more interactive for the user. I think this project has the potential to become a fun trivia game given a larger time frame to expand the project.

Week 14: Visual Discomfort- A Web Based Art Project (Cici&Alvin)

Project: Visual Discomfort— A Web Art Gallery for the Disgusting, the Discomforting, and the Disturbing

Group: Maya Williams & Kalkidan Fikadu

Date: 13 December 2017

Goal: Create a web-based art project. At the minimum, it should be a standalone website that is built utilizing HTML, CSS, and JavaScript. Incorporating video and audio content as well is encouraged.

DescriptionVisual Discomfort is a web art gallery for the disgusting, the discomforting, and the disturbing. The point of this gallery is to highlight the unique relationship humans have with the abject or more simply the disgusting, the discomforting, and the disturbing. While these things may turn our stomachs and push us to look away, they also have a somehow enticing and tantalizing quality. This quality is why most of these videos have millions of views. This quality is why many of you peek through your fingers while claiming the videos are too gross to watch.

Philosopher and psychoanalyst Julia Kristeva develops the idea of the abject in her work the Powers of Horror. She discusses it as the reaction when one experiences the breakdown in the distinction between one’s self and the other.

The short horror film featured on the opening page Kitchen Sink (1989) perfectly captures this notion in its depiction of a “woman find[ing] something quaint in her kitchen sink and feel[ing] strangely captivated towards it.”

You can read Kristeva’s full work by following this link:http://users.clas.ufl.edu/burt/touchyfeelingsmaliciousobjects/Kristevapowersofhorrorabjection.pdf and watch the full film Kitchen Sink here:https://www.youtube.com/watch?v=tpxQXXmZtHY&t=117s 

Inspiration: The two works linked above were a big inspiration for the direction this work took. I read Kristeva’s work on the abject my freshman year in conjunction with this film and both those things really stick with me, which is why they’re highlighted in the gallery. The growing culture of ASMR (Autonomous sensory meridian response) also inspired me to create a work that is somewhat counter to this movement based on triggering soothing sensations from visuals and sounds. However, I think it’s the Cure for Wellness promotional ads that really set me on the path of creating this gallery. When I first attempted the water meditation I was met with this very real sense of unease created simply by the tone and words in the video. I think this experience is particularly powerful in its ability to use a very common relaxation medium to inspire distress.

Discussion of Process: 

    

 

After solidifying the initial idea– that Visual Discomfort would center around the disgusting, the discomforting, and the disturbing– the first step was to identify elements and experiences that could contribute to these feelings, such as bugs and pests, bodily excretions, horror scenes, and injuries. We gathered a diverse array of content that could fit into these categories. This meant many hours of pimple popping videos. (We made a conscious decision to stay away from violence inflicted on real people and animal abuse in our selection process.) Some of the videos were also edited down to capture their most disturbing moments.

While gathering the video we also started creating the web page. We wanted to keep the design simple as the point of the art gallery is for the focus to be on the art, in this case, all our gross videos. However, we did include an animated title to help establish the mood.

There is a main gallery, three sub-galleries, and a discussion page. In the main gallery, all the videos are auto-playing simultaneously creating an overwhelming symphony of sounds. The visuals only appear when you hover over the labels linking the main gallery to the sub-gallery. By clicking on any of these labels you enter a sub-gallery where all the videos can be individually played. Audio fitting the theme of the sub-gallery auto-plays to maintain the ambiance. We also featured information on the number of views and popularity of the featured content, providing evidence of odd relationship people have with the abject discussed in the website’s description.

In order to increase interactivity, we added a discussion page where the user can see their likeness corrupted by another face, and leave comments about their experience. We chose this specific method because we considered it symbolic of the breakdown between oneself and another.

Learning from past projects we designed the pages so that one can always return to the main gallery, without using the browsers back button. When you hover over the discussion button the gallery description appears. It helps to contextualize the gallery, and also introduces viewers to two of the inspirational materials that led to this work.

Reflection: I’m quite proud of this project in its presentation of what I think is an interesting social phenomenon and social scientific concept. I think it’s also strong in its visual cohesiveness and general mood setting, and illustrative to me as to my progress with coding (which was essentially zero at the start of this semester). I think in terms of next steps I would have liked to make the page more dynamic and some of the video elements more hidden. For example, rather than having all the videos appear when you hover over them it would be interesting to have several moving figures–like spiders and rats–on the screen and then when you catch and click one of these figures it launches several videos or a section of videos. It also would have been nice to link back to more of the original sources, so the gallery serves as a hub for connecting to more online content.

<!DOCTYPE html>
<html>
<head>
	<title>Visual Discomfort</title>
	<link rel="stylesheet" type="text/css" href="style/open.css">
</head>
<body style="background-color: black;">



	<div class= "center" id="title">
		<div class="w3-btn" id="vd_box" onmouseover="change('white')" onmouseleave="changeBack('black')" onclick="load()">
			<div id="squareDiv"></div>
			<h1>
				Visual <br> Discomfort
			</h1>
		</div>

		<div id="frame">
			<img src="img/rectFrame.gif" width="500" height="300">
			<video controls loop id="sink" autoplay>
				<source src="video/kitchensink.mp4">
			</video>
			<p id="text">Click to Enter Gallery</p>
		</div>


	</div>

	<script>
		function change(color){
			document.getElementById("vd_box").style.opacity = "0";
			document.getElementById("text").style.display = "inline";
			document.body.style.background = color;
		}

		function changeBack(color){
			document.getElementById("vd_box").style.opacity = "1";
			document.body.style.background = color;
		}
	
		function load(){
			window.location.href="load.html";}
	</script>
</body>
</html>

<!-- add sound, animation with the button -->
<!DOCTYPE html>
<html>
<head>
	<title>Visual Discomfort</title>
	<link rel="stylesheet" type="text/css" href="style/load.css">
</head>
<body style="background-color: black;">
	<br>
	<h1 class="center" id="loading">
	Loading...
	</h1>

	<script>	

	function enterGallery(){
			window.location.href="gallery.html";
		}


		setTimeout(enterGallery, 5000);
	</script>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Visual Discomfort</title>
	<link rel="stylesheet" type="text/css" href="style/gallery.css">
</head>
<body style="background-color: black;">
	<div class="center">

		<div id="w3-bar2">
			<button class="w3-bar-item w3-button" id="discussing" style="width: 40%" onmouseover="discussion()" onmouseleave="undo4()" onclick="cussion()">CLICK HERE TO VIEW THE DISCUSSION PAGE</button>
		</div>

		<h1 id="vd" onclick="main()">Visual Discomfort</h1>

		<div id="w3-bar">
			<button class="w3-bar-item w3-button" id="vd_info" style="width: 20%">A WEB ART GALLERY FOR</button>
			<button class="w3-bar-item w3-button" id="disgusting" style="width: 15%" onmouseover="disgust()" onmouseleave="undo1()" onclick="gust()">THE DISGUSTING,</button>
			<button class="w3-bar-item w3-button" id="discomforting" style="width: 15%" onmouseover="discomfort()" onmouseleave="undo2()" onclick="comfort()">THE DISCOMFORTING, </button>
			<button class="w3-bar-item w3-button" id="disturbing" style="width: 15%" onmouseover="disturb()" onmouseleave="undo3()"onclick="turb()">AND THE DISTURBING </button>
		</div> <br>


<!-- click to play the individual videos on loop
except pimple pops should all play together, and the two boogers should play together -->	
<!--figure out how to position the videos, use % not px-->

<p id="discussion"> The point of this gallery is to highlight the unique relationship humans have with the abject or more simply the disgusting, the discomforting, and the disturbing. While these things may turn our stomachs and push us to look away, they also have a somehow enticing and tantalizing quality. This quality is why most of these videos have millions of views. This quality is why many  of you peek through your fingers while claiming the videos are to gross to watch.<br> 
	<br>

Philosopher and psychoanalyst Julia Kristeva develops the idea of the abject in her work the Powers of Horror. She discusses it as the reaction when one experiences the breakdown in the distinction between one’s self and the other. <br>

<br>
The short horror film featured on the opening page Kitchen Sink (1989) perfectly captures this notion in its depiction of a <a href="http://www.imdb.com/title/tt0097673/"> “woman find[ing] something quaint in her kitchen sink and feel[ing] strangely captivated towards it.”</a> <br>
<br>

You can read Kristeva’s full work by following this link: <a href="http://users.clas.ufl.edu/burt/touchyfeelingsmaliciousobjects/Kristevapowersofhorrorabjection.pdf"> http://users.clas.ufl.edu/burt/touchyfeelingsmaliciousobjects/Kristevapowersofhorrorabjection.pdf </a> and watch the full film Kitchen Sink here: <a href="https://www.youtube.com/watch?v=tpxQXXmZtHY&t=117s"> https://www.youtube.com/watch?v=tpxQXXmZtHY&t=117s </a> <br>
</p>
<!-- disgusting videos-->
    <div id = "disgust">
	<video   loop onclick = "playpause()"  id="vomit" autoplay>
		<source src="video/vomit.mp4">
	</video>

	<video onclick = "playpause()" loop id="spiders" autoplay>
		<source src="video/spiders.mp4">
	</video>

	<video onclick = "playpause()" loop id="pop1" autoplay>
		<source src="video/pimplepop1.mp4">
			Your browser does not support video.
	</video>


	<video onclick = "playpause()" loop id="pop2" autoplay>
		<source src="video/pimplepop2.mp4">
			Your browser does not support video.
	</video>

	<video onclick = "playpause()" loop  id="pop3" autoplay>
		<source src="video/pimplepop3.mp4">
			Your browser does not support video.
	</video>

	<video onclick = "playpause()" loop id="pop4" autoplay>
		<source src="video/pimplepop4.mp4">
	</video>

	<video onclick = "playpause()" loop id="booger1" autoplay>
		<source src="video/booger1.mp4">
	</video>

	<video onclick = "playpause()" loop id="booger2" autoplay>
		<source src="video/booger2.mp4">
	</video>
	</div>

<!-- discomforting videos-->
    <div id="discomfort">

	<video onclick = "playpause()" loop id="water" autoplay>
		<source src="video/water.mp4">
	</video>

	<video onclick = "playpause()" loop id="earth" autoplay>
		<source src="video/earth.mp4">
	</video>

	<video onclick = "playpause()" loop id="air" autoplay>
		<source src="video/air.mp4">
	</video>

	<video onclick = "playpause()" loop id="teeth" autoplay>
		<source src="video/teeth.mp4">
	</video>

	<video onclick = "playpause()" loop id="rats" autoplay>
		<source src="video/rats.mp4">
	</video>

	</div>

<!-- disturbing videos-->
    <div id = "disturb">
	<video onclick = "playpause()" loop id="DA" autoplay>
		<source src="video/die_antwoord.mp4">
	</video>

	<video onclick = "playpause()" loop id="snake" autoplay>
		<source src="video/snake_in_mouth.mp4">
	</video>

	<video onclick = "playpause()" loop id="nail" autoplay>
		<source src="video/fingernail.mp4">
	</video>

	<video onclick = "playpause()" loop id="rabbits" autoplay>
		<source src="video/rabbits.mp4">
	</video>
	</div>

	<script>
		/* mouse over events*/
		/* opacity ov vides in that section changes to 0.5*/
		function disgust(){
			document.getElementById("disgusting").style.color ="white";
			document.getElementById("disgust").style.display ="block";
			document.getElementById("discomfort").style.display ="none";
			document.getElementById("disturb").style.display ="none";
			document.getElementById("discussion").style.display ="none";
		}

		function discomfort(){
			document.getElementById("discomforting").style.color ="white";
			document.getElementById("disgust").style.display="none";
			document.getElementById("discomfort").style.display ="block";
			document.getElementById("disturb").style.display ="none";
			document.getElementById("discussion").style.display ="none";


		}

		function disturb(){
			document.getElementById("disturbing").style.color ="white";
			document.getElementById("disgust").style.display="none";
			document.getElementById("discomfort").style.display ="none";
			document.getElementById("disturb").style.display ="block";
			document.getElementById("discussion").style.display ="none";
			
		}

		function discussion(){
			document.getElementById("discussing").style.color ="white";
			document.getElementById("disgust").style.display="none";
			document.getElementById("discomfort").style.display ="none";
			document.getElementById("disturb").style.display ="none";
			document.getElementById("discussion").style.display ="block";
		}


		/* mouse leave events*/
		/* opacity changes back to 0*/
		function undo1(){
			document.getElementById("disgusting").style.color ="black";
		}

		function undo2(){
			document.getElementById("discomforting").style.color ="black";
		}

		function undo3(){
			document.getElementById("disturbing").style.color ="black";
		}

		function undo4(){
			document.getElementById("discussing").style.color ="rgb(30,30,30)";
		}



		/* on click event */
		/* videos of that section are displayed and should be clicked*/
		function gust(){
			window.location.href="disgusting.html";
		}

		function comfort(){
			window.location.href="discomforting.html";
		}

		function turb(){
			window.location.href="disturbing.html";
		}

		function cussion(){
			window.location.href="discussion.html";
		}

		function main() {
			window.location.href="open.html";

		}
		function playpause() {
          if (videoPlayer.paused == false ){
             videoPlayer.pause();
                }
          else {
             videoPlayer.play();
            }
           }
	</script>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Visual Discomfort</title>
	<link rel="stylesheet" type="text/css" href="style/disgusting.css">
</head>
<body style="background-color: black;">
	<div class="center">
		<h1 id="vd" onclick="main()">Visual Discomfort</h1>

	  <div id= "main_disgust"> 
	      <p class="w3-bar-item w3-button" id="disgusting" style= "width: %"> THE DISGUSTING </p>
	</div>

	<div id = "disgust">
	<video  controls onclick = "playpause()" id="vomit">
		<source src="video/vomit.mp4">
	</video>

	<video controls onclick = "playpause()" id="spiders">
		<source src="video/spiders.mp4">
	</video>

	<video  controls onclick = "playpause()" id="pop1">
		<source src="video/pimplepop1.mp4">
			Your browser does not support video.
	</video>

	<video controls onclick = "playpause()" id="pop2">
		<source src="video/pimplepop2.mp4">
			Your browser does not support video.
	</video>

	<video controls onclick = "playpause()"  id="pop3">
		<source src="video/pimplepop3.mp4">
			Your browser does not support video.
	</video>

	<video controls onclick = "playpause()" id="pop4">
		<source src="video/pimplepop4.mp4">
	</video>


	<video controls onclick = "playpause()" id="booger1">
		<source src="video/booger1.mp4">
	</video>

	<video controls onclick = "playpause()" id="booger2">
		<source src="video/booger2.mp4">
	</video>
	</div>


	<p><br><br>Underwater Vomit was posted by Matt DWMC on 22 June 2017. Matt is a member of another channel called WheresMyChallenge where him and his friends engage in various internet challenges that are often painful, dangerous, and/or gross. WheresMyChallenge posts videos three times a week and has over 1 million subscribers. Matt alone has over 47K subscribers on his channel.<br><br>

	The video of a black widow spider fighting a. giant centipede fighting a scorpion fighting a giant house spider was published by BeanMeister22 on 26 Oct 2017. This 10 minute video has over 7 million views. <br><br>

	The pimple popping video is the most watched video on Dr. Sandra Lee’s (aka Dr. Pimple Popper) Youtube Channel. Dr. Lee is a board-certified dermatologist, skin cancer surgeon, and cosmetic surgeon. She has over 3 million subscribers on her channel, which aims to give viewers a “‘window into my world’ as a dermatologist.” This specific video of a black head extraction, posted 2015 July 9, has over 36 million views. <br><br>

	The first booger video was posted on 27 Aug 2016 on the channel Pimple Popped. It has over 1 million views. The other video was posted on 18 Feb 2017 on the channel Popping. It also has over 1 million views. If you search “booger removal” on Youtube there are nearly 16,000 results.
	<br><br>
</p>

	<audio  controls loop autoplay>
	<source src="audio/diarrhea.mp3" type="audio/mpeg">
	</audio>

	<script>
		function main() {
			window.location.href="gallery.html";
		}
	</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Visual Discomfort</title>
	<link rel="stylesheet" type="text/css" href="style/discomforting.css">
</head>
<body style="background-color: black;">
	<div class="center">
		<h1 id="vd" onclick="main()">Visual Discomfort</h1>

	  <div id= "main_discomfort"> 
	      <p class="w3-bar-item w3-button" id="discomfort" style= "width: %"> THE DISCOMFORTING </p>
	</div>

	

	<div id="discomfort">
	<video  controls onclick = "playpause()" id="water">
		<source src="video/water.mp4">
	</video>

	<video  controls onclick = "playpause()" id="earth">
		<source src="video/earth.mp4">
	</video>

	<video controls="" onclick = "playpause()" id="air">
		<source src="video/air.mp4">
	</video>

	<video  controls onclick = "playpause()" id="teeth">
		<source src="video/teeth.mp4">
	</video>

	<video controls onclick = "playpause()" id="rats">
		<source src="video/rats.mp4">
	</video>
	</div>

	<p><br><br>
		A Cure for Wellness is a 2016 psychological horror-thriller film directed by Gore Verbinski and written by Justin Haythe. It was released in the US on 17 Feb 2017 and grossed $26.6 million at the box office worldwide. These three meditation videos were part of the promotional videos advertising the film. <br><br>


Southern Nature Inc. posted Redneck tooth pull on 19 May 2017. This video has over 68,000 views despite being from a small channel that posts sporadically. <br><br>


This clip was taken from the Animal Planet TV show Infested!, which reenacts the true stories of people whose homes were infested by all sorts of animals. In this clip we see that “when mice run out of food in Streaky Bay, Australia, it leads to a mouse plague of Biblical proportions. The sea is the only place safe from the rising tide of rodents.” Posted 20 Jan 2011, the video has over 2 million views.<br><br>

		
	</p>

	<audio controls loop autoplay>
	<source src="audio/discomfort_song.wav" type="audio/mpeg">
	</audio>

	<script>
		function main() {
			window.location.href="gallery.html";
		}
	</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Visual Discomfort</title>
	<link rel="stylesheet" type="text/css" href="style/disturbing.css">
</head>
<body style="background-color: black;">
	<div class="center">
		<h1 id="vd" onclick="main()">Visual Discomfort</h1>

	  <div id= "main_disturb"> 
	      <p class="w3-bar-item w3-button" id="disturbing" style= "width: %"> THE DISTURBING </p>
		</div>

	<div>
	<video  controls onclick = "playpause()" id="DA">
		<source src="video/die_antwoord.mp4">
	</video>

	<video  controls onclick = "playpause()" id="snake">
		<source src="video/snake_in_mouth.mp4">
	</video>

	<video controls onclick = "playpause()" id="nail">
		<source src="video/fingernail.mp4">
	</video>

	<video  controls onclick = "playpause()" id="rabbits">
		<source src="video/rabbits.mp4">
	</video>
	</div>

	<p><br><br>
	Die Antwoord is a South African hip hop group formed in Cape Town in 2008. The group is made up of three members rappers Ninja and Yolandi Visser and producer God. Their image is based on the South African counterculture movement known as zef. “I Fink U Freeky” is a single from the first album released by the group’s independent label and helped bring them into the global spotlight. The music video was posted on 31 Jan 2012 and has over 107 million views.
	<br><br>

Jesse and Mike “are brothers who love comedy” so the created a comedy sketch Youtube Channel called JesseandMike. They started their channel in 2007, have posted over 350 videos, and have about 3.1 million subscribers.<br>

“Broken Fingernail” posted 23 July 2016 has over 24 million views, while “Snake in Mouth!” posted 16 April 2016 has over 114 million views.<br><br>

The last clip, from the horror anime series Blood-C (2011), was featured as #1 on WatchMojo.com’s list of “Top 10 Most Disturbing Anime Scenes of All Time.” The video list was posted 11 Feb 2017 and has close to 3 million views.<br><br>
</p>

	<audio  controls loop autoplay>
		<source src="audio/screaming.mp3" type="audio/mpeg">
	</audio>


	<script>
		function main() {
			window.location.href="gallery.html";
		}
	</script>

</body>
</html>



<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title> Discusion page </title>
  <link rel="stylesheet" href="tracking.js-master/examples/assets/demo.css">
  <script src="tracking.js-master/build/tracking-min.js"></script>
  <script src="tracking.js-master/build/data/face-min.js"></script>
  <script src="tracking.js-master/build/data/eye-min.js"></script>
  <script src="tracking.js-master/build/data/mouth-min.js"></script>
   <script src="tracking.js-master/node_modules/dat.gui/build/dat.gui.min.js"></script>
  <script src="tracking.js-master/examples/assets/stats.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style/discussion.css">
  <style>
  video, canvas {
    margin-left: 230px;
    margin-top: 120px;
    position: absolute;
  }
  </style>
</head>
<body style="background-image: url(img/light.gif)"  >
  	<div class="center">
	<h1>Discussion</h1>
	</div>

<h1 id="vd" onclick="main()">Visual Discomfort</h1>

  <div class="demo-frame">
    <div class="demo-container">
      <video id="video" width="320" height="240" preload autoplay loop muted></video>
      <canvas id="canvas" width="320" height="240"></canvas>
    </div>
    <div style="text-align: center">
    <button id= "button" onclick = "none()"> Try This </button>
    <button id= "button" onclick = "zombi()"> Get Scared </button>
    <button id= "button" onclick = "zombi2()"> Get Scared</button>
    <button id= "button" onclick = "zombi3()"> Get Scared </button>
    <style type = "text/css">
      .button {
      	background-color: black;
      	cursor:pointer;
      	text-align: center;
      	position: relative;
      	top:50px;
      	width: 100px;
      	height: 40px;
      	color:#ffffff;
      	border:none;
      	font-size:100%;
      }
      .button:focus {
      	border:2px solid aqua;
      }
      </style>
   </div>
  </div>
  <audio  autoplay  loop>
  <source src="audio/thunder.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>
 <br>
 <br>
  <h3 id = 'na'> Enter Name: </h3> <input id="name" type="text" name="name">
<br><h3 id = 'na'> Comment: </h3> <textarea id = "comments" name = "comments" rows="4" cols="30"> </textarea>
 <button onclick="results()" > Submit </button>
 <p id= "comment">Kalkidan: This is so creepy
 <br>
 Maya: Super Cool! </p>

  <script>
  var img = document.createElement("img");
  img.src = 'img/horns.png';
  function none() {
  	img.src = '';
  }
  function zombi() {
  	 img.src = 'img/white.png';
  }
  function zombi2() {
  	 img.src = 'img/zomb2.png';
  }
  function zombi3() {
  	img.src = 'img/zomb3.png';
  }
  function main() {
  	window.location.href="gallery.html";
  }
  function results() {
  	var name = document.getElementById('name').value;
  	var comment = document.getElementById('comments').value;
  	document.getElementById("comment").innerHTML += "<br>"+name + ":" + " "+ comment;
  }

    window.onload = function() {
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var tracker = new tracking.ObjectTracker('face');
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);
      tracking.track('#video', tracker, { camera: true });
      tracker.on('track', function(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        event.data.forEach(function(rect) {
          context.drawImage(img, rect.x, rect.y-70, rect.width+11, rect.height*1.9);
        });
      });
    };
  </script>




</body>

</html>

Final project: Visually Disturbed

Group members: Kalkidan Fikadu & Maya Williams

Date: Dec 13, 2017

Project title: Visually disturbed

in our final project, we created an interactive gallery for disturbing, discomforting, and disgusting videos that triggers a sense of discomfort or unpleasant reactions for the audience.  The web page has a web art gallery for videos and sounds that are divided according to the reaction they mostly trigger. It has 4 parts: The disgusting, discomforting, disturbing and a discussion.

we are inspired to do this project by the growth and popularity ASMR(Autonomous Sensory Meridian Response) in today’s society. And we want to create something that goes against the normal incentive for creating something. Our website inspires a sense of displeasure and discomfort.  At first, we were in doubt about our project being visited or if there will be anyone who wants to see something unpleasant. But to our surprise, the videos and visuals we collected online have around million and hundred thousand of views.

Discussion page:

The discussion page uses a facial tracker to create a scary or strange scenery for its viewer. The view.

Note: disregard the voice:)

There is also a comment section so the user can enter a comment and the comment will be displayed.

 

Internet Art Project (Cici & Alvin)

Project Title: Around the World in 80 Plates

Team: Mostafa & Tina

Link: http://10.208.8.141/~tx315/eating/intro.html

Description: Simple drop and collect game with a timer, themed around food, to help students de-stress during finals (aka procrastination).  There are three different countries, each with dishes from that country and represents some of that country’s culture through the food, character, and music.

Process: It was very easy working with Tina, as we had worked together before on the comic project. Getting together to discuss ideas is the first step to any project, and we decided to make a game to help calm students down, and maybe add some competition between students through the game. After getting the basic structure f the game on paper, I began coding and designing the game using basic shapes on a p5 canvas. At the same time, Tina was gathering resources such as characters, foods, backgrounds, and music. When we had gathered all the resources I began adding them to the game. After the images and music were added, we added a points system and a timer to make the game more competitive and increased the speed of the falling food as time passed to increase the difficulty.

Post Mortem: We are very satisfied with the end result of our project. One thing that we were not able to add was making the falling foods into gifs. There was a p5 library that called p5.gif.js but this library only worked on Chrome, while our game only works on Firefox.

Internet Art Project

Team Member

Sarah Tahir & Shuxuan Liu

Description

Our project is about the exploration of selfhood. What exactly defines what we are? Is it our likes and dislikes? Perhaps it is our memories? These things are always changing but does that mean our selfhood also changes? We hope that as our viewers interact with this page, it can also promote them to think about this question.

Process

The first thing that we did was to take photographs of people. We asked our friends to model for us and then we photoshoped these photos into Picasso style pictures. After the shooting, we also asked them questions like “What’s your favorite food?”, “What’s your favorite childhood memory?” etc.

 

After this, we started compiling this information. We gathered videos, audios and pictures based on their answers. Then, we started putting these things on to the website.

At first, we only had three people. We didn’t have a “learn more” button on the homepage and we didn’t have audios to explain what each popup window was. We added in all of this stuff after the test run.

 

How the Project Works

On the homepage, there are little dots that are string together by the mouse, indicating how different aspects of us interact with one another to build the core of us. Our project takes photos of different NYU Shanghai students and photoshops them into Picasso style photographs. By clicking different parts of their faces, you can see their likes, dislikes and memories etc.

 

Post-mortem

 

Internet Art Project “Christmas World Radio” by Kacper and Isabella (Krom)

Date: 13.12.2017

Professor: Krom

Student: Kacper Krasowiak

Partners: Isabella Malixi

Post: Internet Art Project “Christmas World Radio”

 

Christmas World Radio

 

Rationale

Coming up with an idea for this project was both challenging and rewarding. It is the Christmas time so my partner and I wanted to make a projected deeply embedded in the Christmas culture. Simultaneously, we wanted to explore the topic of cross-culture differences related to this special holiday. Later, we wanted to share our findings with the user. Hence, at the beginning, we wanted to make a map where users could click on selected countries and read about their Christmas customs and possibly listen to their Christmas song. However, we received a constructive feedback and realized we needed to add more to it, to make it less informative but artsier. Hence, came up with the idea of Christmas World Radio. It is an interactive map where users can slider over a map and listen to a Christmas song the selected countries. It resulted in two things: 1) the project became more artistic, it allowed users to dynamically compare Christmas songs from different regions and cultures and 2) the level of user interaction increased dramatically and became an active, interesting and thought-provoking activity rather than just passive clicking and reading the displayed information. Gaining the deeper understanding of art was the challenging part for me. Interestingly, I experienced a similar challenge in another IMA class, Unmanned Aerial Storytelling, that I am taking this semester. During that class I had to make a documentary and going beyond technical details, which was putting storytelling into the core of the movie, was the challenge for me. At the end, however, I put experiences, knowledge, and conclusions from both classes together and now I think I have a far better understanding of art. It is the rewarding part.

Design

As mentioned, our project is an interactive map where users can slide over the map and listen to a Christmas song from each time zone. After coming up with an idea for this project, Isabella and I had to think how to design it. We were searching on how we could divide the map of the world in order to make further user interaction easy and enjoyable and at the end decided to use the division for time zones. Later, we made a list of countries from each time zone and had to categorize them by culture, geographic location and of course state if people celebrate Christmas there. Upon completing the list, we moved to the part where we were searching for Christmas songs from the selected countries and found some very interesting ones, for instance from Sri Lanka or Pakistan. Shout-out for Bella for this! Later, we had to cut the songs so the final audio files contain only the most characteristic and interesting parts. Finally, we had to decide on the final form of the project in order to make it aesthetically pleasing, yet cohesive. In the core of our project was this sliding movement and music and we were searching for a way to link those two elements with some object in the real world. An old, vintage radio was a natural choice. Firstly, it was parallel to our core elements and second, it was meant to give users feeling they can hear the music from the whole world. It was even more powerful by the fact it was Christmas music and now we have the Christmas time. We went over dozens of photos of old radios and decided to primarily use warm colors, such as brown, gold and of course some Christmas ones, for instance, red. On the top of that, we also recorded a video that would be displayed before users could play with the map. The video is meant to look like a Skype call and imitates a conversation between two individuals living in two different locations but who miss each other because it is the Christmas song. The video was our way to make users understand the core values behind the project more and simultaneously become more immersed. We hoped those elements would make the user experience even better.

Coding

My primary responsibility in this project was coding the map page (Java, CSS, HTML). Since I had no to minimal experience with coding in Java, it was the most challenging aspect for me. Firstly, I had to figure out how to make an object follow the mouse and learn that I had to use p5 libraries in order to use “draw” function. Then, however, I wanted to limit the space where an image could be drawn. Hence, in “setup” function I used “createCanvsas” and ended up with the result presented in the video below.

At that point, the “drawn” image was the red ball. In order to make it out slider in “draw” function, I used “image” line where I specified the fill (a red photo, previously introduced as a variable and loaded in the “preload” function), the height and width. Also, since we needed the movement on the x-axis only, in the “image” line I also specified it should follow “mouseX”. Then it was the time to load the map as the background of the canvas and a for that I specified it in the “setup” function by introducing “current map” variable and in the “draw” function where I specified in “background” line that it needs to use “current map”. At this stage I had the following:

Finally, I started experimenting with what should happen in particular ranges on the x-axis. Firstly, I tried to change one background to another by using “if” function and “document.getElementById”. The problem, however, as I could not find a way to assign nor a class or id to the canvas drawn in java and not introduced in the HTML file. The solution to that was creating an array of all the available maps in “setup” function. Hence, if the mouse was in a particular range on the x-axis then “current maps” was changing to “map[e.g.18]” and since “current maps” was the previously introduced variable as “background” in the “draw” function it worked perfectly. The next step in the java code was making the sound work. Firstly, all the songs were introduced as variables and later loaded (“loadSound”) in “preload” function. Then, I had to specify that if song “isPlaying” then it should not be played again. It is because the songs were playing anytime I moved a mouse in the specified region and an unpleasant echo was the result of it. If the song was not playing and users move their mouse into the region then the song was being played in the “loop”. The last step was to determine the ranges for each country/time zone specifically and it was determined with the help of the function “text” which let me read the pixel position of mouseX.

In terms of styling, the biggest trouble was positioning the image of radio controls below the canvas and the solution to this was calling the canvas div as the “parent” in the “setup” function and later introducing that div in the HTML file above the radio image. Another trouble was making the page’s background fill the whole page and be reactive to the changes of the window size. For that, in CSS I applied “-webkit-background-size: cover”,”-moz-background-size: cover”, “-o-background-size: cover” and “background-size: cover;”.

Summary

It was a challenging project and it involved many sleepless nights and much more trails and errors that it might appear from the above description. In the end, however, I think it helped me develop my art understanding and coding abilities significantly.

Big thanks to the professor and all the IMA Fellows for the semester and their help!

Best,

Kacper

Week 14:Documentation of final project(Vasudevan)

Group member: Candy&Mary

The name of our project is: Design Your Own Dream Wedding. It is a website for users to design their own weddings with 5 main blocks. They are locations, themes, music, guests, and dresses.

Our idea comes from our common interests that me and Mary both like watching romantic TV shows. And we both think that wedding is one of the most important things for men and women. If people can design their own wedding, the experience they have must be unique and unforgettable.

We want our users to choose all the basic elements in a wedding by themselves. So we have 3 locations, 2 wedding themes, 2 kinds of wedding dresses, 2 kinds of background music and 2 scales of guests.

Here is one location:Bali

Here is one of the wedding theme we have:

How we do that:
1.We found some template websites on the internet in order to give us more inspiration firstly.
2. We made our decisions on what materials would we use, and what layouts we wanted to have. Snd then sketched drafts on our notebook to make sure we were clear about what the layouts will look like.
3. Collect wedding pictures from the internet and edit them by using premier and photoshop.
4. As for the locations, we want to add a video to our website page to help the users know more about the three locations. So we find many videos on Youtube, used few seconds in each video and then combined them together. We also added the filter to make all the video cuts look the same.


5. Choose three background music which can show the features of the locations better. And then edited the videos we made again because we wanted different scenes to come up with a different rhythm.
6.working on the HTML pages one by one.

Here is one of our coding:
7. Make our original audio. Because we wanted to make some audios instead of downloading from the internet. So I start to write 2 pieces of music(1 symphony and 1 modern music) and used GarageBand to make the music. Because I wanted to link the audio style with our project: wedding, so I recorded students from different countries saying “I love you” in their mather tone. Finally, I collected 7 different “I love you” and add them to the original music.

Here is a screenshot of our music editing process:


8. Making pictures in photoshop again. We have two wedding themes which are royal and vintage. But it’s hard to find the exact pictures on the internet, so we use photoshop to edit them together.

 

Post-mortem:
I think our work 90 % meets our expectations. We did well in designing website layouts, music and all pictures and videos.
But because of limited knowledge and thoughts, it’s hard for us to make every option(Theme/music etc.) user-friendly.

 

 

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.

Week 13: Documentation of Final Project (Vasudevan)

Partner: Candy

Link:

DESCRIPTION & PROCESS OF OUR PROJECT:

Our task was to produce a working, interactive website using HTML, CSS, Javascript, and other applications shown in class like P5.js. As a result of using the listed programs, my partners and I were able to produce a website.

For our project, we basically want to make an interactive website that will help you design your wedding and wedding reception. The website would consist of several categories such as the theme of the wedding, the type of music, the place the wedding reception will take place, the dress for the bride and the number of guests. These categories each provide two options from which the user can choose from. Additionally, in the location category, there is an option to watch a video of each place so the user can know more of that place. Similarly, in the music category, there is a button to listen to a short demo of how each option will sound like.

In the main page, the user has the option to “start designing” or look at descriptions of the options we offer for each category. For example, if the user clicks on “Location,” that will take them to another html that contains a small description of each of the places we offer.

Additonally, each option contains a “Read more” button that links to an article or website that relates to that option.

After the user finishes reading, there is a go back button that will take them back to the main page for them to start designing or pick another category to read its description.

When the user clicks “Start designing,” the will be redirected to another html page consisting of one category and its options.

The options are presented as a manual slideshow. The user can either click the arrows on the side or the dots at the bottom to go through the options.

If the user clicks on “watch video,” then a pop up will appear showing the video. This pop up will close automatically after the video ends.

Similarly, in the “music” category, if the user clicks “listen to audio” they will get to listen to a demo of how the option would sound like.

For the programming part, we used a lot of tutorials from W3 Schools. We used variables to manage to make the slide change to the next correspondent one. Once it finishes, it starts again.

For the dots, we used if statements so that they would change color depending on which slide is currently displaying.

To make the going back button, we used the onclick function and connected to the image of the arrow.

To play the videos and make them disappear, we made a function for each of the videos and added a setTimeout for the videos to close after a certain time. In our case is 45 seconds (the length of the video).

Finally, to make the audio play and stop, we used onclick play and added an if statement and tracking the current time so that if the audio is playing, then when the div is clicked again then the audio would pause.

IF THE PROJECT MET OUR GOALS:

Our final project is very different from what we had in mind in the beginning. In our original idea, we wanted much more options and for the website to be more inclusive. We wanted to add choosing suits and cakes. Additionally, we wanted the website to be more interactive and depending on the decisions the user makes have a different ending, but we couldn’t find a way to do it in time. We want to credit W3 Schools and Bootstrap for some of the functions and designs we used. Overall, I’m still satisfied with our project and how it came about. Through it, I feel that I took a lot of things that we learned in class and applyed them to our project. Even though it was not the project we expected, I still feel proud of it. If I had to make this project again, I would pay more attention to details of the design and take more time to find the exact function to track the users decisions to have a different outcome everytime.