<?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>Silveira Neto &#187; sphere</title>
	<atom:link href="http://silveiraneto.net/tag/sphere/feed/" rel="self" type="application/rss+xml" />
	<link>http://silveiraneto.net</link>
	<description>the world is a pixel</description>
	<lastBuildDate>Sun, 08 Jan 2012 05:17:57 +0000</lastBuildDate>
	<language>pt-br</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.5</generator>
		<item>
		<title>JavaFX, creating a sphere with shadow</title>
		<link>http://silveiraneto.net/2008/07/31/javafx-creating-a-sphere-with-shadow/</link>
		<comments>http://silveiraneto.net/2008/07/31/javafx-creating-a-sphere-with-shadow/#comments</comments>
		<pubDate>Thu, 31 Jul 2008 03:42:17 +0000</pubDate>
		<dc:creator>Silveira</dc:creator>
				<category><![CDATA[english]]></category>
		<category><![CDATA[Blur]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[Ellipse]]></category>
		<category><![CDATA[Gaussian Blur]]></category>
		<category><![CDATA[Gradient]]></category>
		<category><![CDATA[JavaFX]]></category>
		<category><![CDATA[Radial Gradient]]></category>
		<category><![CDATA[RIA]]></category>
		<category><![CDATA[Shadow]]></category>
		<category><![CDATA[sphere]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://silveiraneto.net/?p=1020</guid>
		<description><![CDATA[This is a short tutorial about some JavaFX elements like ellipses, circles, effects and gradients. In the first code we are creating a frame with a ellipse with center in (120,140), 60 pixels of horizontal radius, 20 pixels of vertical radius and color black. We have also a circle with center in (100,100), 50 pixels [...]]]></description>
			<content:encoded><![CDATA[<p>This is a short tutorial about some JavaFX elements like ellipses, circles, effects and gradients.</p>
<p>In the first code we are creating a frame with a ellipse with center in (120,140), 60 pixels of horizontal radius, 20 pixels of vertical radius and color black. We have also a circle with center in (100,100), 50 pixels of radius and color red. The idea is make this circle appears like a sphere and make the ellipse look like a shadow.</p>
<div class="wp_syntax">
<div class="code">
<pre class="java java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.*</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.paint.*</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.geometry.*</span>;
&nbsp;
<span style="color: #003399;">Frame</span> <span style="color: #009900;">&#123;</span>
    title<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;JavaFX Sphere&quot;</span>, width<span style="color: #339933;">:</span> <span style="color: #cc66cc;">300</span>, height<span style="color: #339933;">:</span> <span style="color: #cc66cc;">300</span>, visible<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">true</span>
    stage<span style="color: #339933;">:</span> Stage <span style="color: #009900;">&#123;</span>
        content<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
            Ellipse <span style="color: #009900;">&#123;</span>
                 centerX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">120</span>, centerY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">140</span>, radiusX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">60</span>, radiusY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">20</span>
                 fill<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">BLACK</span>
            <span style="color: #009900;">&#125;</span>,
            Circle <span style="color: #009900;">&#123;</span> centerX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">100</span>, centerY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">100</span>, radius<span style="color: #339933;">:</span> <span style="color: #cc66cc;">50</span>, fill<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">RED</span> <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre>
</div>
</div>
<p><img class="alignnone size-full wp-image-1021" title="JavaFX" src="http://silveiraneto.net/wp-content/uploads/2008/07/javafx_sphere_1.png" alt="" width="322" height="323" /></p>
<p>Now we will just add two thing, a effect and a radial gradient.</p>
<p>First we&#8217;ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with</p>
<pre class="jfx:nocontrols:nogutter">effect: GaussianBlur{ radius: 20 }</pre>
<p>This creates a gaussian blur of radius 20. The first ellipse was like</p>
<p><img class="alignnone size-full wp-image-1030" title="ellipse" src="http://silveiraneto.net/wp-content/uploads/2008/07/ellipse.png" alt="" width="158" height="76" /></p>
<p>and now with the effect becomes</p>
<p><a href="http://silveiraneto.net/wp-content/uploads/2008/07/ellipse_blur.png"><img class="alignnone size-full wp-image-1031" title="ellipse blur" src="http://silveiraneto.net/wp-content/uploads/2008/07/ellipse_blur.png" alt="" width="150" height="67" /></a></p>
<p>Now we create a radial gradient for the circle appears like a sphere. We do that using the RadialGradient class at</p>
<div class="wp_syntax">
<div class="code">
<pre class="java java" style="font-family:monospace;">RadialGradient <span style="color: #009900;">&#123;</span>
   centerX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">75</span>, centerY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">75</span>, radius<span style="color: #339933;">:</span> <span style="color: #cc66cc;">50</span>, proportional<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">false</span>
   stops<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
      Stop <span style="color: #009900;">&#123;</span>offset<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0.0</span> color<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">WHITE</span><span style="color: #009900;">&#125;</span>,
      Stop <span style="color: #009900;">&#123;</span>offset<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0.3</span> color<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">RED</span><span style="color: #009900;">&#125;</span>,
      Stop <span style="color: #009900;">&#123;</span>offset<span style="color: #339933;">:</span> <span style="color: #cc66cc;">1.0</span> color<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">DARKRED</span><span style="color: #009900;">&#125;</span>,
   <span style="color: #009900;">&#93;</span>
<span style="color: #009900;">&#125;</span></pre>
</div>
</div>
<p>First lets look at the gradient. It starts with a white color, going to red during the first 30% of the way. The remaining of the way is the color red going to a dark red. It creates a gradient like this one:</p>
<p><img class="alignnone size-full wp-image-1034" title="gradient" src="http://silveiraneto.net/wp-content/uploads/2008/07/gradient.png" alt="" width="264" height="30" /></p>
<p>But it is a radial gradient, with center in (75,75) and radius 50. So this radial gradient looks like this:</p>
<p><img class="alignnone size-full wp-image-1036" title="radial gradient" src="http://silveiraneto.net/wp-content/uploads/2008/07/radial_gradient.png" alt="" width="160" height="144" /></p>
<p>As we place this radial gradient in our circle, it was like this:</p>
<p><img class="alignnone size-full wp-image-1037" title="circle" src="http://silveiraneto.net/wp-content/uploads/2008/07/circle.png" alt="" width="120" height="110" /></p>
<p>And now is like this:</p>
<p><img class="alignnone size-full wp-image-1038" title="radial gradient circle" src="http://silveiraneto.net/wp-content/uploads/2008/07/radial_gradient_circle.png" alt="" width="119" height="112" /></p>
<p>Now the complete code. I guess it&#8217;s simple and also concise.</p>
<div class="wp_syntax">
<div class="code">
<pre class="java java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.*</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.paint.*</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.effect.*</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.geometry.*</span>;
&nbsp;
<span style="color: #003399;">Frame</span> <span style="color: #009900;">&#123;</span>
    title<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;JavaFX Sphere&quot;</span>, width<span style="color: #339933;">:</span> <span style="color: #cc66cc;">300</span>, height<span style="color: #339933;">:</span> <span style="color: #cc66cc;">300</span>, visible<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">true</span>
    stage<span style="color: #339933;">:</span> Stage <span style="color: #009900;">&#123;</span>
        content<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
            Ellipse <span style="color: #009900;">&#123;</span>
                centerX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">120</span>, centerY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">140</span>, radiusX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">60</span>, radiusY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">20</span>
                fill<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">BLACK</span>
                effect<span style="color: #339933;">:</span> GaussianBlur<span style="color: #009900;">&#123;</span> radius<span style="color: #339933;">:</span> <span style="color: #cc66cc;">20</span> <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>,
            Circle <span style="color: #009900;">&#123;</span>
                centerX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">100</span>, centerY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">100</span>, radius<span style="color: #339933;">:</span> <span style="color: #cc66cc;">50</span>
                fill<span style="color: #339933;">:</span> RadialGradient <span style="color: #009900;">&#123;</span>
                    centerX<span style="color: #339933;">:</span> <span style="color: #cc66cc;">75</span>, centerY<span style="color: #339933;">:</span> <span style="color: #cc66cc;">75</span>, radius<span style="color: #339933;">:</span> <span style="color: #cc66cc;">50</span>, proportional<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">false</span>
                    stops<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
                        Stop <span style="color: #009900;">&#123;</span>offset<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0.0</span> color<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">WHITE</span><span style="color: #009900;">&#125;</span>,
                        Stop <span style="color: #009900;">&#123;</span>offset<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0.3</span> color<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">RED</span><span style="color: #009900;">&#125;</span>,
                        Stop <span style="color: #009900;">&#123;</span>offset<span style="color: #339933;">:</span> <span style="color: #cc66cc;">1.0</span> color<span style="color: #339933;">:</span> <span style="color: #003399;">Color</span>.<span style="color: #006633;">DARKRED</span><span style="color: #009900;">&#125;</span>,
                    <span style="color: #009900;">&#93;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre>
</div>
</div>
<p>Here is the final screenshot:</p>
<p><img class="alignnone size-full wp-image-1040" title="javafx sphere" src="http://silveiraneto.net/wp-content/uploads/2008/07/javafx_sphere_2.png" alt="" width="318" height="318" /></p>
]]></content:encoded>
			<wfw:commentRss>http://silveiraneto.net/2008/07/31/javafx-creating-a-sphere-with-shadow/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Walker Sphere</title>
		<link>http://silveiraneto.net/2008/02/23/walker-sphere/</link>
		<comments>http://silveiraneto.net/2008/02/23/walker-sphere/#comments</comments>
		<pubDate>Sat, 23 Feb 2008 03:43:18 +0000</pubDate>
		<dc:creator>Silveira</dc:creator>
				<category><![CDATA[english]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[robot]]></category>
		<category><![CDATA[Robotics]]></category>
		<category><![CDATA[sphere]]></category>
		<category><![CDATA[Squawk]]></category>
		<category><![CDATA[Sun Spot]]></category>
		<category><![CDATA[walker]]></category>
		<category><![CDATA[walker sphere]]></category>

		<guid isPermaLink="false">http://silveiraneto.net/2008/02/23/walker-sphere/</guid>
		<description><![CDATA[For a while I&#8217;m thinking about this hardware project idea and now I&#8217;m opening here to get some opinions. After that maybe I&#8217;ll submit it for the Sun SPOT Open Grant Program. What is Walker Sphere? Walker Sphere is a project to made an robot capable with a diferent aproach, without heels, mats, propellers or [...]]]></description>
			<content:encoded><![CDATA[<p>For a while I&#8217;m thinking about this hardware project idea and now I&#8217;m opening here to get some opinions. After that maybe I&#8217;ll submit it for the <a href="http://www.sunspotworld.com/proposals/" title="Sun Spot World">Sun SPOT Open Grant Program</a>.</p>
<p><strong>What is Walker Sphere?</strong> Walker Sphere is a project to made an robot capable with a diferent aproach, without heels, mats, propellers or wings. The main idea is to move only changing its center of gravity.</p>
<p><strong>How change its center of gravity?</strong></p>
<p>It&#8217;s a sphere</p>
<p><img src="http://silveiraneto.net/wp-content/uploads/2008/02/anatomy_12.png" alt="Sphere Walker Anatomy" /></p>
<p>with some compartments</p>
<p><img src="http://silveiraneto.net/wp-content/uploads/2008/02/anatomy_2.png" alt="Sphere Walker Anatomy" /></p>
<p>and a Sun Spot.</p>
<p><img src="http://silveiraneto.net/wp-content/uploads/2008/02/anatomy_3.png" alt="Sphere Walker Anatomy" /></p>
<p>One compartment is filled with a liquid. The liquid is pumped to another compartment and so the compartment got heavier and the sphere moves towards its direction.</p>
<p style="text-align: center"><img src="http://silveiraneto.net/wp-content/uploads/2008/02/how_it_walks.png" alt="How the sphere walks" /></p>
<p><strong>Why a sphere? </strong>We can distribute the mass uniformly in a sphere and it&#8217;s shapes make it easier to roll. A sphere can encapsulates all components and protect them from the outside world and at the same time all sensors can work, especially using some transparent material for the bark.</p>
<p><strong>Why Sun Spot?</strong> The Sun Spot have some advantages that fits perfectly in this project:</p>
<ul>
<li>A broad set of sensors including accelerometers that made possible to know the current state of the sphere.</li>
<li>Radio communication that can make possible two or more spheres collaborate to achieve a common task.</li>
</ul>
<p style="text-align: center"><img src="http://silveiraneto.net/wp-content/uploads/2008/02/spheres_talking1.png" alt="Spheres robots talking" /></p>
<ul>
<li>Programmable using Java.</li>
<li>Open and Free Source JVM, Squawk.</li>
</ul>
<p><strong>It will be free? </strong>Yes. I&#8217;d like to know more about open and free licenses for hardware projects.</p>
<p><strong>How to pump the liquid into the compartments? </strong>I don&#8217;t know. Have you some good idea?</p>
<p>Some random ideas:</p>
<ul>
<li>A pressure device.</li>
<li>Something like an injection.</li>
<li>An <a href="http://en.wikipedia.org/wiki/Archimedes%27_screw" title="Wikipedia, english">Archimedes&#8217; screw</a>.</li>
<li>Not using a liquid, use something else.</li>
</ul>
<p>I&#8217;m open for ideas, critics and suggestions. ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://silveiraneto.net/2008/02/23/walker-sphere/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

