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

Monday, 29 June 2009

Rolling the dice

Well sometimes you get nothing with some rules, and sometimes you get something like what you seek, thats the beauty of chance. Try these rules and you will see what I mean...

   1:startshape mondrian
2:background {b -1}
4:rule mondrian{
5: reflect{}
8:rule reflect{
9: rectangle {s 30 hue 360}
10: rectangle {x 30 s 20 30 flip 90 hue 60}
11: rectangle {y 25 flip 180 s 30 15 hue -300 }
12: }
14:rule rectangle {
15: SQUARE { sat 1 b 1 }
18:rule reflect .5 {}

My fractional empty reflect rule has high probability just to emphasise the point, also is no longer required to avoid the infinite recursion when I first introduced it.
These experiments convinced me that image reflection is not really possible (requires context) in context free. I also played with a python script that converts images to cfdg rules, which was a bit of fun, but be warned you end up with masses of rules and very big cfdg file.

Monday, 22 June 2009

Context Free For Little People

A fellow traveller on the mass writing project, came up with an interesting little application in processing "Cross Stitch for Little People" which featured a multi button input to choose colors. I had this wild thought what about producing a generator for context free that could be used by children? First thing I wanted to do was get all the colors out in a grid (PS if ever get to implementation stage it will likely to be python/ruby).

Heres the swatch I produced, and the rules that produced it. It features simple and complex looping in context free.

   1:startshape swatch
3:rule swatch {
4: 19 * {h 1 x 1.5} {
5: 19 *{ h 19 y 1.5} SQUARE {sat 1 b 1}
6: }

Here is a variant to give slight 3d look

   1:startshape swatch
2:background{b -1}
4:rule swatch{
5: gradient {b 1}
6: 1 * {size 0.95} gradient {x 0.2 y -0.2 b 0.5}
9:rule gradient {
10: 19 * {h 1 x 1.5} {
11: 19 *{ h 19 y 1.5} SQUARE {size 1 1 sat 1}
12: }

Exploring the influence of saturation and brightness in cfdg

   1:startshape colours
2:background{b -1} // looks better on dark background
3:rule colours{
4: swatch{b 1 sat 1} // full saturation full brightness
5: swatch{x 20 b 1 sat 0.7}
6: swatch{x 40 b 1 sat 0.4}
7: swatch{y -20 b 0.5 sat 1}
8: swatch{y -20 x 20 b 0.5 sat 0.7}
9: swatch{y -20 x 40 b 0.5 sat 0.4} //reduced brightness and saturation
12:rule swatch {
13: 19 * {h 1 x 1} {
14: 19 *{ h 19 y 1} SQUARE {}
15: }

There probably ought be a rule a against it but you can nest your nested loops to create quite a structure:

   1:startshape colours
3:rule colours{
4: swatch{b 1.3 sat 1.3} // start full + 0.3 hack
7:rule swatch{ // decrement saturation and brightness on loops
8: 3 * {x 19 sat -0.3}{
9: 2 * {y -19 b -0.3} grid{}
10: }
13:rule grid { // increment hue on loop
14: 19 * {h 1 x 1} {
15: 19 *{ h 19 y -1} SQUARE {}
16: }

Friday, 19 June 2009

Just Do It Style of Art

Taking the unpromising rule from my previous example add another recursive rule with a bit of x and y displacement and wow! I didn't see that coming, something a bit astronomical Large Magellanic cloud? lazydog will have a name for it:-

heres the code:

startshape iris
background {b -1 }
rule iris {
draw{ hue 180 sat .5 }

rule draw {
CIRCLE{ b +1 hue 200}
SQUARE{s .5 b +1 x 2}
draw{r 10 s +1 hue -1 x +.2}

rule draw {
draw{x 1 y 1}

// ensure we terminate
rule draw .0001{}

Avoiding Inifinite Recursions

It seems the usual way to avoid infinite recursions in context free art is to ensure that elements in your drawing tend toward zero size. Another perhaps less subtle way is make use of the weighting and have a low probability outcome as an empty rule as I have done here:-

startshape iris
background {b -1 }
rule iris {
draw{ hue 180 sat .5 }

rule draw {
CIRCLE{ b +1 hue 200}
SQUARE{s .5 b +1 x 2}
draw{r 10 s +1 hue -1 x +.2}
// ensure we terminate
rule draw .0001{}

Without the low probability rule you can watch the image getting bigger, and at some stage intermediate results are saved to file and so it goes on until you run out of memory.

Thursday, 18 June 2009

Context Free 'theory' tutorial with a processing outcome

For those of us on the processing/context free journey (that's probably just me and lazydog) there is an interesting tutorial by Adam Parish, where he presents a grammar parser written in java, that spits out a licorice allsorts, from an 'improbable' English sentence "the dog lusts after the cat" from running "java ContextFree < test.grammar" (make sure you run it a few times) to a valid processing file from "java PDEGenerator", its a lot of fun I urge you to try it out.
One of the more interesting of the generated processing code was as follows:-
   1:size(512, 512);
5:fill(0, 0, 240, 32);
7:rect(0, 0, 500, 500);
9:translate(-125, 0);
11:rect(0, 0, 500, 500);
14:translate(125, 0);
16:rect(0, 0, 500, 500);
18:translate(-125, 0);
20:rect(0, 0, 500, 500);
22:rect(0, 0, 500, 500);
24:ellipse(0, 0, 500, 500);
27:translate(125, 0);
29:rect(0, 0, 500, 500);
31:ellipse(0, 0, 500, 500);


PS: it seems as though "Dan Shiffman" also covers some relevant areas (l-systems) in one of his tutorials.

Tuesday, 16 June 2009

An Interesting Place To Start

Theres an old joke in these parts, (but probably more widely known) which concerns a stranger asking for directions who gets the unhelpful reply from a local 'if I wanted to go to where you wanted to go, I wouldn't start from here...'
I've just been doing a bit of reading around about context free, and context free grammars, and if you are not a computer scientist and I'm not, it's surprising where it could take you. Processing might get you back to re-reading your old Maths text books to create some art, context free could take you a lot deeper into computing theory from Turing machines to compression algorithms. However you could just make use of the tools to produce some neat art. Here is a quote that goes someway to describing how context free works:

"In Context Free, the only two terminals are the shapes CIRCLE and SQUARE. Given a starting shape, the program keeps expanding shapes that have rules until all that is left are terminal shapes, which are then drawn. In essence, the rendered images are legal sentences in the language described by the rules file!"

Another illustration of just how simple elegant rules
can be used to produce something fabulous, together with an explanation of how it works, which is why I've just given the link for you to follow.

Where did all this context free art stuff come from, well apparently the graphical stuff started as an offshoot to Chris Coynes automatic computer science paper writing project (that apparently fooled some review panels). At some stage Mountain View Mark and Mountain View John (Mark Lentczner and John Horigan) picked it up and ran with it, but it is all a bit hazy, and Chris Coynes website is currently under construction but looks to be very promising...
There is a further offshoot concentrating on 3d structures structure synth that unfortunately I couldn't get to compile on linux. (Update July 2010 I have successfully compiled Version 1.0.0 ("Potemkin") on my new Linux box Kubuntu 10.04 on AMD 64 bit box with proprietary NVidia graphics driver)
And yet another implementation using javascript by Aza Raskin (that really works) download the code at it has some cool examples of context free art, that is rendered on the fly...
Includes Mtree, forest and many other demos. Usual caveat requires canvas, therefore use Firefox, Chrome or Opera, one day Microsoft will be history sooner the better...
Just take a look at what they are up to now
Demise of Microsoft could be sooner than I thought possible just check this out, the buggers deserve all they get I predict crashing stock prices....

Monday, 15 June 2009

Darrels Dreams

I enjoyed watching todays web cast, best bit was the Ira Greenberg story. I have to say I think Darrels boostrapped TMAs are a pretty whacky idea, down here in West Wales they would say he's been on the Waccy Baccy. In fact it brings to mind a general studies course I took at Surrey University back in the late 60's called "The Ethics of Social Change". Now we had some pretty radical ideas back then, but that was the 60's, including 'self assessment', 'meeting in the refectories instead of classrooms' etc. Interesting thing was for some reason members of a local seminary attended the course, but they played along with the idea of meeting in the refectories etc. The tutor chickened out on assesment in the end, and final assesment was based on an essay.

If like Don Quixote Darrel had been dreaming of windmills he ought check out this processing sketch at (google?), which has nice surprise when you click your mouse over it, gently does it but more than once.

Saturday, 13 June 2009

Combining Two CFDG files

One of the examples that you get with context free code distribution is demo1.cfdg, I would have called it trees, now there is another little example I found which has grass, adding grass to trees is not as simple as you might think. This sent me off in search of tutorials again, there's not much out there. However an amazing wrinkle concerns how you introduce random behaviour into your context free rules. Essentially you give the program more than one rule for a given shape, it will then randomly choose one of those rules. To do this efficiently you should make use of the principles of binary search. Say for example you want to randomly choose value between 0 and 360 (angle/color). Then you make your first split 0 or 180, the second 0 or 90 and so on you know the sort of thing, well before long you've got it covered, well in truth a lot of programs do this sort of thing for you, but here you need to be explicit (it also saves writing 0 to 360 rules). For the mac user you can get an omnigraffle (whatever that is) or for the rest of us pdf reference card at
that explains context free syntax in a 'nutshell'.

Anyway finally I managed to combine the two files, see what you think. If you run the rules yourself and don't like what you get run them again, the trees are random (by the way in terse syntax r == rotate not random as I first thought).

   1:startshape forest // modified martinstannard grass.cfdg && forest == demo1.cfdg
3:background {hue 200 sat 0.5}
4:rule forest {
5: seed {s 400 800}
6: seed {x -20}
7: seed {x -40}
8: world{h 120 sat 1 b 0 r 90 }
9: world{h 100 sat 1 b 0 r 90 }
10: world{h 80 sat 1 b 0 r 90 }
13:rule seed {branch {}}
14:rule seed {branch {r 1}}
15:rule seed {branch {r -1}}
16:rule seed {branch {r 2}}
17:rule seed {branch {r -2}}
18:rule seed {fork {}}
20:rule branch {leftbranch {flip 90}}
21:rule branch {leftbranch {}}
23:rule leftbranch 4 {block {} leftbranch {y 0.885 r 0.1 s 0.99}}
24:rule leftbranch 4 {block {} leftbranch {y 0.885 r 0.2 s 0.99}}
25:rule leftbranch {block {} leftbranch {y 0.885 r 4 s 0.99}}
26:rule leftbranch {block {} fork {}}
29:rule block {
30: SQUARE {r 1}
31: SQUARE {r -1}
32: SQUARE {}
35:rule fork {
36: branch { }
37: branch {s 0.5 r 40}
39:rule fork {
40: branch { }
41: branch {s 0.5 r -40}
43:rule fork {
44: branch {s 0.5 r -20}
45: branch { }
47:rule fork {
48: branch {s 0.7 y 0.1 r 20}
49: branch {s 0.7 y 0.1 r -20}
52:rule world
54: 800*{y 1 } blade{ sat 0.2 b 0.5}
57:rule blade 25
59: SQUARE{}
60: blade{x 0.95 r -2 s 0.98 }
63:rule blade 18
65: SQUARE{}
66: blade{x 0.90 r 1 s 0.97 b 0.1 }
69:rule blade 16
71: SQUARE{}
72: blade{x 0.90 r 2 s 0.93 b 0.1 }
75:rule blade
77: SQUARE{}

One thing I read about context free is that the program is unlikely to fail on error, if there are ambiguous commands, the program will just follow one. SQUARE and CIRCLE are the big built in features, infinite recursion is allowed so long as results tend to zero....
I don't know that there are any strict conventions on case so I've used lowercase for non built in rules.

Click on image to see the picture properly.

I'm missing radians

It seems positevly old school to work in degrees, but that's how it seems to be in context free.
Really simple rotation example:-

 2 startshape foo 
 3 background {sat 0.35}
 4 rule foo{
 5 box{ rotate 45 } 
 6 }
 8 path box {
 9     MOVETO{x 0.5 y 0.5}
10     LINETO{x -0.5 y 0.5}
11     LINETO{x -0.5 y -0.5}
12     LINETO{x 0.5 y -0.5}
13     CLOSEPOLY{}     // go back to (0.5, 0.5) and close the path
14     STROKE{}        // draw a line on the path using the default line width (10%)
15 }

Easy peasy

Looks a bit similar to processings beginShape/endShape with a pile of vertices between. Useful command line options are -V required to specify svg output, -h and -w to specify height and width default is 500 x 500, -s sets both height and width -c will crop to size to image.

Browser Tool

Have you wanted to just scroll through to the next page (of a blog to older posts) or a google search (to the next line of hits). If so you might like to try the AutoPager plugin for firefox (even works on 3.5 beta and greater). Can be trained/disabled per site.

Friday, 12 June 2009

Including other files in context free

There is some original work that exemplifies what it is to include another rule file in your art. The original work was gamma.cfdg calling gammabet.cfdg. Heres my calling code which calls a modified gammabet.cfdg.
What should strike you immediately is that these rules know nothing about the code called, its bit like this is the ribosome doing the processing and the called code is the messenger RNA, which is read out as protein (png or svg file). However to use the funky alphabet effectively, we really need to be able to sort out letter placing/spacing which to my "limited" knowledge has to be done manually. If my memory serves me correctly, something similar has been done in processing.js where the letter width is calculated on the fly. May'be this is where ruby-processing could come to the rescue, but hey I'm an utra NOOBIE with context free I might have got it wrong?

   1:startshape  GAMMA
2:include gammabet.cfdg // file to include
3:background {hue 30 sat 1 b -1}
5:rule CIR 3{CIR{hue -30}}
6:rule CIR 1{CIR{}CIR{s .8}}
7:rule CIR .2{CIR{s 1.5}}
8:rule CIR 1{CIRCLE{b 1 sat 1 hue -30}}
9:rule CIR .3{CIRCLE{}}

To give:

In the absence of tutorial/book to hand, I'm just hacking bits of code to learn the rules (which are subject to change at any event working towards version 3.0 (like python 3.0, not like the once mythical perl 6.0 you might hope)).
PS if you want a transparent backround it couldn't be easier replace the third line with

background {a -1}

could it be any more terse to specify no alpha?
This file also demonstrates the weight (or probability) parameter of a rule. Here we have group of rules with the same name, without any weighting factor there would be an equal probability that each version would be followed. But here the are different weights assigned to each of the CIR rules.
Why am I brought back to thinking about the Monty Hall paradox? I had great fun with that at the swimming pool last year no-one believed me at first, you know the one about the donkey and the three doors? That's when a good grounding in statistics puts you ahead of the other man, they'll believe any sort of rubbish, I saw through Gordon Brown years ago, god help us all now, he's trashed the value of our pension, and the kids have a mountain of debt to pay off.

Another Nautilus? Spiral

Something I modified/stole off the web was done using triangles I think it looks better with circles (also I've used longform for rotate and size rather than r & s)


startshape START

rule START
   SPIRAL{rotate 140}
   SHADOW{x 0.08 y -0.08 rotate 140 sat 0.2 b 0.4 alpha -0.96 z -1// slight offset to shadow

        CIRCLE{x 0.02 y 0.02}
        CIRCLE{x 0.04 y 0.04}
        CIRCLE{sat 0.4 rotate 1.0 b 1.0 size 0.95}
        CIRCLE{sat 0.2 rotate 1.0 b 1.0 size 0.90}
        CIRCLE{sat 0.1 rotate 1.0 b 1.0 size 0.75}
        SPIRAL[hue 6.4 y 0.578 rotate 10.0 y -0.578 size 0.98]

        CIRCLE{x 0.02 y 0.02}
        CIRCLE{x 0.04 y 0.04}
        CIRCLE{sat 0.5 rotate 1.0 b 1.0 size 0.95}
        CIRCLE{sat 0.4 rotate 1.0 b 1.0 size 0.90}
        CIRCLE{sat 0.2 rotate 1.0 b 1.0 size 0.75}
        SPIRAL[hue -6.4 y 0.578 rotate 10.0 y -0.578 size 0.98 z 0.03]

        CIRCLE{x 0.02 y 0.02}
        CIRCLE{x 0.04 y 0.04}
        SHADOW[y 0.578 rotate 10.0 y -0.578 size 0.98]

Rotating in context free

Just starting to experiment with context free rules interesting to to see what adding a bit of rotation does:-

 1 startshape sun
 3 rule sun {
 4         5 * { r (360/5) } ray { h 0 b 1 sat 1 |h 60 }
 5 }
 7 rule ray {
 8         CIRCLE { }
 9         ray { y .1 r 1 s .965 h .05| }
10 }
12 rule ray 0.15 {
13         ray { flip 90 }
14 }

Here is the result:

for the benefit of lazydog:

startshape sun

background{b -1}

rule sun {
10 * { r (360/5) } ray { h 0 b 1 sat 1 |h 60 }

rule ray {
ray { y .1 r 1 s .965 h .05| }

rule ray 0.15 {
ray { rotate 90 }

Wednesday, 10 June 2009

ContextFree yet another drawing tool

Just compiled the ContextFree cpp source to try it out, I just came accross it searching for shell shapes, yet another tool to create images. Syntax seems very simple, possible svg or png output.
I also remembered that Jeremy Ashkenas of ruby processing had mentioned it so I did a quick search and this what I found where he is attempting include the libraries to make them available via ruby-processing (essentially it is a DSL exercise, and rubys good for that).
Here is a rule file I hacked up earlier, based on some old rule file from the context free crowd (it needed a few mods to run as they've obviously modified the syntax since version 1.2 June 2005 current version is 2.2). Result is pretty impressive eh, syntax highlighting for vim is using colortype 'delek'!!!

 1 startshape GarishRainbow 
 3 rule rainbow {
 4    // this draws the actual bow, as a full circle
 5    CIRCLE {}
 6    // this chops off the bottom half to make the "bow"
 7    // rotate the color and fade to white
 8    rainbow {s 0.99 hue 10 sat -0.04}
 9    SQUARE { sat -1 y -0.5 }
10 }
12 rule GarishRainbow {
13    rainbow {x 250 y -100 b 1 sat 1 }

Produces Garish Rainbow as png (or svg file)

Tuesday, 9 June 2009

Processing.js Interactive Application

Implementing processing applet as javascript on the web and embedding it in your blog, could this be what Darrel was looking for..............

Code limitations as for processing.js with many unsupported functions, which is why it took me some time to get my nautilus sketch to run. The curve function seems to be unsupported though it is not specifically listed I have got round the lack of cot by using the reciprocal of javascript Math.tan function, and a lack of exp function by using Math.exp() also supported in javascript.

HasCanvas is a tool for creating and sharing Processing sketches and runs on John Resig’s Processing.js.

Friday, 5 June 2009

The Nature of Code

Like Dickens Pickwick papers Dan Shiffman is selling his new book in (draft form) cheap and cheerful chunks Chapter 1 vectors for 71p as a download.

Wednesday, 3 June 2009

A Smoother Nautilus Shape

For my chunk 42 I presented an approximate Nautilus shape using the vertex function, now I've finished that section I thought it would be nice to produce a more realistic shape, here is the processing code now using curveVertex and curve functions.

   1:// nautilus.pde
2:float A = 0.8f;
3:float B = 1.4f;
4:ArrayList pvect;
6:float x, y, x0, y0, x1, y1, x2, y2, x3, y3;
7:void setup(){
8: size(300, 300);
9: pvect = new ArrayList(42); // 42 the answer to the ultimate question
10: PVector tmp;
11: PVector tmp0;
12: PVector tmp1;
13: PVector tmp2;
14: PVector tmp3;
16: translate(width/2, height/3);
17: rotate(PI - QUARTER_PI);
18: smooth();
19: // Todo: draw curved septa (internal chamber walls)
20: background(255); // NB: looks neater if we draw the radial lines first
21: strokeWeight(1);
22: stroke(0, 0, 255);
24: for (int i = 0; i < 41; i++){
25: x = getX(i*A);
26: y = getY(i*A);
27: pvect.add(new PVector(x, y));
28: }
29: for (int z = 8; z < pvect.size() - 1; z++){ // note we start 8 segments in because...
30: tmp0 = (PVector)pvect.get(z + 1);
31: tmp1 = (PVector)pvect.get(z); // on curve
32: tmp2 = (PVector)pvect.get(z - 8); //on curve
33: tmp3 = (PVector)pvect.get(z - 7);
34: x0= tmp0.x;
35: y0 = tmp0.y;
36: x1= tmp1.x; // we would have negative increments otherwise
37: y1 = tmp1.y;
38: x2= tmp2.x;
39: y2 = tmp2.y;
40: x3= tmp3.x; // we would have negative increments otherwise
41: y3 = tmp3.y;
42: curveTightness(-0.8f);
43: curve( x0, y0, x1, y1, x2, y2, x3, y3); // draw the radial lines
44: }
45: strokeWeight(4);
46: stroke(255, 0, 0);
47: noFill();
48: curveTightness(0.0f);
49: beginShape(); // begin spiral 'shell' shape
50: for (int v = 0; v < pvect.size(); v ++){
51: tmp = (PVector)pvect.get(v);
52: curveVertex(tmp.x, tmp.y); // successive calls to curveVertex a variation on curve?
53: }
54: endShape();
55: saveFrame("nautilus.png");
58:float getX(float theta){
59: return A*cos(theta)*exp(theta/tan(B));
62:float getY(float theta){
63: return A*sin(theta)*exp(theta/tan(B));

Here is the smoother Nautilus:

Monday, 1 June 2009

Parametric Geometry (new library ANAR+)

Some quite sophisticated stuff, offers a bridge between processing and CAD environments:-
on the discourse


Artist Training

Back into the old post swim conversations with my artist friend 'Phil Sutton' today, unusually today we talked about art (normal fare is science/politics/philosophy).
He was bemoaning the quality of todays art teachers who have been trained by a generation of artists who were not taught 'drawing'. I agreed and suggested that drawing is part of seeing, and without that little wonder we get a lot of so-called conceptual art. Phil is a bit old school (from the Fauvist tradition), but the point about training the eye to see is well made. A lot of seeing is in the brain, the area which the eye really 'sees' is quite small the imagination/memory fills in much of the rest. What set us off down the art route today was talking about Gillian Wares blog (an old friend / ex student / occasional model). Where she has posted some photos following a recent visit to Phil. Here is an example:-

Which is an amazing model of Phil as a puppet (you should go to her blog to make the comparison of the artist and his puppet...


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