// Open Source Art

Coming soon: Linear vs exponential fading led's. Finding good tutorials on how to implement this is difficult, more so if you're attempting something other than 8 bit pwm (such as 12bit led drivers). I'll post a tutorial soon on the math behind it as well as a couple of different types of lookup tables that can be stored in arrays for easy fading.

Over the next couple of days I plan on creating a theme from the ground up. So things might be glitchy/unfinished over the next week. I also plan on making a tutorial out of it because I think good tutorials on making Tumblr theme's are lacking. So stay tuned!

I'm REALLY excited over Code Academy!  When I first checked them out at the beginning of Code Year I was already impressed with their setup. I checked back in a few weeks ago and noticed that the number of tutorials they have has really exploded.  What started out as your run of the mill "Hello World" learning aid has now grown into series of tutorials that cover HTML, CSS and jQuery. They're basically covering all of the useful coding that most people could benefit from and their web based compiler is pretty friendly with syntax errors at first and the error messages are very straight forward.  So check it out!

Basic embedded systems

My PCB's arrived today from DorkbotPDX! If you're interested in open source electronics and would like to manufacture your own boards, I HIGHLY recommend their services.  They're made in the USA and the cost is $5 a square inch and there is no setup fee and shipping is free within the US. You receive three copies of your board. The top pcb is a half-shield I designed that works with the Arduino as an ISP. Before I was just using a bunch of wires and a breadboard for programming ATmega's, hopefully this will make things easier. The bottom boards are a breakout for the Texas Instruments TLC5940, an LED controller.  You can control up to 16 led's per chip and they can be daisy chained. I plan on using them with some fiber optics in a project in the very near future. So this has pretty much been what's occupying my time lately. I'm also working on some custom electronics for a fellow artist. Once the semester ends I'll start posting more tutorials again, and hopefully spread out into things other than just programming.

There was a lot of initial activity as I started this blog but things have settled down for a bit. I'll be picking things back up soon now that I'm getting back into the swing of things.  I'm planning a lot of neat stuff that hopefully everyone will enjoy.

Blue:

void setup(){ size(125,125); background(128); } void draw(){ }

I've noticed this problem too. I'm not sure how the dash works but it's definintely not rendering the canvas and any script just shows up as a grey icon. If you put a "read more" break before your code, that can provide a basic way of motivating people to click through and see the post rendered properly on your page. I'll keep looking into this.

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!

Once you have that done, copy the code and paste it in the head tag just like you did for the jQuery links above. Everything should now be ready for you to code your own buttons and sliders! Part 2 is coming up next!

<![CDATA[// <![CDATA[ void setup(){ size(200,200); background(128); } void draw(){ ellipse(height/2,width/2,75,75); } // ]]]]><![CDATA[>]]>