<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>lithium flowers bloom &#187; Perlin Noise</title>
	<atom:link href="http://leejayxia.com/blog/tag/perlin-noise/feed/" rel="self" type="application/rss+xml" />
	<link>http://leejayxia.com/blog</link>
	<description>the weblog</description>
	<lastBuildDate>Sat, 15 May 2010 20:52:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Perlin Noise Flow Field and Smoky Ribbon</title>
		<link>http://leejayxia.com/blog/perlin-noise-flow-field-and-smoky-ribbon/</link>
		<comments>http://leejayxia.com/blog/perlin-noise-flow-field-and-smoky-ribbon/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 22:11:26 +0000</pubDate>
		<dc:creator>L.J</dc:creator>
				<category><![CDATA[The Nature of Code]]></category>
		<category><![CDATA[ITP]]></category>
		<category><![CDATA[midterm]]></category>
		<category><![CDATA[nature of code]]></category>
		<category><![CDATA[Perlin Noise]]></category>
		<category><![CDATA[simulation]]></category>
		<category><![CDATA[wallpaper]]></category>

		<guid isPermaLink="false">http://leejayxia.com/blog/?p=486</guid>
		<description><![CDATA[My take into the midterm for Nature of Code started from aimless playing with some old codes I made a couple of weeks ago. Not having a concrete idea of a &#8220;project&#8221; proposal, I decided to apply a Perlin Noise flow field to the fluid pluses I made last week, so that I need not [...]]]></description>
			<content:encoded><![CDATA[<p>My take into the midterm for Nature of Code started from aimless playing with some old codes I made <a href="http://leejayxia.com/blog/playing-with-fluid-simulation/">a couple of weeks ago</a>. Not having a concrete idea of a &#8220;project&#8221; proposal, I decided to apply a Perlin Noise flow field to the fluid pluses I made last week, so that I need not necessarily introduce the mouse move to play with the field. The flow field reinitiates itself every 120 frames so that the particles keep moving and not getting too boring to look at.</p>
<p><object width="640" height="427"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3449357&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3449357&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="427"></embed></object></p>
<p>Applet on OpenProcessing: <a href="http://openprocessing.org/visuals/?visualID=1094">http://openprocessing.org/visuals/?visualID=1094</a></p>
<p>After constructing the flow field, I came across Anthony Mattox&#8217;s <a href="http://www.anthonymattox.com/perlin-flow-ribbons">Perlin Flow Ribbons</a> which is amazingly attractive to me.Two levels of Perlin Noise field might be a good solution to make the field evolve more fluidly but I just didn&#8217;t do it&#8230; I just left the particles there and let them trace overtime. The results are &#8230; fairly good I shall say. Some of them do look pretty good, others are going bizarre due to lack of control. However the subtle motions overtime are charming to watch. I just sat there for hours staring at the screen (making screenshots) &#8230;</p>
<p><object width="640" height="480"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3449785&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3449785&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="480"></embed></object></p>
<p>Applet on OpenProcessing: <a href="http://openprocessing.org/visuals/?visualID=1095">http://openprocessing.org/visuals/?visualID=1095</a></p>
<p>More Pic:<br />
<a href="http://leejayxia.com/blog/wp-content/uploads/2009/03/00001007.png" rel="lightbox[486]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/03/00001007-300x168.png" alt="00001007" title="00001007" width="300" height="168" class="alignnone size-medium wp-image-492" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/03/00002960.png" rel="lightbox[486]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/03/00002960-300x168.png" alt="00002960" title="00002960" width="300" height="168" class="alignnone size-medium wp-image-495" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/03/00002222.png" rel="lightbox[486]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/03/00002222-300x187.png" alt="00002222" title="00002222" width="300" height="187" class="alignnone size-medium wp-image-494" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/03/00003649.png" rel="lightbox[486]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/03/00003649-300x187.png" alt="00003649" title="00003649" width="300" height="187" class="alignnone size-medium wp-image-496" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/03/00005406.png" rel="lightbox[486]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/03/00005406-300x187.png" alt="00005406" title="00005406" width="300" height="187" class="alignnone size-medium wp-image-497" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/03/fluid.png" rel="lightbox[486]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/03/fluid-300x187.png" alt="fluid" title="fluid" width="300" height="187" class="alignnone size-medium wp-image-498" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://leejayxia.com/blog/perlin-noise-flow-field-and-smoky-ribbon/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>The walker</title>
		<link>http://leejayxia.com/blog/the-walker/</link>
		<comments>http://leejayxia.com/blog/the-walker/#comments</comments>
		<pubDate>Sun, 22 Feb 2009 07:27:31 +0000</pubDate>
		<dc:creator>L.J</dc:creator>
				<category><![CDATA[The Nature of Code]]></category>
		<category><![CDATA[Fly]]></category>
		<category><![CDATA[ITP]]></category>
		<category><![CDATA[nature of code]]></category>
		<category><![CDATA[Perlin Noise]]></category>
		<category><![CDATA[Processing]]></category>
		<category><![CDATA[Spring 2009]]></category>
		<category><![CDATA[Week1]]></category>

		<guid isPermaLink="false">http://leejayxia.com/blog/?p=459</guid>
		<description><![CDATA[I played with noise and probability to see what I can get out of the &#8220;walker&#8221; example for The Nature of Code class. 4 parameters were set up to control my walker group and somehow I&#8217;m getting this flies around food / bugs around lamp effect. Parameters: Acceleration of the particle Attraction from the anchor [...]]]></description>
			<content:encoded><![CDATA[<p>I played with noise and probability to see what I can get out of the &#8220;walker&#8221; example for <em>The Nature of Code</em> class. 4 parameters were set up to control my walker group and somehow I&#8217;m getting this flies around food / bugs around lamp effect.</p>
<p><a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/walker.jpg" rel="lightbox[459]"><img class="alignnone size-medium wp-image-461" title="walker" src="http://leejayxia.com/blog/wp-content/uploads/2009/02/walker-300x223.jpg" alt="walker" width="300" height="223" /></a></p>
<p>Parameters:</p>
<ul>
<li>Acceleration of the particle</li>
<li>Attraction from the anchor point to the particle</li>
<li>Noise level of the particles</li>
<li>Number of particles</li>
</ul>
<p>Feel free to play with the applet <a href="http://leejayxia.com/processing/noc_walker/">here</a>. You can reset the anchor/attraction point by clicking mouse in the applet window.</p>
<p><a href="http://leejayxia.com/processing/noc_walker/">http://leejayxia.com/processing/noc_walker/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://leejayxia.com/blog/the-walker/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Face Blind (Revisited)</title>
		<link>http://leejayxia.com/blog/face-blind-revisited/</link>
		<comments>http://leejayxia.com/blog/face-blind-revisited/#comments</comments>
		<pubDate>Sun, 22 Feb 2009 01:00:04 +0000</pubDate>
		<dc:creator>L.J</dc:creator>
				<category><![CDATA[Visualizing the Five Senses]]></category>
		<category><![CDATA[face-blindness]]></category>
		<category><![CDATA[Fall 2008]]></category>
		<category><![CDATA[final]]></category>
		<category><![CDATA[ITP]]></category>
		<category><![CDATA[Perlin Noise]]></category>
		<category><![CDATA[Processing]]></category>
		<category><![CDATA[prosopagnosia]]></category>

		<guid isPermaLink="false">http://leejayxia.com/blog/?p=421</guid>
		<description><![CDATA[Face Blind was my final project for Visualizing the Five Senses last semester. However for some reason I never had a chance to document it, and as a kicking off of my &#8220;blog catching up&#8221; week I would like to start with this project. Just as a quick recap of the project, Face Blind is [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://leejayxia.com/blog/face-blind/" target="_blank">Face Blind</a> was my final project for <em>Visualizing the Five Senses</em> last semester. However for some reason I never had a chance to document it, and as a kicking off of my &#8220;blog catching up&#8221; week I would like to start with this project.</p>
<p>Just as a quick recap of the project, <em>Face Blind</em> is a visualization of prosopagnosia symptom and calls for the awareness of this perception disorder. On Wikipedia&#8217;s <a href="http://en.wikipedia.org/wiki/Prosopagnosia" target="_blank">prosopagnosia page</a>, the brief intro is given as follows,</p>
<blockquote><p>Prosopagnosia (sometimes known as face blindness) is a disorder of face perception where the ability to recognize faces is impaired, while the ability to recognize other objects may be relatively intact. The term usually refers to a condition following acute brain damage, but recent evidence suggests that a congenital form of the disorder may exist. The specific brain area usually associated with prosopagnosia is the fusiform gyrus.[1]</p>
<p>Few successful therapies have so far been developed for affected people, although individuals often learn to use <strong>&#8216;piecemeal&#8217; or &#8216;feature by feature&#8217; recognition strategies. This may involve secondary clues such as clothing, hair color, body shape, and voice.</strong> Because the face seems to function as an important identifying feature in memory, it can also be difficult for people with this condition to keep track of information about people, and socialize normally with others.</p></blockquote>
<p>The difficulty of face-blind people could hardly be explained and understood by people around because we are taking face recognition so for granted and seldom think of how faces are specifically optimized in our memory system. <a href="http://prosopagnosia.com/main/stones/index.asp" target="_blank">The analogy of the stones</a> were used by Cecilia Burman on her website on prosopagnosia and I found it a relatively effective approach of making this explanation short. I decided to create a set of cloud masks for every student in the ITP community to illustrate this idea in a similar yet different way.</p>
<p>The clouds are generated by several different features on peoples faces and are overlaying on their faces to obscure them The optimized mechanism for face-recognition in our brain would not be activated since most of the facial features are turned off by the noises (clouds). However since the clouds are generated from an abstraction of facial features so ideally I could still create a unique cloud mask for each person. In this way, we could probably experience the difficulty of face blindness and, however, could also experience the &#8220;piecemeal&#8221; or &#8220;feature by feature&#8221; recognition strategy by observing the shape, texture and other features of the clouds.</p>
<p><strong>Cloud Generation</strong></p>
<p>My first difficulty in the process is creating the cloud texture programmatically. I first thought of using stock photos of clouds textures and trimming them for my use. After some research I decided to create my clouds by Perlin Noise, which seems to be a classic and efficient way of generating the texture. Since I&#8217;m not only looking for the randomness of the clouds, I would also like to gain control of the generated result through a set of configuration parameters (which would be the output of my face recognition/analysis tool).</p>
<p>The first iteration and the later revision of the cloud generator looked like this. The clouds used in the final visualization were composition of two layers of cloud highlights and another two layers of shadows, plus a adjusting filter to make sure the generated cloud cover at least 50% of the face area.</p>
<p><a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/cloud_generator.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/cloud_generator-300x207.jpg" alt="cloud_generator" title="cloud_generator" width="300" height="207" class="alignnone size-medium wp-image-427" /></a> <a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/cloud_generator_2.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/cloud_generator_2-300x221.jpg" alt="cloud_generator_2" title="cloud_generator_2" width="300" height="221" class="alignnone size-medium wp-image-429" /></a></p>
<p><strong>Facial Recognition</strong></p>
<p>Since I&#8217;m not building a sophisticated robot with computer vision that watch your door or build you an iron armor, my goal for the facial recognition program was to just extract certain features from the face, which in this case includes aspect ratio of the face shape, positions of the eyes, nose and mouth, and whether the person is wearing glasses or not.</p>
<p>In fact it worked pretty well. Click on the thumbnails below to view larger pictures. </p>
<ul>
<li>Rectangle on the top left indicates aspect radio of face shape;</li>
<li>Red stripe &#8211; position of eyes, brown of wearing glasses;</li>
<li>Lower stripes &#8211; position of nose/mouth, not really accurate from time to time;</li>
</ul>
<p><a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/e59bbee78987-8.png" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/e59bbee78987-8-300x289.png" alt="feature recognition" title="feature recognition" width="300" height="289" class="alignnone size-medium wp-image-431" /></a> <a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/e59bbee78987-2.png" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/e59bbee78987-2-300x294.png" alt="e59bbee78987-2" title="e59bbee78987-2" width="300" height="294" class="alignnone size-medium wp-image-432" /></a></p>
<p><strong>Composition</strong></p>
<p>After the preparation of the previous two steps, I tried to develop a showcase for the visualization. The performance problem emerged as I was putting everything together. The realtime rendering of the cloud for each individual took about 3-4 seconds in average and created an unacceptable latency in the viewing experience. Due to the short of time, I pre-rendered all graphics beforehand. I cannot argue this is the best way to present the final product. It might be better to cache the whole cloud space to optimize calculating time than pre-rendering. Anyway this is what I presented at the final.</p>
<p>See if you could recognize anyone. Click on the thumbnail for higher resolution. All headshot images courtesy of <a href="http://www.faludi.com/socialgenius/" target="_blank">Social Genius</a>. If you&#8217;re interested in getting your &#8220;cloud&#8221; just drop me a message at leejayxia [at] gmail.com.</p>
<p><a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-1.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-1-300x219.jpg" alt="faceblind4static-1" title="faceblind4static-1" width="300" height="219" class="alignnone size-medium wp-image-435" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-2.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-2-300x219.jpg" alt="faceblind4static-2" title="faceblind4static-2" width="300" height="219" class="alignnone size-medium wp-image-436" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-3.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-3-300x219.jpg" alt="faceblind4static-3" title="faceblind4static-3" width="300" height="219" class="alignnone size-medium wp-image-437" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-4.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-4-300x219.jpg" alt="faceblind4static-4" title="faceblind4static-4" width="300" height="219" class="alignnone size-medium wp-image-438" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-5.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-5-300x219.jpg" alt="faceblind4static-5" title="faceblind4static-5" width="300" height="219" class="alignnone size-medium wp-image-439" /></a>&nbsp;<a href="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-6.jpg" rel="lightbox[421]"><img src="http://leejayxia.com/blog/wp-content/uploads/2009/02/faceblind4static-6-300x219.jpg" alt="faceblind4static-6" title="faceblind4static-6" width="300" height="219" class="alignnone size-medium wp-image-440" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://leejayxia.com/blog/face-blind-revisited/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

