# Project generative design

**URL:** <https://discourse.processing.org/t/project-generative-design/15805>\
**Category:** Project Guidance\
**Created:** [November 25, 2019, 4:19pm UTC](https://discourse.processing.org/t/project-generative-design/15805 "2019-11-25T16:19:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcoo](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@marcoo](https://discourse.processing.org/u/marcoo)\
**Post date:** [November 25, 2019, 4:19pm UTC](https://discourse.processing.org/t/project-generative-design/15805/1 "2019-11-25T16:19:19Z")

</div>

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 🙂

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6cec0460720492f01e80bfd8bc04ea02c26cfaa4.jpeg)

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 25, 2019, 6:37pm UTC](https://discourse.processing.org/t/project-generative-design/15805/2 "2019-11-25T18:37:25Z")

</div>

I just couldn‘t resist trying it out.

```auto
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 😅

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.

---

<div class="post-metadata">

**Author:** ![marcoo](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@marcoo](https://discourse.processing.org/u/marcoo)\
**Post date:** [December 1, 2019, 7:25pm UTC](https://discourse.processing.org/t/project-generative-design/15805/3 "2019-12-01T19:25:58Z")

</div>

thanks for the help, i appreciate 🙂