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

Wednesday, 12 November 2008

Art and The Golden Ratio

Next plan is to create a representation of a Mondrian painting (Composition in Red Yellow and Blue).

And to follow that by creating a golden spiral image:

Thus extending my theme of the golden ratio.
In my first quick and dirty go at the Mondrian, I used 'magic numbers' to define the rectangles sizes/positions. In the revised code presented here, all dimensions are relative to the 'baseLength' variable (width of the red rectangle). I am not sure about Mondrian and the golden ratio, but in my version the height of the window is in that ratio with the 'baseLength'.

   1:float PHI = (1 +sqrt(5))/2;
   2:int baseLength = 400; // alter this to scale image
   3:int stkwt = ceil (0.02333 * baseLength); // half stroke width
   4:int stkwt2 = stkwt * 2;
   5:int firstWidth = ceil(baseLength * 0.31);
   6:int secondWidth = ceil(baseLength * 0.69);
   7:int thirdWidth = baseLength - secondWidth - stkwt2;
   8:int windowHeight = ceil(baseLength * PHI);
   9:int redHeight = ceil(baseLength * 1.18); // height of red element
  10:int blueHeight = windowHeight - redHeight - stkwt2;
  11:int windowWidth = firstWidth + baseLength;
  12:String fake = "FAKE";
  13:PFont font;
  15:void setup(){
  16:  size(windowWidth, windowHeight);
  17:  strokeWeight(stkwt2);
  18:  rect(stkwt, stkwt, windowWidth - stkwt2, windowHeight - stkwt2);        
  19:  rect(stkwt, stkwt, firstWidth, windowHeight - stkwt2);
  20:  rect (stkwt, stkwt, firstWidth, firstWidth);
  21:  fill(255,0,0);
  22:  rect(firstWidth + stkwt, stkwt, baseLength - stkwt2, redHeight);
  23:  fill(255, 255, 255);        
  24:  rect(firstWidth + stkwt, redHeight +stkwt, secondWidth, blueHeight);
  25:  fill(255, 255, 3); //yellow
  26:  rect(firstWidth + secondWidth +  stkwt, redHeight + thirdWidth - stkwt, thirdWidth, blueHeight - thirdWidth +stkwt2);
  27:  fill(45, 15, 154);
  28:  rect (stkwt, redHeight +stkwt, firstWidth, blueHeight );  
  29:  font = createFont("Times New Roman", 96);  
  30:  textFont(font, 96);
  31:  fill(0);
  32:  smooth();
  33:  text(fake, 200, 200);      

Here is my fake 'Mondrian' which is very approximate.

I have also converted the above script to display without a jvm see link requires support for the 'canvas' html element, and apparently the "fake" text will currently only display if are using a firefox 3.0 browser, see later posting for how its done using javascript. Revision as of 23 December 2008, I am not the first person to demonstrate processing using a Mondrian example heres a link to a random example I have found.

Update 12 May 2009 I am getting closer to implementing the golden spiral check out my chunk 42 and or ruby-processing blogs

No comments:

Post a Comment


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