• fullscreen
  • Methods.pde
  • silkRock.pde
  • sketch_oct30a.pde
  • /*Some auxiliar stuff here...*/
    
    //This method returns a PGraphics with a polar degraded background
    PGraphics degradedBackground (int W, int H, String renderingMode, int X, int Y,float f){ 
          PGraphics pg = createGraphics (W, H, renderingMode);
          pg.beginDraw();
            pg.smooth();
            for (int i=0,x,y; ++i<pg.width*pg.height;) {
              pg.set (x=i%pg.width,
                      y=i/pg.width, 
                      ( (0xFF - floor(dist(x,y,X,Y)*f)) * 0x01010101 ^ 0xFFFF0000 ) 
                     );
            }
          pg.endDraw();
          return pg;
      } 
      
    //Overloaded noise method  
    float noise (PVector or,int n,float f, int N) {
      return N * ( noise(or.x*f, or.y*f, n)-.5 );
    }
    
    //Random int method
    int randomInt (int n){
      return int(random(n));  
    }
    
    //To reset the settings
    void mousePressed() {
      background (bg);
      counter= 0;
      noiseDetail (randomInt(8), random(.5,.75));
    }
    
    /*silkRock, Ale González. Dominio Púbico
    Tweaking on silkRoad: http://www.openprocessing.org/sketch/44465*/
    
    final int 
      W   = 700,            
      H   = 700,
      C_X = W/2,                  // Center of the drawing and degraded background origin
      C_Y = H/2;
    final float     
      STEPS = 4e3,                // Number of steps around the circle
      STEP  = TWO_PI/STEPS,       // Base angle of each step 
      R = W * .65;                // Base radius of the shape
    
    int 
      counter;
    float [] 
      xLUT,
      yLUT;
    PGraphics 
      bg;
     
    //
     
    void setup(){
      //general settings
      size (W, H, P2D);
      background ( bg= degradedBackground (W, H, P2D, C_X, C_Y, .25) );
      colorMode (HSB,1);
      smooth ();
      noFill ();
      strokeWeight (3);
      noiseSeed (256);
      noiseDetail (4,.6);
      
      //Lookup tables
      int steps = (int) STEPS;
      xLUT= new float [steps];
      yLUT= new float [steps];
      float iStep;
      for (int i=0; i<steps; i++){
        iStep   = i * STEP;
        xLUT[i] = C_X + R * cos (iStep);
        yLUT[i] = C_Y + R * sin (iStep); 
      }
    }
    
    //
     
    void draw() { 
      if (++counter < STEPS ) generateRoad (C_X, C_Y, xLUT[counter], yLUT[counter], 75);
    }
     
    void generateRoad (float x1,float y1,float x2,float y2,int n){
      //interpolate a bunch of n points between p1 and p2
      PVector[] ps= new PVector [n];
      ps[0]= new PVector (x1,y1);
      for (int i=1; i<ps.length; i++){
         ps[i]= new PVector ( 
                  lerp (ps[i-1].x, x2, 1./n), 
                  lerp (ps[i-1].y, y2, 1./n) 
                );
      }
      beginShape();
        //First vertex is fixed to the center
        curveVertex (ps[0].x, ps[0].y);
        //Rest of vertices, modified by a noise displacement
        for (int i=0; i<ps.length; i++){
          //colors degraded per vertex · only P2D or P3D 
          stroke ( .1, 1, noise (counter%STEPS*.01, i*.5) );
          curveVertex ( 
             ps[i].x + noise (ps[i], 0, .01, 100), 
             ps[i].y + noise (ps[i], 1, .01, 100) 
          );
        }
      endShape();
    }
    
    //silkRoad//Alejandro González//60rpm.tv//Dominio Púbico
    
    int c,S=700; float o=S/2,r=S*.75,a,k=3e3,h,p=TWO_PI/k; PGraphics bg;
    
    //reset function
    void r() {c=0;a=0;h=random(1);background(bg);}
    
    void setup(){
      //for a nicer display we'll use a degraded background, loaded in a PGraphics
      bg=createGraphics(S,S,P2D);
        bg.beginDraw();
        //set a gray value, depending on distance to center
        for(int i=0;++i<sq(S);) bg.set(i%S,i/S,color(255-(dist(i%S,i/S,S/2,S/2)/6)));
        bg.endDraw();
      //general settings
      size(S,S,P2D);colorMode(HSB,1);smooth();noFill();strokeWeight(3);r();
    }
    
    void draw() { if(c++<=k) generate(o,o,o+(r*cos(a)),o+(r*sin(a+=p)),25);}
    
    void generate (float x1,float y1,float x2,float y2,int n){
      //interpolate a bunch of n points between p1 and p2
      PVector[] ps=new PVector[n];
      ps[0]=new PVector(x1,y1);
      for (int i=1;i<ps.length;i++){ 
         ps[i]=new PVector(lerp(ps[i-1].x,x2,1./n),lerp(ps[i-1].y,y2,1./n));
      }
      stroke(h,.8,noise(c%k*.01),.8); 
      beginShape();
      curveVertex(ps[0].x,ps[0].y);
      //and shift the location of that points with a noise displacement
      for (int i=0;i<ps.length;i++){
         curveVertex(ps[i].x+n(ps[i],0,.01),ps[i].y+n(ps[i],1,.01));
      }
      endShape();
    }
    
    //noise function
    float n(PVector or,int n,float f){return 100*(noise(or.x*f,or.y*f,n)-.5);}
    
    //reset the settings
    void mousePressed(){r();}
    

    code

    tweaks (0)

    about this sketch

    This sketch is running as Java applet, exported from Processing.

    license

    advertisement

    ale plus+

    silkRock

    Add to Faves Me Likey@! 25
    You must login/register to add this sketch to your favorites.

    A graphic generator, based on the polar displacement of a curve shifted and coloured by perlin noise.

    Interaction:
    -Click to reset the shape.

    Note:
    This code is an update of former SilkRoad. Changes:
    - Reset method improved (it didn't work properly).
    - Implementation of lookup tables to improve the performance.
    - New output.

    Andy
    3 Feb 2012
    Hi,

    I really love your work :)

    I'm wondering if you could tell me if it's possible to do this kind of background with the OPENGL renderer. I understand createGraphics is not available.

    Many thanks!
    ale plus+
    4 Feb 2012
    Hi Andy, thanks.
    I think you could post this kind of doubts in the processing forum, there they´ll be more useful for a lot of people and you´ll have the chance of being answered by people awesomely talented... :-)
    You can create buffered offscreen pictures with the GLGraphics library and its class GLGraphicsOffScreen. Try this sample:

    import processing.opengl.*;
    import codeanticode.glgraphics.*;

    int c,S=700;
    GLGraphicsOffScreen bg;
    PImage b;

    void setup(){
    size(S,S,GLConstants.GLGRAPHICS);
    bg= new GLGraphicsOffScreen (this,width,height);
    bg.beginDraw();
    for(int i=0;i&lt;sq(S);i++) {
    bg.stroke((255-round(dist(i%S,i/S,S/2,S/2)*.1))*0x01010101);
    bg.point(i%S,i/S);
    }
    bg.endDraw();
    image(bg.getTexture(),0,0);
    }

    void draw() {}
    Andy
    6 Feb 2012
    Hi Ale,

    Thanks for the response!

    I can't get this to run - however I'm sure something has to be entered in draw()(?)

    GLGraphics VERSION: 0.9.9.1
    GL_ARB_geometry_shader4 extension not available
    GL_ARB_texture_float extension not available
    GL_EXT_framebuffer_multisample extension not available
    Frame buffer is incomplete (GL_FRAMEBUFFER_UNSUPPORTED_EXT)
    OpenGL error 1280 at top beginDraw(): invalid enumerant
    Frame buffer is incomplete (GL_FRAMEBUFFER_UNSUPPORTED_EXT)
    OpenGL error 1286 at top endDraw(): invalid framebuffer operation
    ale plus+
    14 Feb 2012
    Sorry Andy, I was busy! :-)
    As I managed to do it, I'm wondering what OS and processing and GLGraphics versions are you using...
    And I insist, post it on Processing forum... it's the best place for processing doubts! ;-)
    Andy
    20 Feb 2012
    Hi Ale,

    I'm having some trouble with OPENGL not displaying any visual at the moment. I'll need to get that fixed first then will post on the forum. Many thanks
    amazing
    ale plus+
    7 Jul 2012
    Thanks, Brandon.
    R.A. Robertson
    4 Sep 2012
    Really beautiful.
    I especially like the seamless closure.
    ale plus+
    11 Sep 2012
    Thanks RA!
    Noise is magical...
    You need to login/register to comment.