PageRenderTime 58ms CodeModel.GetById 27ms RepoModel.GetById 0ms app.codeStats 0ms

/_site/2011/03/08/as-monty-python-said-and-now-for-something-completly-different.html

https://github.com/vicmaster/blog.crowdint.com
HTML | 256 lines | 209 code | 43 blank | 4 comment | 0 complexity | e96ebd121e9e69eb4f7b7bc19883eb84 MD5 | raw file
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2. 

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 

  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. 

  4. <head>
    5. 

  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    6. 

  6.   <title>Crowd Interactive Tech Blog :: As Monty Python said... "And Now For Something Completly Different"</title>
    7. 

  7.   <link rel="stylesheet" href="/stylesheets/screen.css?853991" type="text/css" media="screen, projection" />
    8. 

  8.   <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
    9. 

  9.   <link rel="stylesheet" href="/stylesheets/styles.css?853991" type="text/css" media="screen" />
    10. 

  10.   <link rel="stylesheet" href="/stylesheets/skribit.css" type="text/css" media="screen" />
    11. 

  11.   <link rel="stylesheet" href="/stylesheets/syntax.css" type="text/css" media="screen" />
    12. 

  12.   <link rel="alternate" type="application/rss+xml" title="RSS Feed for blog.crowdint.com" href="http://feeds.feedburner.com/CrowdInteractiveTechBlog" />
    13. 

  13.   <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    14. 

  14.   <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    15. 

  15.     <script type="text/javascript">
    16. 

  16.       var _gaq = _gaq || [];
    17. 

  17. 

  18.       _gaq.push(['_setAccount', 'UA-17527068-1']);
    19. 

  19.       _gaq.push(['_trackPageview']);
    20. 

  20. 

  21.       (function() {
    22. 

  22.         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    23. 

  23.         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    24. 

  24.         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    25. 

  25.       })();
    26. 

  26. 

  27.     </script>
    28. 

  28. </head>
    29. 

  29. <body>
    30. 

  30.   <div class="container">
    31. 

  31.     <div id="empty-header">
    32. 

  32.       <a href="/" id="home-link"><img src="/images/logo_03.png" id="logoHead" width="227" height="74" alt="LogoHead" onclick="_gaq.push(['_trackEvent', 'header', 'logo']);"/></a>
    33. 

  33.       <ul id="navMenu">
    34. 

  34.         <li><a href="http://www.crowdint.com/" onclick="_gaq.push(['_trackEvent', 'header', 'home']);"><span>HOME</span></a></li>
    35. 

  35.         <li><a href="http://www.crowdint.com/projects" onclick="_gaq.push(['_trackEvent', 'header', 'projects']);"><span>PROJECTS</span></a></li>
    36. 

  36.         <li><a href="http://www.crowdint.com/services" onclick="_gaq.push(['_trackEvent', 'header', 'services']);"><span>SERVICES</span></a></li>
    37. 

  37.         <li class="selected"><span>BLOG</span></li>
    38. 

  38.         <li><a href="http://www.crowdint.com/about_us" onclick="_gaq.push(['_trackEvent', 'header', 'about_us']);"><span>ABOUT</span></a></li>
    39. 

  39.         <li><a href="http://www.crowdint.com/" onclick="_gaq.push(['_trackEvent', 'header', 'contact']);"><span>CONTACT</span></a></li>
    40. 

  40.       </ul>
    41. 

  41.     </div>
    42. 

  42.     <div class="span-24 append-bottom testGlow">
    43. 

  43.       <div class="round-top span-24">
    44. 

  44.         &nbsp;
    45. 

  45.       </div>
    46. 

  46.       <div id="white-body" class="span-24">
    47. 

  47.         <div class="left-side span-17">
    48. 

  48.           <div class="post prepend-1">
    49. 

  49.   <h1>As Monty Python said... "And Now For Something Completly Different"</h1>  
    50. 

  50.   <p class="author">
    51. 

  51.     <span class="date"><b>Mar 08</b><br />2011</span>
    52. 

  52.   </p>
    53. 

  53.   <div class="body prepend-1 append-1">
    54. 

  54.     <div class="gravatar span-3"><img src="http://www.gravatar.com/avatar/89c6420fb99cb01bcf2e3502a7851da2" class="avatar" alt="Avatar" /></div>
    55. 

  55.     <p>Perhaps by reading this you may be wondering what is Processing.js?
    56. 

  56. Well, <a href="http://processingjs.org/">Processing.js</a> is a JavaScript port of a visualization-oriented language based on Java with the same name Processing (or p5 for short) made by <a href="http://ejohn.org">John Resig</a>, the creator of jQuery.</p>
    57. 

  57. 

  58. <h3>First, a little history about p5.</h3>
    59. 

  59. 

  60. <p>  It was developed by Ben Fry and Casey Reas and it was intended to help electronic arts and visual design communities learn the basis of computer programming in a visual context.</p>
    61. 

  61. 

  62. <p>And... what about Processing.js?</p>
    63. 

  63. 

  64. <p>  Processing.js is the little sister project of the popular Processing visual programming language, but designed for the web.
    65. 

  65.   <strong>Processing.js helps you to make your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.</strong> You only write code using the Processing language, include it in your web page, and Processing.js does the rest. <em>It's not magic, but almost</em>.</p>
    66. 

    67. 

  67. <p>  Originally developed by Ben Fry and Casey Reas, Processing started as an open source programming language based on Java to help the electronic arts and visual design communities learn the basics of computer programming in a visual context.
    68. 

  68.   <strong>Processing.js takes this to the next level</strong>, allowing Processing code to be run by <strong>any HTML5 compatible browser</strong>, including current versions of Firefox, Safari, Chrome, Opera, and even the upcoming Internet Explorer 9. <em>Processing.js brings the best of visual programming to the web, both for Processing and web developers</em>.</p>
    69. 

  69. 

  70. <p>  Ok, so when or where could I use processing?, It's simple, for example: when you need to implement some animation or visual interaction without using Adobe's Flash, or when you want to make new interfaces (like using Arduino) or maybe if you want to put multimedia. That's why I like Processing.js.</p>
    71. 

    72. 

  72. <p>  Well, first of all <strong>you'll need the Processing.js</strong> (which could be <a href="http://processingjs.org/content/download/processing-js-1.0.0/processing-1.0.0.min.js">downloaded here</a>), and <strong>include it on your page</strong>:</p>
    73. 

    74. 

  74. <div class="highlight"><pre><code class="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;processing-1.0.0.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
    75. 

  75. </code></pre>
    76. 

  76. </div>
    77. 

  77. 

  78. 

  79. <p>  Then, wherever you want to use it just put it inside a canvas element (note: of course it has to be HTML5 canvas, which I will speak on my next post).</p>
    80. 

  80. 

  81. <div class="highlight"><pre><code class="html"><span class="nt">&lt;canvas</span> <span class="na">data-processing-sources=</span><span class="s">&quot;MySuperDuperInteractionFile.pjs.&quot;</span><span class="nt">&gt;&lt;/canvas&gt;</span>
    82. 

  82. </code></pre>
    83. 

  83. </div>
    84. 

  84. 

  85. 

  86. <p>  <strong>Load your web page, and it will parse, translate, and run your sketch in the browser</strong>... Tadaaaa! =)</p>
    87. 

  87. 

  88. <p>  In my experience, I've always hated those basic HELLO WORLD examples so here is a little example which you can try.
    89. 

  89.   I won't explain all the Processing language, this will just show you a little bouncing ball, nothing great because out there you can find lots of more complex examples.</p>
    90. 

    91. 

  91. <div class="highlight"><pre><code class="javascript">  <span class="kr">float</span> <span class="nx">frame</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>         <span class="c1">// we start at frame 0</span>
    92. 

  92.   <span class="kr">float</span> <span class="nx">framerate</span> <span class="o">=</span> <span class="mi">24</span><span class="p">;</span>    <span class="c1">// our &quot;sketch&quot; will have a framerate of 24 frames per second.</span>
    93. 

  93. 

  94.   <span class="kr">int</span> <span class="nx">ball_x</span><span class="p">;</span>              <span class="c1">// ball x coordinate</span>
    95. 

  95.   <span class="kr">int</span> <span class="nx">ball_y</span><span class="p">;</span>              <span class="c1">// ball y coordinate</span>
    96. 

  96.   <span class="kr">int</span> <span class="nx">ball_radius</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>    <span class="c1">// ball radius</span>
    97. 

  97. 

  98.   <span class="k">void</span> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span>
    99. 

  99.     <span class="nx">size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span><span class="mi">200</span><span class="p">);</span>         <span class="c1">// set draw area size</span>
    100. 

  100.     <span class="nx">frameRate</span><span class="p">(</span><span class="nx">framerate</span><span class="p">);</span>  <span class="c1">// set animation framerate</span>
    101. 

  101.     <span class="nx">ball_x</span> <span class="o">=</span> <span class="nx">width</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>      <span class="c1">// set the initial ball coordinates</span>
    102. 

  102.     <span class="nx">ball_y</span> <span class="o">=</span> <span class="nx">ball_radius</span><span class="p">;</span>  <span class="c1">// set the initial ball coordinates</span>
    103. 

  103.     <span class="nx">stroke</span><span class="p">(</span><span class="err">#</span><span class="mi">003300</span><span class="p">);</span>       <span class="c1">// set the default shape outline colour</span>
    104. 

  104.     <span class="nx">fill</span><span class="p">(</span><span class="err">#</span><span class="mi">0000</span><span class="nx">FF</span><span class="p">);</span>         <span class="c1">// set the default shape fill colour</span>
    105. 

  105.   <span class="p">}</span>
    106. 

  106. 

  107.   <span class="k">void</span> <span class="nx">draw</span><span class="p">()</span> <span class="p">{</span>
    108. 

  108.     <span class="nx">frame</span><span class="o">++</span><span class="p">;</span>                       <span class="c1">// note that we&#39;re one frame further than last time</span>
    109. 

  109.     <span class="kr">float</span> <span class="nx">bounce_height</span> <span class="o">=</span> <span class="nx">height</span><span class="o">/</span><span class="mi">2</span> <span class="o">*</span> <span class="nx">abs</span><span class="p">(</span><span class="nx">sin</span><span class="p">(</span><span class="nx">PI</span><span class="o">*</span><span class="nx">frame</span><span class="o">/</span><span class="nx">framerate</span><span class="p">));</span>  <span class="c1">// compute the ball height for this frame</span>
    110. 

  110.     <span class="kr">float</span> <span class="nx">ball_height</span> <span class="o">=</span> <span class="nx">height</span> <span class="o">-</span> <span class="p">(</span><span class="nx">bounce_height</span><span class="o">+</span><span class="nx">ball_radius</span><span class="p">);</span>       <span class="c1">// because the top of the screen is 0, and the bottom is &quot;height&quot;,</span>
    111. 

  111.     <span class="nx">background</span><span class="p">(</span><span class="err">#</span><span class="nx">FFFFEE</span><span class="p">);</span>           <span class="c1">// clear the drawing area</span>
    112. 

  112.     <span class="nx">ball_y</span> <span class="o">=</span> <span class="p">(</span><span class="kr">int</span><span class="p">)</span> <span class="p">(</span><span class="nx">ball_height</span><span class="p">);</span>  <span class="c1">// set the new ball y position</span>
    113. 

  113.     <span class="nx">ellipse</span><span class="p">(</span><span class="nx">ball_x</span><span class="p">,</span><span class="nx">ball_y</span><span class="p">,</span><span class="nx">ball_radius</span><span class="p">,</span><span class="nx">ball_radius</span><span class="p">);</span>                 <span class="c1">// draw the ball</span>
    114. 

  114.   <span class="p">}</span>
    115. 

  115. </code></pre>
    116. 

  116. </div>
    117. 

  117. 

  118. 

  119. <p>  What can we see here? If you noticed, we have three main sections, the global variables (nothing to say), the setup method which sets the configuration that will be used in our sketch and the draw method which well... will draw our sketch.</p>
    120. 

  120. 

  121. <p>  Wait a minute, Sketch?, yeap... <em>sketches are the main way to use processing</em>.
    122. 

  122.   If you remember Adobe Flash you'll easy understand a sketch because it works similar, they are like small scenes which together make a movie, and just as happens in Processing, you can use several sketches to make more complex things.</p>
    123. 

    124. 

  124. <p>  That's all folks! (for now).
    125. 

  125.   Hope you have enjoyed this small change, as someone said before: Ruby is not the first nor will be the last programming language, it is always good to have alternatives...</p>
    126. 

  126. 

  127.     
    128. 

  128.     <p>
    129. 

  129.       <div class="tweet">
    130. 

  130.         <a href="http://twitter.com/share" 
    131. 

  131.           class="twitter-share-button" 
    132. 

  132.           data-text="" 
    133. 

  133.           data-count="none" 
    134. 

  134.           data-via="crowdint" 
    135. 

  135.           data-related=":with">Tweet</a>
    136. 

  136.         <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>     
    137. 

  137.       </div>
    138. 

  138.       <div class="right">
    139. 

  139.         <!-- Place this tag where you want the +1 button to render -->
    140. 

  140.         <g:plusone></g:plusone>
    141. 

  141. 

  142.         <!-- Place this tag after the last plusone tag -->
    143. 

  143.         <script type="text/javascript">
    144. 

  144.           (function() {
    145. 

  145.             var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    146. 

  146.             po.src = 'https://apis.google.com/js/plusone.js';
    147. 

  147.             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    148. 

  148.           })();
    149. 

  149.         </script>
    150. 

  150.       </div>
    151. 

  151.       <br><br>     
    152. 

  152.   		<div class="left">
    153. 

  153.   		  <!-- http://www.facebook.com/pages/Crowd-Interactive/63293958828  -->
    154. 

  154.         <iframe src="http://www.facebook.com/plugins/like.php?href=http://blog.crowdint.com/2011/03/08/as-monty-python-said-and-now-for-something-completly-different.html" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe>
    155. 

  155.       </div>
    156. 

  156.       
    157. 

  157.     </p>
    158. 

  158.   </div>
    159. 

  159.   
    160. 

  160.   <div class="author_box">
    161. 

  161.     <p><b>Author:</b> Carlos Mu単iz | carlos.muniz@crowdint.com</p>
    162. 

  162.   </div>
    163. 

  163.   <div class="nav_links span-16">
    164. 

  164.     
    165. 

  165.       <div class="previous span-8"><a href="/2011/03/02/how-to-make-your-models-look-lean.html"><< How to make your Models look lean</a></div>
    166. 

  166.     
    167. 

  167.     
    168. 

  168.       <div class="next span-8 last"><a href="/2011/03/14/Sinatra-the-green-way.html">Sinatra, the green way >></a></div>
    169. 

  169.     
    170. 

  170.   </div>
    171. 

  171. </div>
    172. 

  172. <div class="post prepend-1">
    173. 

  173.   <h1>Related Posts</h1>
    174. 

  174.   <ul class="archives">
    175. 

  175. 

  176.   <li><span><b>08 Mar 2011</b></span> &raquo; <a href="/2011/03/08/as-monty-python-said-and-now-for-something-completly-different.html">As Monty Python said... "And Now For Something Completly Different"</a></li>
    177. 

  177. 

  178.   <li><span><b>17 Nov 2010</b></span> &raquo; <a href="/2010/11/17/rack-basics-a-rack-introduction.html">Rack Basics - A Rack Introduction</a></li>
    179. 

  179. 

  180.   <li><span><b>25 Feb 2011</b></span> &raquo; <a href="/2011/02/25/why-ruby.html">Why ruby?</a></li>
    181. 

  181. 

  182.   <li><span><b>14 Jan 2011</b></span> &raquo; <a href="/2011/01/14/building-a-basic-dsl-to-create-callbacks-in-ruby.html">Building a basic DSL to create callbacks in Ruby</a></li>
    183. 

  183. 

  184.   <li><span><b>30 Nov 2010</b></span> &raquo; <a href="/2010/11/30/rspec-for-really-newbies.html">RSpec for really newbies</a></li>
    185. 

  185. 

  186.   </ul>
    187. 

  187.   <div id="disqus_thread"></div>
    188. 

  188.     <script type="text/javascript">
    189. 

  189.       /**
    190. 

  190.         * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread] 
    191. 

  191.         */
    192. 

  192.         // var disqus_developer = 1;
    193. 

  193.       (function() {
    194. 

  194.        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    195. 

  195.        dsq.src = 'http://crowdinttech.disqus.com/embed.js';
    196. 

  196.        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    197. 

  197.       })();
    198. 

  198.     </script>
    199. 

  199.     <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=crowdinttech">comments powered by Disqus.</a></noscript>
    200. 

  200.     <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
    201. 

  201. </div>
    202. 

  202. 

  203.         </div>
    204. 

  204.         <div class="right-side span-5 last prepend-1">
    205. 

  205.           <h1><a href="/">Blog Home</a></h1>
    206. 

  206. <h1>About Crowd Interactive</h1>
    207. 

  207. <p class="append-1 about">Crowd Interactive is a Ruby on Rails
    208. 

  208. consultancy firm powered by a team of enthusiast engineers that love
    209. 

  209. programming.We turn your ideas into web applications...<br/><a href="/about.html">Read More...</a></p>
    210. 

  210. <h1>Our Favorite Sites</h1>
    211. 

  211. <ul>
    212. 

  212.   <li><a href="http://www.crowdint.com">Crowd Interactive</a></li>
    213. 

  213.   <li><a href="http://www.magmarails.com">MagmaRails</a></li>
    214. 

  214.   <li><a href="http://rubyonrails.org">Ruby on Rails</a></li>
    215. 

  215.   <li><a href="http://ruby-lang.org">Ruby-Lang</a></li>
    216. 

  216.   <li><a href="http://github.com/crowdint">Github</a></li>
    217. 

  217. </ul>
    218. 

  218. <h1>Stuff we've built</h1>
    219. 

  219. <ul>
    220. 

  220.   <li><a href="http://www.modcloth.com">ModCloth</a></li>
    221. 

  221.   <li><a href="http://www.creativeallies.com">Creative Allies</a></li>
    222. 

  222.   <li><a href="http://www.nameframe.com">Nameframe</a></li>
    223. 

  223.   <li><a href="http://github.com/crowdint/rails3-jquery-autocomplete">Rails3-jQuery-Autocomplete</a></li>
    224. 

  224.   <li><a href="http://github.com/crowdint/rankstar">rankstar</a></li>
    225. 

  225.   <li><a href="http://github.com/crowdint/blog.crowdint.com">This site's source code</a></li>
    226. 

  226. </ul>
    227. 

  227. <h1>Older Posts</h1>
    228. 

  228. <ul>
    229. 

  229.   <li><a href="/archive.html">Archive</a></li>
    230. 

  230. </ul>
    231. 

  231. 	  <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCrowd-Interactive%2F63293958828&amp;width=190&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=380px" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:190px; height:380px;" allowTransparency="true"></iframe>
    232. 

  232. Site Powered by <a href="http://github.com/mojombo/jekyll">Jekyll</a>
    233. 

  233. 

  234.         </div>
    235. 

  235.       </div>
    236. 

  236.       <div class="round-bottom span-24">
    237. 

  237.         &nbsp;
    238. 

  238.       </div>
    239. 

  239.     </div>
    240. 

  240. 

  241.   </div>
    242. 

  242.   <div id="footer">
    243. 

  243.     <div class="copyContent" >
    244. 

  244.       <p class="copy">Copyright &copy; 2010, Crowd Interactive. All rights reserved.</p>
    245. 

  245.     </div>
    246. 

  246.   </div>
    247. 

  247.   <script type="text/javascript">
    248. 

  248.   var disqus_shortname = 'crowdinttech';
    249. 

  249.   (function () {
    250. 

  250.     var s = document.createElement('script'); s.async = true;
    251. 

  251.     s.src = 'http://disqus.com/forums/crowdinttech/count.js';
    252. 

  252.     (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    253. 

  253.   }());
    254. 

  254.   </script>
    255. 

  255. </body>
    256. 

  256. </html>
    257. 

  257.