Project generative design

Processing Project Guidance
1

hello again. I am starting a new project development about generative design on processing. The idea is produce a generative silhouette of an image. More detailed, i’m trying to represent dynamically spider man “webs” on silhouette of the villain pics. ( i want simulate real webs, not the illustrated ones, that children draw).

what i saw about that on internet to start was this example on openprocessing.
I hopw u can give me some advice :slight_smile:

image
image1912×896 289 KB

1 Like
2

I just couldn‘t resist trying it out.

Net[] p;

void setup() {
   size(screen.width, screen.height);
   frameRate(10);
   p = new Net[20];
   for (int i = 0; i < p.length; i++) {
      
      float rndX = 180 + randomGaussian() * 20;
      float rndY = 300 + randomGaussian() * 20;
      
      p[i] = new Net(rndX, rndY, 10);
   }
}

void draw() {
   background(255);
   stroke(0,20);
   for (int i = 0; i < p.length; i++) {
      p[i].noisePos();
      p[i].display();
   }
}

class Net {
   PVector pos;
   PVector origin;
   float[] dirs;
   float linesNr;
   float s;
   float secondNoisePos;
   
   final float MINL = 5;
   final float MAXL = 9;
   
   Net(float x, float y, float s_) {
      secondNoisePos = random(0,10);
      origin = new PVector(x, y);
      pos = new PVector(x, y);
      s = s_;
      linesNr = int(random(MINL, MAXL));
      dirs = new float[linesNr];
      for (int i = 0; i < dirs.length; i++) {
         dirs[i] = (i+1) * (2*PI / dirs.length) + random(0, PI / dirs.length);
      }
   }
   
   void noisePos() {
      pos.set(origin.x + noise(frameCount/50,secondNoisePos)*300-150, origin.y + noise(secondNoisePos, frameCount/50)*300-150);
   }
   
   void display() {
      for (int i = 0; i < dirs.length-1; i++) {
         
         line(pos.x, pos.y, pos.x + sin(dirs[i]) * (MAXL) * s, pos.y + cos(dirs[i]) * (MAXL) * s);
         
         for (int j = 0; j < MAXL; j++) {
            line(pos.x+sin(dirs[i])*j* s, pos.y+cos(dirs[i])*j* s, pos.x+sin(dirs[i+1])*j* s, pos.y+cos(dirs[i+1])*j* s);
         }
      }
      
      line(pos.x, pos.y, pos.x + sin(dirs[dirs.length-1]) * (MAXL) * s, pos.y + cos(dirs[dirs.length-1]) * (MAXL) * s);
      
      for (int j = 0; j < MAXL; j++) {
         
         line(pos.x+sin(dirs[dirs.length-1])*j*s, pos.y+cos(dirs[dirs.length-1])*j* s, pos.x+sin(dirs[0])*j* s, pos.y+cos(dirs[0])*j* s);
      }
   }
}

This is by no means perfect, but it was fun :sweat_smile:

As for how to make it resemble an image (that‘s what you wanted, right?) just use a black/White image as a probability for the position of a net (and maybe it’s size and stroke).

The darker, the more likely a net will be placed there. I couldn‘t do that, because i made this with my Phone and files don‘t really work here…

Edit : … i missed the „dynamic“ part… uhm… ok, then only set the random values once when you initialize the net and change some values over time with noise(). (position, size , direction of the „branches“)

And maybe also make the position of the horizontal lines (in between) relative to some values that specify the net, to make sure they change in size respectively and don‘t just change randomly (wouldn‘t Make much sense)…

Well, i hope this helps a bit…

Edit2 : i changed the Code to make it dynamic… though it‘s probably still not what you were looking for.

1 Like
3

thanks for the help, i appreciate :slight_smile:

1 Like