<?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>Sam PL &#187; Graphics</title>
	<atom:link href="http://www.sampl.us/blog/category/graphic/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sampl.us/blog</link>
	<description>+ HCI + WEB + DIY + ETC</description>
	<lastBuildDate>Thu, 30 Sep 2010 06:57:07 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>KINETIX</title>
		<link>http://www.sampl.us/blog/328/kinetix/</link>
		<comments>http://www.sampl.us/blog/328/kinetix/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 03:39:30 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://www.sampl.us/blog/?p=328</guid>
		<description><![CDATA[
KINETIX is a colorful, fast-paced casual game that uses only a webcam for input.  A computer vision algorithm detects motion and alternatively rewards and punishes players for moving.  Originally conceptualized as a children&#8217;s toy to encourage physical activity, the game&#8217;s simplicity allows it to be be played by anyone, either alone, competitively, or collaboratively&#8211;with any [...]]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="540" height="405" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=10078653&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="540" height="405" src="http://vimeo.com/moogaloop.swf?clip_id=10078653&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>KINETIX is a colorful, fast-paced casual game that uses only a webcam for input.  A computer vision algorithm detects motion and alternatively rewards and punishes players for moving.  Originally conceptualized as a children&#8217;s toy to encourage physical activity, the game&#8217;s simplicity allows it to be be played by anyone, either alone, competitively, or collaboratively&#8211;with any number of players.</p>
<p>This version was built in <a href="http://processing.org/">Processing</a>, with help from the <a href="http://ubaa.net/shared/processing/opencv/">OpenCV library</a>, <a href="http://createdigitalmotion.com/2009/02/processing-tutorials-getting-started-with-video-processing-via-opencv/">Andy Best&#8217;s introduction</a> to the same, <a href="http://www.last.fm/music/The+Very+Best">The Very Best</a> (no relation), and <a href="http://www.blambot.com/font_whoopass.shtml">WhoopAss</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/328/kinetix/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>The LION 90.7fm Online</title>
		<link>http://www.sampl.us/blog/139/website-of-the-lion-90-7fm/</link>
		<comments>http://www.sampl.us/blog/139/website-of-the-lion-90-7fm/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 05:23:31 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.sampl.us/blog/?p=139</guid>
		<description><![CDATA[
I created the site of the The LION 90.7fm, the Penn State student radio station, taking the site off of a Wordpress backend that was too simple for the needs of such a large organization and moving to a customized Drupal CMS installation.  The new site provides one place for intra-station communication, playlist posting, and public [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-226" title="the lion" src="http://www.sampl.us/blog/wp-content/uploads/2009/08/entrance1.jpg" alt="the lion" width="500" height="218" /></p>
<p>I created the <a href="http://thelion.fm/">site of the The LION 90.7fm</a>, the Penn State student radio station, taking the site off of a <a href="http://wordpress.org/">Wordpress</a> backend that was too simple for the needs of such a large organization and moving to a customized <a href="http://drupal.org/">Drupal</a> CMS installation.  The new site provides one place for intra-station communication, playlist posting, and public and private events managing, along with separate blogs for every radio program and some <a href="http://www.sampl.us/blog/5/radio-embeddable-player-interface/">nifty new embeddable flash players</a>.</p>
<p><strong>UPDATE (11/30/09)</strong>: <a href="www.thelion.fm">The site</a> has since undergone a visual overhaul, but the original Drupal setup is still in place.</p>
<p><em>Skills: Drupal, PHP, HTML, CSS, Javascript, Photoshop</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/139/website-of-the-lion-90-7fm/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Audacity theme</title>
		<link>http://www.sampl.us/blog/97/audacity-theme/</link>
		<comments>http://www.sampl.us/blog/97/audacity-theme/#comments</comments>
		<pubDate>Mon, 10 Nov 2008 09:09:32 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Interface]]></category>

		<guid isPermaLink="false">http://www.sampiercelolla.com/blog/?p=97</guid>
		<description><![CDATA[Audacity is a great, simple, open-source audio editing software utility.  The interface needs a little work, though&#8211;everything is functional, it just looks a little stale.
Audacity&#8217;s 1.3.3 beta release included preliminary support for skinning, which allowed users to modify the interface graphics.  I created a partial theme with a significant icon update and submitted it to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://audacity.sourceforge.net/" target="_blank">Audacity</a> is a great, simple, open-source audio editing software utility.  The interface needs a little work, though&#8211;everything is functional, it just looks a little stale.</p>
<p>Audacity&#8217;s <a href="http://sourceforge.net/project/showfiles.php?group_id=6235&amp;package_id=50145&amp;release_id=509344" target="_blank">1.3.3 beta release</a> included preliminary support for skinning, which allowed users to modify the interface graphics.  I created a partial theme with a significant icon update and <a href="http://audacityteam.org/forum/viewtopic.php?f=21&amp;t=657&amp;start=30#p28255" target="_blank">submitted it to the Audacity development forums</a>.</p>
<p>The theme uses modified parts of the free png icon set <a href="http://www.famfamfam.com/lab/icons/silk/" target="_blank">Silk</a> at <a href="http://www.famfamfam.com/" target="_blank">famfamfam</a>.</p>
<p><span id="more-97"></span></p>
<p>Audacity with new theme elements:</p>
<p><a href="http://www.sampiercelolla.com/blog/wp-content/uploads/2008/11/new2.png"><img class="size-full wp-image-98" title="Audacity new" src="http://www.sampiercelolla.com/blog/wp-content/uploads/2008/11/new2.png" alt="Audacity interface with my new theme" width="500" height="425" /></a></p>
<p>&#8230;and the original version:</p>
<p><a href="http://www.sampiercelolla.com/blog/wp-content/uploads/2008/11/old2.png"><img class="alignnone size-full wp-image-99" title="Original Audacity interface" src="http://www.sampiercelolla.com/blog/wp-content/uploads/2008/11/old2.png" alt="" width="500" height="425" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/97/audacity-theme/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>wConnect Facebook Application</title>
		<link>http://www.sampl.us/blog/65/wconnect-facebook-application/</link>
		<comments>http://www.sampl.us/blog/65/wconnect-facebook-application/#comments</comments>
		<pubDate>Mon, 01 Sep 2008 23:19:28 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.sampiercelolla.com/blog/?p=65</guid>
		<description><![CDATA[During the summer of 2008 I worked with in the Computer Supported Collaboration and Learning Lab at PSU&#8217;s School of IST.  My work focused on developing a facebook application for wConnect, a social alliance of women in information technology headed by Mary Beth Rosson, using PHP and the Facebook API.
The project required careful handling of [...]]]></description>
			<content:encoded><![CDATA[<p>During the summer of 2008 I worked with in the <a href="http://cscl.ist.psu.edu/" target="_blank">Computer Supported Collaboration and Learning Lab</a> at <a href="http://www.psu.edu/" target="_blank">PSU</a>&#8217;s <a href="http://ist.psu.edu/" target="_blank">School of IST</a>.  My work focused on developing a facebook application for <a href="http://wconnect.ist.psu.edu/" target="_blank">wConnect</a>, a social alliance of women in information technology headed by Mary Beth Rosson, using PHP and the <a href="http://developers.facebook.com/">Facebook API</a>.</p>
<p>The project required careful handling of abstract concepts of user identity.  Users sign into their wConnect account through their regular Facebook account, and merging these identities while managing issues of user privacy, and technical implementation was one of the most interesting parts of the project.</p>
<p>Developing satisfactory visual branding for the app was also a challenge.  wConnect needed a modern, clean look and feel that integrated into the Facebook frame nicely&#8211;but communicated ownership of the content we were responsible for.</p>
<p>Some screenshots after the jump&#8230;</p>
<p><em>Skills: PHP, SQL, Facebook API, HTML, CSS, Photoshop</em></p>
<p><span id="more-65"></span></p>
<p><a href="http://www.sampl.us/blog/wp-content/uploads/2009/08/wconnecthome.png"><img class="size-medium wp-image-126 " title="wConnect Home" src="http://www.sampl.us/blog/wp-content/uploads/2009/08/wconnecthome-300x267.png" alt="wConnect Home" width="300" height="267" /></a></p>
<p><a href="http://www.sampl.us/blog/wp-content/uploads/2009/08/wconnectprofile.png"><img class="size-medium wp-image-127 " title="wConnect Profile List" src="http://www.sampl.us/blog/wp-content/uploads/2009/08/wconnectprofile-300x279.png" alt="wConnect Profile List" width="300" height="279" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/65/wconnect-facebook-application/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dawson&#8217;s Chess</title>
		<link>http://www.sampl.us/blog/10/dawsons-chess/</link>
		<comments>http://www.sampl.us/blog/10/dawsons-chess/#comments</comments>
		<pubDate>Sun, 03 Feb 2008 04:27:27 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.sampiercelolla.com/blog/?p=10</guid>
		<description><![CDATA[I designed a new, dark visual interface for the ultra-simple Dawson&#8217;s Chess game.  See if you can beat the computer&#8211;it&#8217;s harder than it looks.

The code for the game is borrowed from Thomas Feguson, a professor of mathematics at UCLA.  You can view the original version at his website here.
Skills: HTML, CSS, Javascript, Photoshop
]]></description>
			<content:encoded><![CDATA[<p>I designed a <a href="http://www.sampl.us/dawsonschess">new, dark visual interface</a> for the ultra-simple Dawson&#8217;s Chess game.  See if you can beat the computer&#8211;it&#8217;s harder than it looks.</p>
<p><img class="aligncenter size-full wp-image-57" title="Dawson's Chess" src="http://www.sampl.us/blog/wp-content/uploads/2008/10/dawsonschessbubble.png" alt="Dawson's Chess" width="500" height="142" /><br />
The code for the game is borrowed from Thomas Feguson, a professor of mathematics at UCLA.  You can view the original version at his website <a href="http://www.math.ucla.edu/~tom/Games/dawson.html" target="_blank">here</a>.</p>
<p><em>Skills: HTML, CSS, Javascript, Photoshop</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/10/dawsons-chess/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Action Sports Chart Challenge</title>
		<link>http://www.sampl.us/blog/31/the-action-sports-chart-challenge/</link>
		<comments>http://www.sampl.us/blog/31/the-action-sports-chart-challenge/#comments</comments>
		<pubDate>Thu, 31 Jan 2008 23:36:24 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Vizualization]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.sampiercelolla.com/blog/?p=31</guid>
		<description><![CDATA[Using skis on a hill covered in snow is &#8217;skiing&#8217;, but riding a board on the same hill is &#8217;snowboarding&#8217;. Pulling that board behind a boat on a lake is &#8216;wakeboarding&#8217;, but if you switch back to skis, you&#8217;re &#8216;waterskiing&#8217;. Interesting&#8230;
So as an information visualization exercise, I made a chart of every extreme sport I [...]]]></description>
			<content:encoded><![CDATA[<p>Using skis on a hill covered in snow is &#8217;skiing&#8217;, but riding a board on the same hill is &#8217;snowboarding&#8217;. Pulling that board behind a boat on a lake is &#8216;wakeboarding&#8217;, but if you switch back to skis, you&#8217;re &#8216;waterskiing&#8217;. Interesting&#8230;</p>
<p>So as an information visualization exercise, I made a chart of every extreme sport I know.  It&#8217;s organized on one axis by &#8220;vehicle&#8221; (board, bike, etc) and on the other by &#8220;venue&#8221; (snow-covered mountain, lake, breaking waves&#8230;)</p>
<p>Please comment if you know of sports I missed (see disclaimer under the chart) or, more importantly, if you SEE A BLANK GRID AND MAKE UP A NEW SPORT.</p>
<h1 style="text-align: center;padding:1em; background:#000; "><a href="http://www.sampl.us/blog/wp-content/uploads/2010/01/sports.html"  style="color:#fff; width:100%; font-size:1em;">View the Chart</a></h1>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/31/the-action-sports-chart-challenge/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Radio Embeddable Player Interface</title>
		<link>http://www.sampl.us/blog/5/radio-embeddable-player-interface/</link>
		<comments>http://www.sampl.us/blog/5/radio-embeddable-player-interface/#comments</comments>
		<pubDate>Thu, 31 Jan 2008 21:16:27 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.sampiercelolla.com/blog/?p=5</guid>
		<description><![CDATA[I made some graphics for an embeddable flash player for The LION 90.7fm.  See them action (or embed them!) on the LION&#8217;s website here.

]]></description>
			<content:encoded><![CDATA[<p>I made some graphics for an embeddable flash player for <a href="http://thelion.fm/">The LION 90.7fm</a>.  See them action (or embed them!) on the LION&#8217;s website <a href="http://www.thelion.fm/listen" target="_blank">here</a>.</p>
<p style="text-align: center;"><a title="Streaming radio widgets by sampiercelolla, on Flickr" href="http://www.flickr.com/photos/19841135@N00/2432604337/"><img class="aligncenter" src="http://farm3.static.flickr.com/2143/2432604337_d60c47c526_o.png" alt="Streaming radio widgets" width="406" height="370" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/5/radio-embeddable-player-interface/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>iPhone Medical App</title>
		<link>http://www.sampl.us/blog/44/iphone-medical-app/</link>
		<comments>http://www.sampl.us/blog/44/iphone-medical-app/#comments</comments>
		<pubDate>Thu, 29 Nov 2007 22:29:23 +0000</pubDate>
		<dc:creator>Sam PL</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Interface]]></category>

		<guid isPermaLink="false">http://www.sampiercelolla.com/blog/?p=44</guid>
		<description><![CDATA[I designed a few mockups for a medical iPhone application proposal for a Human-Computer Interaction course.  The application would provide doctors and nurses with up-to-the-minute patient information and alerts, replacing their current phones and pagers.

Our team described three separate &#8220;mini-apps&#8221; that would function together: a patient status look-up feature (above), a drug interaction database, and [...]]]></description>
			<content:encoded><![CDATA[<p>I designed a few mockups for a medical iPhone application proposal for a Human-Computer Interaction course.  The application would provide doctors and nurses with up-to-the-minute patient information and alerts, replacing their current phones and pagers.</p>
<p style="text-align: center;"><a title="MedAlert mockup: Heart rate by sampiercelolla, on Flickr" href="http://www.flickr.com/photos/19841135@N00/2421951363/"><img class="aligncenter" src="http://farm3.static.flickr.com/2177/2421951363_a6180b7c57.jpg" alt="MedAlert mockup: Heart rate" width="500" height="500" /></a></p>
<p><span id="more-44"></span>Our team described three separate &#8220;mini-apps&#8221; that would function together: a patient status look-up feature (above), a drug interaction database, and an emergency paging system.  The application interface would allow for more features to be added depending on the practitioner&#8217;s specialty; for example, a surgery student could add an interactive Grey&#8217;s Anatomy.</p>
<p style="text-align: center;"><a title="MedAlert mockup: Patients by sampiercelolla, on Flickr" href="http://www.flickr.com/photos/19841135@N00/2421951273/"><br />
<img class="aligncenter" src="http://farm3.static.flickr.com/2408/2421951273_216fa8700a.jpg" alt="MedAlert mockup: Patients" width="500" height="500" /></a></p>
<p style="text-align: center;"><a title="MedAlert mockup: Alert by sampiercelolla, on Flickr" href="http://www.flickr.com/photos/19841135@N00/2421951437/"><img class="aligncenter" src="http://farm4.static.flickr.com/3047/2421951437_ff101973f0.jpg" alt="MedAlert mockup: Alert" width="500" height="500" /></a></p>
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://www.sampl.us/blog/44/iphone-medical-app/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

