Don't overlap (random) ellipses

edited May 2017 in Questions about Code

How can I avoid random drawing shapes to overlap each other? And how can I apply a filter only to one set of shape (in the example of this code, to the one below, thath with random variables and fill(50)?

void setup() {
  size(600,600);
  smooth(8);
  background(50);
  ellipse(width/2,height/2,500,500);
}

void draw() {
float x=random(100,width-100);
float y=random(100,height-100);
float d=random(35,65);
  noStroke();
  fill(50);
  ellipse(x,y,d,d);
  stroke(50);
  fill(255);
  ellipse(x-10,y-10,d,d);
}
Tagged:

Answers

  • Can you (or someone else) apply the code of the other post to the code above? At this stage I have some "abstraction" issues. Thanks

  • I believe you have two questions in your post. You need to clarify what you mean with the filter and state that question as a separate question. Please, also make it as clear as possible.

    Related to your first question, you should consider watching Shiffman's video that is as part of one of the posts that cameyo provided. Did you watch it? Forum goers could implement the code here for you but you need to put an effort in implementing your part as well. For placing shapes in your sketch, what questions do you need to ask? (what questions need to be addressed?)

    1. How do I access previous shapes? Answer: You need to keep track of any inserted shape in your sketch aka. a container like an array or a list
    2. What happens when I fill all my sketch area with shapes?
    3. Are my shapes only ellipses? Other geometries?

    Kf

  • Yep, I saw the videos, and changed the name of the post, now is only one question. I'm ok with random fill, my problem is only the overlapping parts, so then the container of previous shape. The second video use p5.js (I think) for the "tutorial" and, by now, I'm finding it hard to "translate" one language to the other (even though they are obviously similar) and trying I did not get results (I obtain only a static circle, random drawing in the sketch). Obviusly my request to filling my code was only to try to understand the array and arraylist mechanism with something that I always know (in this case a simple "random fill" sketch). Maybe I only need more and more exercise (or a different study method). Thx for the answers!

  • If you share your code, you will get feedback of what is missing or what changes are needed to make it work. It is not trivial to do translation from js to java if you don't have some experience in both.

    This code below is from the previous link:

    Kf

    PShape ster, obj1, obj2; 
    float px; 
    float py;
    
    FloatList allXs;
    FloatList allYs;
    int shapeRadius=50;  //Assuming your shape is enclosed by a circle of this diameter for overlapping checking
    
    void setup() { 
      background(255); 
      size(700, 500, P2D); 
      frameRate(8);
    
      allXs=new FloatList();
      allYs=new FloatList();
    
      fill(255, 255, 0); 
      noStroke();
    
      // ster
      obj1= createShape(TRIANGLE, 0, 0, 25, -50, 50, 0); 
      obj2= createShape(TRIANGLE, 0, -35, 25, 15, 50, -35);
    
      //objecten aanmaken 
      ster =createShape(GROUP); 
      ster.addChild(obj1); 
      ster.addChild(obj2);
    }  
    
    
    void draw() {   
    
      boolean found=true;
    
      //THIS next while ensure placement happens only if not overlapping detected
      while (found==true) {   
        found=false;
        px= random(width); 
        py= random(height/2);
        for (int i=0;i<allXs.size();i++){
          float fnx=allXs.get(i);
          float fny=allYs.get(i);
    
          //  !!  Next line check if there is any overlap between current "about to be 
          //  !!  generated" shape and pre-existing shapes
          if (dist(fnx,fny,px,py)<shapeRadius){ found=true;}
        }    
      }
      allXs.append(px);
      allYs.append(py);
    
      shape (ster, px, py);
    }
    
  • Well, at least now my code start, but the ellipses continue to overlap. Where is my mistake?

    float x;
    float y;
    float d;
    
    FloatList allXs;
    FloatList allYs;
    
    void setup() {
    
      frameRate(8);
    
      background(255);
      size(500,500);
    
      allXs=new FloatList();
      allYs=new FloatList();
    
     }
    
    void draw() {
    
      boolean found=true;
    
      while(found==true) {
        found=false;
        x=random(width);
        y=random(height);
        d=random(35,65);
        for(int i=0;i<allXs.size();i++) {
          float fnx=allXs.get(i);
          float fny=allYs.get(i);
    
          if(dist(fnx,fny,x,y)<d) {
            found=true;
          }
        }
        allXs.append(x);
        allYs.append(y);
    
        fill(50);
        noStroke();
        ellipse(x,y,d,d);
    
        fill(255);
        stroke(50);
        ellipse(x-5,y-5,d,d);
      }
    }
    

    And also why the amount of ellpises drawn by frame increase until it stops?

  • Answer ✓

    In my post, all the shapes have the same size. In your code, each ellipse has a different diameter. Refer to line 28: d=random(35,65); but you don't keep track of this new value which is unique for each ellipse. The solution is to have a third floatList container keeping track of each ellipse's size. Then, you need to change line 33 to something like:

    float fnx=allXs.get(i);
    float fny=allYs.get(i);
    float fnd=....get(i);                               //Need a container to store radius
    if(dist(fnx,fny,x,y)<(d/2+fnd/2)) { ...   //WHERE >>fnd<< is analogous to fnx, fny. 
    

    Notice that because you are working with ellipses, the value use in this calculation for each ellipse should be half the size. The reason is that in default mode, ellipses are drawn using the specified size as its diameter. However, for distance calculations, you need the radius. Check the reference so you can clarify the nature of the parameters of these functions:

    https://processing.org/reference/ellipseMode_.html https://processing.org/reference/ellipse_.html

    Notice sooner or later somebody will suggest the usage of classes for your task. This would be a good challenge for you to do after you get the code working. If you don't have expereince with objects and classes, I recommend this tutorial: https://processing.org/tutorials/objects/

    Kf

  • edited May 2017

    Same result. Maybe I applied in an excessive mechanical way your coding advice:

    float x;
    float y;
    float d;
    
    FloatList allXs;
    FloatList allYs;
    FloatList allDs; //added
    
    void setup() {
    
      frameRate(8);
    
      background(255);
      size(500,500);
    
      allXs=new FloatList();
      allYs=new FloatList();
      allDs=new FloatList(); //added
    
     }
    
    void draw() {
    
      boolean found=true;
    
      while(found==true) {
        found=false;
        x=random(width);
        y=random(height);
        d=random(35,65);
        for(int i=0;i<allXs.size();i++) {
          float fnx=allXs.get(i);
          float fny=allYs.get(i);
          float fnd=allDs.get(i); //added
    
          if(dist(fnx,fny,x,y)<(d/2+fnd/2)) { //added
            found=true;
          }
        }
        allXs.append(x);
        allYs.append(y);
        allDs.append(d); //added
    
        fill(50);
        noStroke();
        ellipse(x,y,d,d);
    
        fill(255);
        stroke(50);
        ellipse(x-5,y-5,d,d);
      }
    }
    

    And yes, I soon will start with object and class (I'm following the order of Learning Processing by Shiffman, and The Coding Train videos, but before I would solve this curiosity).

  • Sorry, I didn't run your code before. You plot the ellipses after, not during, you load them into the arrays.

    Kf

    float x;
    float y;
    float d;
    
    FloatList allXs;
    FloatList allYs;
    FloatList allDs; //added
    
    void setup() {
    
      frameRate(8);
    
      background(255);
      size(500, 500);
    
      allXs=new FloatList();
      allYs=new FloatList();
      allDs=new FloatList(); //added
    }
    
    void draw() {
    
      boolean found=true;
    
      while (found==true) {
        found=false;
        x=random(width);
        y=random(height);
        d=random(35, 65);
        for (int i=0; i<allXs.size(); i++) {
          float fnx=allXs.get(i);
          float fny=allYs.get(i);
          float fnd=allDs.get(i); //added
    
          if (dist(fnx, fny, x, y)<(d/2+fnd/2)) { //added
            found=true;
          }
        }
        allXs.append(x);
        allYs.append(y);
        allDs.append(d); //added
      }
    
    
      for (int i=0; i<allXs.size(); i++) {
        float fnx=allXs.get(i);
        float fny=allYs.get(i);
        float fnd=allDs.get(i); //added
    
        fill(50);
        noStroke();
        ellipse(x, y, d, d);
    
        fill(255);
        stroke(50);
        ellipse(x-5, y-5, d, d);
      }
    }
    
  • edited May 2017

    Sorry, I click "no" by mistake on "Did this answer the question? Yes • No". But yes, actually that solve my curiosity. Thanks!

Sign In or Register to comment.