<commit_before><div id='target'>
	<div class="row">
		<div class = "col-md-12">
			<center>
				<image src="img/projects/media/cm.png" width="100%">
			</center>
		</div>
	</div>
	
    <div class = "container">
	<div class="row">
		<div class = "col-md-12">
			<h2>Computational Media</h2>
			<p> These are multiple projects and explorations to combine &quot;Art, Design and Technology&quot;. For a designer, giving form to abstract creations is mystical. There is always a learning curve while exploring new techniques or tools but the end-product is always worth those sleep-less frustrated nights when the code crashed or just refused to work! Enjoy!</p>
		</div>
	</div>
	
	<div class="row">
	
		<div class = "col-md-12">
		  <h3>Photo-Mosaics</h3>             
		  <p> Photo-Mosaics are images computationally created from a large corpus of images. Here, each pixel of input image is replaced by an image with the closest resemblance to the pixel. In essence, each pixel of the input image is replaced by another corpus image forming a mosaic.

		  </p>
	    </div>
        
		<div class="clearfix"></div>
         
        <div class = "col-md-12">
				<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
					
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
					<div class="item active">
                    
                   
                    <img src="img/projects/media/1.png" alt="...">
					  <div class="carousel-caption">
						...
					  </div>
                      </div>
                      
                      <div class="item">
                      <img src="img/projects/media/3.png" alt="...">
					  <div class="carousel-caption">
						...
					  </div>
                      </div>
                    
                    <div class="item">
					  <img src="img/projects/media/2.png" alt="...">
					  <div class="carousel-caption">
						...
					  </div>
					</div>
					            
                   
                     
                    
					</div>

					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
	  </div>

		        
        
  
        
		
		
		
		


     
      
	<div class = "col-xs-12 col-md-12">
	<br>	
		<h3>Flutter: Twitter Poetry</h3>
			
			<div class = "col-xs-6">
		
				<p>Flutter is an interactive game simulation which computationally generates text aka “Flutter: Fluent-Utter” based on the “emotional score” of the player.<br />
					The player collect tweets pulled from Twitter having keywords:<br />
					- I hate to...<br />
					- I love to...<br />
					- I believe in...<br />
					- I fear... <br />
					The tweets are collected from randomly generated tweet pool containing equal number of tweets of each kind. The player gets 45 seconds to collect the tweets. The tweets collected undergo the computational transformation based on “Markov-Chain” and “Flutter” is generated. Player can generate multiple flutters with the tweets earned.</p>
			</div>
	
			<div class = "col-xs-12 col-md-6">
				<iframe src="//www.slideshare.net/slideshow/embed_code/key/24vvxvhcpzHdJL" width="640" height="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 
			</div>
	
	</div>
  
      <div class = "col-xs-12 ">
				<div class="videoWrapper">
					<center><iframe src="https://player.vimeo.com/video/141231089" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/141231089">Flutter</a> from <a href="https://vimeo.com/user18209723"><NAME></a> on <a href="https://vimeo.com">Vimeo</a>.</p></center>
				</div>
	  </div> 

<div class = "clearfix"> </div>	  
			
        
		

		
            
      <div class = "col-xs-12 col-md-12"> 
	  <br>
				<h3>Kung-Fu Panda: Sonified!</h3>
				<p>This was an exploration in Computational music. Movie barcode (each frame of the movie depicted as a line) of the movie Kung Fu Panda was taken, processed and mapped to different sounds to generate a sonfied musical of the movie. The mapping was based on the progression of the movie and its plot.</p>
	  </div>
	  <div class = "col-xs-12 col-md-6">
				<iframe src="//www.slideshare.net/slideshow/embed_code/key/sVjVLXecLXrNPH" width="640" height="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 
	  </div>
	  <div class = "clearfix"> </div>	 
		
		<div class = "col-xs-12 col-md-6">
		  
			
		<iframe width="100%" height="320" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/182152272&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
		</div>
		<div class = "clearfix"> </div>	 
		
	
        
			<div class = "col-xs-12 col-md-12">
			<br>			
				<h3>Interactive Scenes - using Kinect </h3>
				<p>The installation tries to capture the movements of the user and translate those movements into a pre-designed character on the screen. The installation uses Kinect for detecting user movements and translating the motion data using Processing.</p>
			<br>
			
			</div>
			<div class = "col-xs-12 col-md-6">
			
			<iframe src="//www.slideshare.net/slideshow/embed_code/key/aRU1fUoByY55Un" width="640" height="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 
			
			</div>
			
			<div class = "clearfix"> </div>	 
			<div class = "col-xs-12 col-md-6">
			
			<iframe src="https://player.vimeo.com/video/141230898" width="640" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/141230898">Interactive Installation</a> from <a href="https://vimeo.com/user18209723"><NAME></a> on <a href="https://vimeo.com">Vimeo</a>.</p>
			
			</div>
			
			<div class = "clearfix"> </div>	 
			
           <!--  <div class="clearfix"></div> -->
            
            
                    
          
                   		
		<div class = "col-xs-12 col-md-12"> 
			<h3>Simply Complicated - A game!</h3><commit_msg>Correcting few things<commit_after><div id='target'>
	<div class="row">
		<div class = "col-md-12">
			<center>
				<image src="img/projects/media/cm.png" width="100%">
			</center>
		</div>
	</div>
	
    <div class = "container">
	<div class="row">
		<div class = "col-md-12">
			<h2>Computational Media</h2>
			<p> These are multiple projects and explorations to combine &quot;Art, Design and Technology&quot;. For a designer, giving form to abstract creations is mystical. There is always a learning curve while exploring new techniques or tools but the end-product is always worth those sleep-less frustrated nights when the code crashed or just refused to work! Enjoy!</p>
		</div>
	</div>
	
	<div class="row">
	
		<div class = "col-md-12">
		  <h3>Photo-Mosaics</h3>             
		  <p> Photo-Mosaics are images computationally created from a large corpus of images. Here, each pixel of input image is replaced by an image with the closest resemblance to the pixel. In essence, each pixel of the input image is replaced by another corpus image forming a mosaic.

		  </p>
	    </div>
        
		<div class="clearfix"></div>
         
        <div class = "col-md-12">
				<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
					
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
					<div class="item active">
                    
                   
                    <img src="img/projects/media/1.png" alt="...">
					  <div class="carousel-caption">
						...
					  </div>
                      </div>
                      
                      <div class="item">
                      <img src="img/projects/media/3.png" alt="...">
					  <div class="carousel-caption">
						...
					  </div>
                      </div>
                    
                    <div class="item">
					  <img src="img/projects/media/2.png" alt="...">
					  <div class="carousel-caption">
						...
					  </div>
					</div>
					            
                   
                     
                    
					</div>

					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
	  </div>

		        
        
  
        
		
		
		
		<hr>


     
      
	<div class = "col-xs-12 col-md-12">
	<br>	
		<h3>Flutter: Twitter Poetry</h3>
			
			<div class = "col-xs-6">
		
				<p>Flutter is an interactive game simulation which computationally generates text aka “Flutter: Fluent-Utter” based on the “emotional score” of the player.<br />
					The player collect tweets pulled from Twitter having keywords:<br />
					- I hate to...<br />
					- I love to...<br />
					- I believe in...<br />
					- I fear... <br />
					The tweets are collected from randomly generated tweet pool containing equal number of tweets of each kind. The player gets 45 seconds to collect the tweets. The tweets collected undergo the computational transformation based on “Markov-Chain” and “Flutter” is generated. Player can generate multiple flutters with the tweets earned.</p>
			</div>
	
			<div class = "col-xs-12 col-md-6">
				<iframe src="//www.slideshare.net/slideshow/embed_code/key/24vvxvhcpzHdJL" width="640" height="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 
			</div>
	
	</div>
  
      <div class = "col-xs-12 ">
				<div class="videoWrapper">
					<center><iframe src="https://player.vimeo.com/video/141231089" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/141231089">Flutter</a> from <a href="https://vimeo.com/user18209723"><NAME></a> on <a href="https://vimeo.com">Vimeo</a>.</p></center>
				</div>
	  </div> 

<div class = "clearfix"> </div>	  
			
        
		
<hr>
		
            
      <div class = "col-xs-12 col-md-12"> 
	  <br>
				<h3>Kung-Fu Panda: Sonified!</h3>
				<p>This was an exploration in Computational music. Movie barcode (each frame of the movie depicted as a line) of the movie <NAME> was taken, processed and mapped to different sounds to generate a sonfied musical of the movie. The mapping was based on the progression of the movie and its plot.</p>
	  </div>
	  <div class = "col-xs-12 col-md-6">
				<iframe src="//www.slideshare.net/slideshow/embed_code/key/sVjVLXecLXrNPH" width="640" height="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 
	  </div>	 
		
		<div class = "col-xs-12 col-md-6">
		  
			
		<iframe width="100%" height="320" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/182152272&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
		</div>
		<div class = "clearfix"> </div>	 
		
	<hr>
        
			<div class = "col-xs-12 col-md-12">
			<br>			
				<h3>Interactive Scenes - using Kinect </h3>
				<p>The installation tries to capture the movements of the user and translate those movements into a pre-designed character on the screen. The installation uses Kinect for detecting user movements and translating the motion data using Processing.</p>
			<br>
			
			</div>
			<div class = "col-xs-12 col-md-6">
			
			<iframe src="//www.slideshare.net/slideshow/embed_code/key/aRU1fUoByY55Un" width="640" height="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 
			
			</div>
			 
			<div class = "col-xs-12 col-md-6">
			
			<iframe src="https://player.vimeo.com/video/141230898" width="640" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/141230898">Interactive Installation</a> from <a href="https://vimeo.com/user18209723"><NAME></a> on <a href="https://vimeo.com">Vimeo</a>.</p>
			
			</div>
			
			<div class = "clearfix"> </div>	 
			
           <!--  <div class="clearfix"></div> -->
            
            
                    <hr>
          
                   		
		<div class = "col-xs-12 col-md-12"> 
			<h3>Simply Complicated - A game!</h3>
{'fraction_non_alphanumeric': 0.1523862684900921, 'fraction_numerical': 0.028328216578286353, 'mean_word_length': 2.6012562814070352, 'pattern_counts': {'":': 0, '<': 328, '<?xml version=': 0, '>': 328, 'https://': 18, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1096964', 'n_tokens_mistral': 5584, 'n_tokens_neox': 4546, 'n_words': 1175}