#interactive processing

Because of formatting issues in getting the code to display inside a Tumblr text post, directly copying and pasting the above code into a post and running it may not work. So you can just copy the code from here and try it yourself. First, the jQuery UI code needs to be placed in it's own script tag. Once that's done the $(document).ready(function (){   is used to place all of your UI code. To create a slider named radius, type the code $(‘#radius’).slider({ The slider widget accepts a few different parameters, min and max define the numerical range of values that the slider can output. For the first slider I set the values to 20 and 140 since those represent the min and max radius I wanted the circle to be in the sketch. The value parameter is a way of setting up the slider so that the slider handle is placed at a specific value along the slider. If you don't include the value parameter it just defaults to the minimum value. The slide: function(event, ui) { is a function that's called whenever the slider is manipulated, whether that be by a mouse drag or using the arrow keys. When that function is called, the code inside is executed. In this case, the code $('#radius_val').val(ui.value)  assigns the current value of the slider to the variable named 'radius_val' That pretty much covers the jQuery specific code for implementing the sliders. Take a closer look and compare the two sliders to get a sense of the specific syntax and what can be changed. Since jQuery UI widgets are styled by CSS, a quick way of uniformly changing the length of sliders is to put some code into a style tag. In this case, .slider{ width:150px; }   is used to set all the .slider widgets to a width of 150 pixels. This isn't the only way of doing it, if you want individual control you can always adjust the specific slider as I''ll show later. The next step is to set up a div tag that will contain the script for your processing sketch, the div's that will actually represent the sliders and the canvas element that will display your sketch. This way you can avoid the formatting issues that comes up when you don't use div's and you don't need to worry about your processing script targeting a specific canvas element. The script that contains the processing code is pretty straight forward for anyone with basic knowledge of the Processing.js environment. The one specific thing that needs to be addressed is how exactly processing gets hold of the variables that the sliders are outputting. In the draw function you can see that bringing in a variable is expressed as int a = (int) $('#radius_val').val(); This is essentially telling processing that int a is equal to an integer defined variable called "radius_val." If you go back up and look at the first slider, you can see that the event function that's called when the slider is adjusted set's up this variable. This is just half of the story though. You can't just directly generate a variable in jQuery and have Processing.js understand it. The variable has to go through an html input tag, otherwise your code won't run properly. If you look under the processing script you'll see the code: input type=”hidden” id=”radius_val” name=”radius_val” value=”60” This code creates a hidden input that won't be displayed and gives it the name "radius_val." It doesn't really matter what it's named but it does matter what the id is. The id of the input must match what's both in the processing sketch and the jQuery variable. The value parameter is the initial value that's set in the variable, in this case it's 60. That means when the processing sketch is first drawn, the circles radius is 60. Notice too that up in the jQuery code the value was set to 60 there too. The values don't have to match between the code, but I prefer that they do. Try changing the value of the input and see how that effects the sketch. The final step to getting everything working is to actually display the slider that's been coded. To do this create a div with a class that matches the type of UI widget and an id that matches the name of that widget. So for the slider type widget with a name "radius" you would create the div: div class="slider" id="radius" If you wanted to adjust the length of the slider here using the typical css "style=width:" parameter you could do so now. The last step is to create an html5 canvas element and you should be all set! There's a lot more to jQuery UI so have fun experimenting around. Documentation on jQuery UI can be found here. If you have any questions, feel free to send me an ask!