Start small end big or start big and end small?

I have reached a point of acceptance that I cannot keep up with the Creative Coding course and that what I need to do is go at my own pace and build in steps on knowledge. It is good to see what is possible and the coding examples that are provided have a level of complexity that is stretching and shows what can be achieved. But I am finding I need to learn by building block and reinforcing the elements without having that overwhelmed and confused feeling dominating.

So I am reading through all the material and watching the videos and having a look in the discussions, but not keeping up with the coding exercises.

Instead I have been looking online for sources of inspiration. I like the inspiration on thedotisblack.tumblr.com (David Mrugala). I came across this via Twitter by searching for #generative. I have a feeling that it might also be one of the sources in the course but I can’t just find my way back to that (which is one of the things about the way the material is laid out that is not so useful – as a general comment about the futurelearn platform). In particular this image caught my eye as one to have a go at reproducing from scratch.

http://thedotisblack.tumblr.com/post/118100581720/2015421134921frame0002-made-with-code

It seems to me that taking a generated image and trying to reproduce it is like still life drawing. You need to look closely. You need to translate what you can see into lines and blocks of colour. You need to consider the geometry.

I started with drawing a dividing line between the top and the bottom that had a margin both sides then working out what the division distance needed to be to calculate the centre points of the circles/arcs and the diameters. At first I thought that there were circles with arcs over the top, but then I decided the image is constructed of arcs above and below.

It seems clear that there is some transparency of the fill that creates darker shades where the arcs overlap, but getting the exact hue and saturation eluded me. But that is OK. I reached an approximation and the aim for me of the exercise was not to copy the piece but to test myself on thinking about how to do the code.

One thing I didn’t think about at first was whether it mattered if I started with the smallest diameter arcs and increased or started with the largest and decreased. My initial attempts involved starting with the smallest but then I realised if you are laying a lighter transparent colour on top of a darker transparent colour, it will make the colour that is underneath lighter. So that is actually good lesson to learn that where you want to have a gradiation of colours, do whatever is going to be lightest first and then go darker on top.

The images that are not tumblr embeds are those that I made. The code is for the nearest approximation.

The images I made

Almost there but the colours are not quite right

Almost there but the colours are not quite right

Very early attempt, started small and increased in size. Colours too bright.

Very early attempt, started small and increased in size. Colours too bright.

Trying out with different hues

Trying out with different hues

Another with different colour scheme and brightness/saturation starting points.

Another with different colour scheme and brightness/saturation starting points.

Another one that s close but too dark

Another one that s close but too dark

Processing Code

/*
 * Creative coding - self teaching shapes
 * CC-BY 4.0 Karen Cropper
 * August 2015
 * 
 * Trying to reproduce concentric arcs from an image
 * from thedotisblack.tumblr.com
 *
 */
 
 // set up
 void setup(){
 size(600,600);
 
 //noLoop();
 
 colorMode(HSB, 360,100,100);
 
 background(0,0,92); 
 
 float xNum = 6; // number points initially in x 
 
 float margin = width/5;
 
 float xDist = (width - (2 * margin))/(xNum);
 
 int hueRed = 350;
 int satRed = 100;
 int briRed = 60;
 int tranRed = 90;
 
 int hueBlue = 195;
 int satBlue = 88;
 int briBlue = 60;
 int tranBlue = 50;
 
 
 // draw a reference line then comment out when don't need anymore
 //stroke(0);
 //line(margin, height/2, width-margin, height/2);

 float xArc = width/2; //margin + (xDist/2);
 float y = height/2;
 float diamArc = xDist*xNum; // start with biggest
 
     for (int i=0; i<(xNum); i++) {
         noStroke(); 
         
         // bottom blue arcs 
         fill(hueBlue,satBlue,briBlue,tranBlue);
         arc(xArc,y,diamArc,diamArc,0,PI);
         arc(width-xArc,y,diamArc,diamArc,0,PI);
         
         // top red arcs
         fill(hueRed,satRed,briRed,tranRed);
         arc(xArc,y,diamArc,diamArc,PI,2*PI);
         
         diamArc -= xDist;
         xArc -= xDist/2;
         
	//incremental changes between arcs no change to hue
           //hueRed = 350;
           satRed += 5;
           briRed -= 5;
           tranRed += 1;
           
           //hueBlue = 200;
           satBlue -= 10;
           briBlue -= 15;
           tranBlue += 1;
     
     } // end of i
 
 }// end of set up
 
 void draw(){   
   
     // saving image - trying out the #### numbering
     String humanName = "shapes"; // change this to a meaningful name
     String fileName = humanName+"_####.jpg";
     if (keyPressed == true && key=='s') {
     println("s has been pressed");

     // this saves every time you run
     saveFrame(fileName); 
     println("The image has been saved to "+fileName);  
     }// end of save if
   
   
 }// end of draw

Other Images on the same theme by David Mrugala from thedotisblack

Others from thedotisblack on the same geometric idea that I didn’t see until after my attempts:

http://thedotisblack.tumblr.com/post/118000157225/2015421134515frame0002-made-with-code

http://thedotisblack.tumblr.com/post/117811977525/201542113581frame0002-made-with-code

http://thedotisblack.tumblr.com/post/117079789265/2015421134451frame0002-made-with-processing

http://thedotisblack.tumblr.com/post/117521904630/2015421135011frame0002b-made-with-code

Other lessons from this exercise

For saving the images I added the if keypressed == true and that it was s, and for the filename used #### instead of adding a date element. I imagined that the #### would add a sequential number, but I couldn’t make any sense of the numbers that I ended up with. They certainly were not sequential. I wondered if random? It would seem from https://processing.org/reference/saveFrame_.html that it is the taking the frame count, so I am not sure that is actually a useful number for sequencing of files and will revert to getting using a date code.

Twitter Correspondence with @DavidMrugala


dotisblacktweetlarge

949 Total Views 2 Views Today

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *