Recently I've been looking at Povray, pyprocessing, and cfdg (version 3.0) as tools for creating digital images. I have branched two separate blogs where I mainly explore jruby + processing and

Saturday, 31 January 2009

Vectors explained

For those of you not heavily in to game programming I found this excellent explanation of vectors for processing (now PVector) at straight from the horses mouth as it were. I particularly recommend downloading the example code, the simpleMouse example is very elegant and to my mind demonstrates most of what you need to know in one go...
I'm very much tempted to use that and possibly ideas lifted from John Wilsons 'Bee' to re-invigorate my original animated saucer...
I have changed my mouse following saucer to have an animated starfield background, I now make much use of PVector... though I've yet to automate my saucer!!
I'd like to think there something like emergent properties in my starfield (like Casey Reas and Ben Fry talk about on their podcasts see Darrels posting). The original clumping problem solved by fading in the stars (they now start life with 100% transparency). So brighter stars are nearer, an improved but far from perfect starfield...
ToDo: give saucer a path to follow..

Tuesday, 27 January 2009

More Inspirational Stuff

It takes a lot to grab peoples attention these days, and just in case you thought there isn't a lot of cool stuff already written in processing just check this video And
The bar has been raised.....
On a different topic can anyone explain to me why the standard blog layout wastes more than a third of the visible screen width with unnecessary margins, it makes no sense to me...
Unless you want space for adverts and/or blog spam.

Saturday, 24 January 2009

Processing Idioms

Processing is still pretty new, and still evolving, but I think it can be quite useful to present our book readers with some guidance toward coding idioms. It is quite possible in processing to mix and match code that has a very procedural feel such as defining the fill(255, 0, 0), then create a new instance of shape (say Saucer in my case), which will then be rendered using the color defined by the fill statement. When I started this project this seemed to be idiomatically correct, but now I've got some misgivings. On looking at the code from Daniel Shiffman and others, I think I am leaning toward the alternative, a more object oriented approach of giving the object a render() function, and also a setColor() function. I would be interested to know what anyone else thinks, but for the moment that the way I am thinking of going....
I would very much like some response, because I am sure that when the project was conceived just writing a book chapter in isolation could not have been what Darrel intended, and it certainly wasn't the idea that attracted me to participate in the project (flame flame).

Thursday, 15 January 2009

Exploring IO in processing

Processing has some pretty simple syntax for IO, but you can see its java roots. Heres an example I knocked up earlier that uses one Processing program to create another! The second program (once moved to a new folder join_the_dots, preferably in your sketchbook folder will display an empty polygon that connects the 'mouse click' defined points. To exit the point entry program, press any key!!!

   1:PrintWriter output;
2:PFont font;
4:int[] first;
5:void setup(){
6: size(400, 400);
7: font = createFont("TimesRoman", 24);
8: textFont(font);
9: fill(0);
10: text("Click Mouse to Register Point:", 5, 25);
11: text("Any Key to exit:", 5, 50);
12: output = createWriter("join_the_dots.pde");
13: output.println("size(400, 400);");
14: output.println("smooth();");
15: output.println("strokeWeight(4);");
16: output.println("beginShape(LINE);");
19:void draw(){
21:// Click mouse to register a point
22:void mousePressed() {
23: if (first == null){
24: first =new int[2];
25: first[0] = mouseX;
26: first[1] = mouseY;
27: output.println("vertex(" + first[0] + ", " + first[1] + ");");
28: }
29: else{
30: output.println("vertex(" + mouseX + ", " + mouseY + ");");
31: output.println("vertex(" + mouseX + ", " + mouseY + ");");
32: }
34:// Press any key to end drawing
35:void keyPressed() {
36: output.println("vertex(" + first[0] + ", " + first[1] + ");");
37: output.println("endShape(CLOSE);");
38: output.flush(); // Writes the remaining data to the file
39: output.close(); // Finishes the file
40: exit(); // Stops the program

Monday, 12 January 2009

Constants in Processing

To save much typing a lot of Processing constants are defined in the PConstant interface, this interface is then 'implemented' by the classes (PApplet etc) that need access to the constants. It occurs to me that if we are writing the book with the intention that students will progress to greater things (ie understanding computer languages) then perhaps we should let them in on the 'secret'? Or should we simply ignore it, since some java gurus (Joshua Bloch) consider the use of interfaces in this way to be bad form (and then there's the int/String vs enum type safety debate to consider).

Sunday, 11 January 2009

PShape SVG and Amaya

In the processing documentation states that PShape supports Inkscape (also free) and Adobe illustrator svg files, but I've found you can use Amaya as well!!!

If you fancy experimenting with SVG and don't want to use a SVG editor you could try Amaya W3C's very own 'free' web editor. If you are into bunsen burners and conical flasks, there are some nice preexisting shapes. Here's a many pointed star (I have removed the title element to prevent processing ide from complaining).
   1:<?xml version="1.0" encoding="utf-8"?>
2:<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3: "">
4:<svg xmlns="" width="100%" height="100%"
5: version="1.1">
6: <g style="stroke: none; stroke-opacity: 1; stroke-width: 1;fill:rgb(255, 0, 0)">
7: <polygon
8: points="97.975706,0 117.92089,67.456303 185.5904,48.246907 137.14411,99.248095 187.61469,148.24691 119.22323,131.79179 102.02429,200.00001 82.079113,132.5437 14.409602,151.75309 62.855888,100.75191 12.385308,51.753087 80.776775,68.208208 97.975706,0"/>
9: </g>

Here is the processing code:

4:PShape star;
5:star= loadShape("star.svg");
6:shape(star, 5, 5);

Heres the result:

Things to note fill is defined in the SVG file, you could specify stroke in the same way should you wish, the default way Amaya (and Inkscape for that matter) saves color is as as a 'web color' I have changed it to the more friendly rgb format. NB: the Amaya editor also supports bezier curves as well as basic rectangle, ellipse etc. Note you can "disableStyle()" if you want to only use processing to set fill etc... see below...

I've just had a bit of dabble with Inkscape, trying out the impressive 'trace' feature that enables the tracing of bitmaps. This is an example based on a photo I took when I used to windsurf.

Heres processing where I chose to overide the style from the svg (PS: remember to put your svg files in the data folder)

   1:size (150, 185);
2:PShape jump;
3:jump = loadShape("jump.svg");
9:shape(jump, 10, 10, 150, 185);

One advantage of Amaya over Inkscape is the relative simplicity of the xml it produces, Inkscape has a somewhat complicated namespace, which is probably not needed for simple shapes. With a bit of knowledge it should be possible to draw some interesting shapes just using an editor, however Inkscape does have quite a friendly graphical interface. PS despite claimed compatibility with Inkscape the processing ide does complain about a number of elements in the svg, doesn't seem to matter though.

Revision as of 4 Feb 2009 I have updated my "processing.xml" jedit mode to include PShape, which is now correctly highlighted

Tuesday, 6 January 2009

PVector class

PVector is a potentially useful class for storing 2d and 3d vector data (John Wilson, Ben aka lazydog, and I have all put it to good use), however it seems that I am not the only one that found the original official documentation confusing, see a recent discussion at
(author cbit) I tried to put in a link to the actual discourse but for some reason it failed!!!.

Update 11th March 2009 Dan Shiffman the creator of the PVector class explains its use more clearly in his excellent tutorial, see one of my later blogs, furthermore he has promised to update the processing reference documentation. Darrel has agreed that PVector is worthy of inclusion in the book, and John Wilson has volunteered to write the introduction!!!

PVector was only added in REV 0149, ie on 15 October 2008, so its quite a new addition

Here is just a little example of my exploration (using netbeans ide) of the PVector class. Here I've used it to calculate polar coordinates from Cartesian coordinates (no need for spreadsheet), but it really comes into its own for animations.

   1:public class VectorTest extends PApplet {
3:PVector v1, v2;
4:float a1, r1;
7:public void setup() {
9: v1 = new PVector(0, 1);
10: v2 = new PVector(0, -1);
11: a1 = PVector.angleBetween(v1, v2);
13: assert (a1 == PApplet.PI);
14: System.out.println("theta = " + a1 + " radius = " + v1.mag() );
15: v1.add(v2);
16: assert(v1.mag() == 0.0f);
17: System.out.println(v1);
22:theta = 3.1415927 radius = 1.0
23:[ 0.0, 0.0, 0.0 ]


Blog Archive

About Me

My photo
Pembrokeshire, United Kingdom
I have developed JRubyArt and propane new versions of ruby-processing for JRuby- and processing-3.2.2