This is an older version of Design Intellection. Access the new one: http://designintellection.com/.

Design Intellection is a small web design company committed to making the web a better place.

Design Intellection is a small web design company committed to making the web a better place.

Contact

September 21, 2009

Integrating jQuery with Processing.js

Quickly learn how easy it is to integrate Processing.js with native JavaScript code.

Since the Processing.js syntax is JavaScript, it can be combined with other JavaScript code seamlessly. In my limited (read: very) experiments it seems that the controlling factor in merging the two is how well you know JavaScript.

This short tutorial will show you just how easy it is to mix the two by combining Processing.js with jQuery to make a graph that is partially controlled by a slider bar from the jQuery UI library. It should be noted that this tutorial assumes familiarity with the Processing.js basics expounded upon in the previous tutorials and with how to install and setup jQuery and the jQuery UI elements.

A SPECIAL NOTE TO RSS READERS:

Due to the complex nature of this tutorial (mainly the examples) you have to go to the post to see the rest.

Note: As mentioned in the introduction of this series (though included as an addendum), IE support is currently not included with these tutorials.

Processing.js and jQuery

In Figure 4.1, we take the bar chart we constructed at the end of the tutorial on creating bar charts and combine that with a slider bar from the jQuery UI library. The task will be to set the value of the bar on the far right of the graph (the green one) to be controlled by the jQuery slider.

Once the bar value is being controlled by jQuery we will keep the draw() loop running so that the bar will update dynamically along with the jQyery slider. The code for this is in Figure 4.1, the code that connects jQuery and Processing.js has been hilighted.

Caution: This is a first for me, but I must warn you that your laptop/desktop may get abnormally hot from running these examples. Apparently Processing.js takes a lot of processing power (no pun intended), especially when the draw() loop is set to continuously cycle. A side effect of this is a hot processor. Just be careful.

  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Processing.js Examples</title>
  7. <!-- Loading jQuery and jQueryUI -->
  8. <script type="text/javascript" src="/path/to/js/jquery-1.3.2.min.js"></script>
  9. <script type="text/javascript" src="/path/to/js/jquery-ui-1.7.2.custom.min.js"></script>
  10. <link rel="stylesheet" type="text/css" media="screen" href="/path/to/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
  12. <script type="text/javascript" href="/js/processing.js"></script>
  13. <!--[if IE]>
  14. <script type="text/javascript" href="/path/to/excanvas.compiled.js"></script>
  15. <![endif]-->
  16. <script type="text/javascript" src="/js/init.js"></script>
  17. </head>
  19. <body>
  21. <div class="example">
  22. <script type="text/javascript">
  23. $(function() {
  24. $("#slider").slider({
  25. value:120,
  26. min: 2,
  27. max: 160,
  28. step: 2,
  29. slide: function(event, ui) {
  30. $("#amount").val('$' + ui.value);
  31. }
  32. });
  33. $("#amount").val('$' + $("#slider").slider("value"));
  34. });
  35. </script>
  37. <div class="graph">
  38. <script type="application/processing">
  40. // Setup canvas
  41. void setup()
  42. {
  43. size(372,180);
  44. background(255);
  45. }
  47. // Draw elements
  48. void draw()
  49. {
  50. // Remove the border
  51. noStroke();
  53. int bar_width = 36;
  55. // Adding this variable that is changeable by our JavaScript below.
  56. int dynamic_bar = $("#slider").slider("value");
  58. int[] bar_height = {132, 132, 100, 132, 160, 132, dynamic_bar};
  59. color[] bar_colors = {#cc9933, #c572d1, #8c8061, #e6df2b, #3ecbe5, #ca5e23, #99cc33};
  60. color[] shadow_colors = {#bb8822, #b461c0, #7b7050, #d5ce1a, #2dbad4, #b94d12, #79b327};
  62. for (int i=0; i<bar_height.length; i++)
  63. {
  64. // Build the shadow first.
  65. fill(shadow_colors[i]);
  66. rect(12+i*48, height-bar_height[i], bar_width, bar_height[i]);
  68. // Then build the fill bar.
  69. fill(bar_colors[i]);
  70. rect(12+i*48, height-bar_height[i]+2, bar_width-2, bar_height[i]-2);
  71. }
  72. }
  74. </script>
  76. <canvas width="372" height="180"></canvas>
  77. </div>
  79. <div class="controller">
  80. <div class="demo">
  81. <p>
  82. <label for="amount">Donation goal for 2010 ($50 increments):</label>
  83. <input type="text" id="amount" />
  84. </p>
  86. <div id="slider"></div>
  87. </div><!-- End demo -->
  88. </div>
  90. <span class="clear"></span>
  91. </div>
  93. </body>
  94. </html>
Figure 4.1

Creating a bar graph where one of the bars is controlled via jQuery.

Download Source processing-f4.1.txt

Pretty neat, huh? Well, kind of, you probably quickly noticed that changing the bar height resulted in an ugly layering effect. If you remember from the tutorial on creating bar charts, as Processing.js loops through the draw() function it creates layers of each graphic rendered. Since we are running a continuous loop, a new layer of the bar is being created each time; so as we change the bar height each successive iteration is being shown.

To fix this problem what I did was add a new bar as a top layer for each loop that went directly on top of the previous bar created. I set the fill color for this bar to be the same as the background color (in this case white) so that it essentially erases the previous bar allowing for a fresh bar each time. The updated code and resulting display is shown in Figure 4.2.

  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Processing.js Examples</title>
  7. <!-- Loading jQuery and jQueryUI -->
  8. <script type="text/javascript" src="/path/to/js/jquery-1.3.2.min.js"></script>
  9. <script type="text/javascript" src="/path/to/js/jquery-ui-1.7.2.custom.min.js"></script>
  10. <link rel="stylesheet" type="text/css" media="screen" href="/path/to/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
  12. <script type="text/javascript" href="/js/processing.js"></script>
  13. <!--[if IE]>
  14. <script type="text/javascript" href="/path/to/excanvas.compiled.js"></script>
  15. <![endif]-->
  16. <script type="text/javascript" src="/js/init.js"></script>
  17. </head>
  19. <body>
  21. <div class="example">
  22. <script type="text/javascript">
  23. $(function() {
  24. $("#slider2").slider({
  25. value:120,
  26. min: 2,
  27. max: 160,
  28. step: 2,
  29. slide: function(event, ui) {
  30. $("#amount2").val('$' + ui.value);
  31. }
  32. });
  33. $("#amount2").val('$' + $("#slider2").slider("value"));
  34. });
  35. </script>
  37. <div class="graph">
  38. <script type="application/processing">
  40. // Setup canvas
  41. void setup()
  42. {
  43. size(372,180);
  44. background(255);
  45. }
  47. // Draw elements
  48. void draw()
  49. {
  50. // Remove the border
  51. noStroke();
  53. int bar_width = 36;
  55. // Adding this variable that is changeable by our JavaScript below.
  56. int dynamic_bar = $("#slider2").slider("value");
  58. int[] bar_height = {132, 132, 100, 132, 160, 132, dynamic_bar};
  59. color[] bar_colors = {#cc9933, #c572d1, #8c8061, #e6df2b, #3ecbe5, #ca5e23, #99cc33};
  60. color[] shadow_colors = {#bb8822, #b461c0, #7b7050, #d5ce1a, #2dbad4, #b94d12, #79b327};
  62. for (int i=0; i<bar_height.length; i++)
  63. {
  64. // Create the "eraser" bar.
  65. fill(255);
  66. rect(12+i*48, 10, bar_width, 170);
  68. // Build the shadow first.
  69. fill(shadow_colors[i]);
  70. rect(12+i*48, height-bar_height[i], bar_width, bar_height[i]);
  72. // Then build the fill bar.
  73. fill(bar_colors[i]);
  74. rect(12+i*48, height-bar_height[i]+2, bar_width-2, bar_height[i]-2);
  75. }
  76. }
  78. </script>
  80. <canvas width="372" height="180"></canvas>
  81. </div>
  83. <div class="controller">
  84. <div class="demo">
  85. <p>
  86. <label for="amount">Donation goal for 2010 ($50 increments):</label>
  87. <input type="text" id="amount2" />
  88. </p>
  90. <div id="slider2"></div>
  91. </div><!-- End demo -->
  92. </div>
  94. <span class="clear"></span>
  95. </div>
  97. </body>
  98. </html>
Figure 4.2

Fixing the bar's display.

Download Source processing-f4.2.txt

While this tutorial illustrates a neat effect, the practicality is pure showmanship. The graphical representation of the value in the slider does not really clarify it any further, and vice-versa.

But the effectiveness of the graphic aside, my goal was to show you how easy it is to combine Processing.js with native JavaScript code.

Infographic

In our next and last tutorial we'll build on this principle of mixing Processing.js with other technologies to create an infographic based on PHP output.

Processing.js A series of concise tutorials.
Part I – Introduction
An introduction to Processing.js
Part II – Bar Charts
Start with a single bar chart and progress to aesthetically pleasing multiple bar charts.
Part III – Pie Charts
Easily create pie charts.
Part IV – Integrate jQuery
Learn how to easily implement Processing.js with native JavaScript.
Part V – Integrate PHP
Create dynamic info-graphics by combining PHP with Processing.js
Part VI – Conclusion
A summary of the series with links to more resources.
Appendix
An example page with all of the working examples and the appropriate source code.

Send a Message Have something to say? Use the form below to email your comment directly to me.
If warranted, I’ll do my best to respond in a timely matter.

Legend * = Required

(Hint: It’s David)

Content © David Yeiser, 2007–2009 | Published with Habari.