Dot density around a square

bporter88

Hello, I am trying to create a sketch in which you can place black squares with a key input and then hit a 'Populate' button to show a dot density around the placed squares. I want the density of dots to reduce the further away it gets from a black square. At the minute I am using nested for loops and probability areas surrounding the black square to say if the for loop is in a 20 pixel radius of the square then there is a 50% chance that a point will be placed at the location. (Please see attached script).

There are a couple of problems with this though. It isn't a gradual change from dense to less dense and also i am struggling to work out how to place more black squares with a key input and then get the sketch to run a similar density calculation on the placed squares......it's all a little confusing, and I'm not quite sure what i'm missing...

Any help would be much appreciated. Thanks

import controlP5.*;

int factoryX = 300;
int factoryY = 300;
int factoryW = 20;
int factoryH = 20;


float prob;

ControlP5 switchButton;
Button populate;

void setup() {
  size(600, 600);
  noStroke();
  smooth();

  switchButton = new ControlP5(this);
  populate = switchButton.addButton("Populate Map")
    .setPosition(50, 50)
      .setSize(100, 20)
        .setSwitch(true)
          .setOff();
}
void draw() {
  background(180);
  fill(0);
  rect(factoryX, factoryY, factoryW, factoryH);
  switchButton.draw();
  if (populate.booleanValue() == true) {
    for (int i=0; i<width; i++) {
      for (int j=0; j<height; j++) {
        float r = random(1);  
        if ((i > factoryX-20 && i<factoryX + factoryW+20) && (j>factoryY-20 && j<factoryY + factoryH+20)) {
          if ( r < 0.5) {
            stroke(#B200FF);
            point(i, j);
          }
        }
      }
    }
  }
  if (keyPressed) {
    if (key == 'f' || key == 'F') {
      rect(mouseX, mouseY, factoryW, factoryH);
    }
  }
}

bporter88

import controlP5.*;

int factoryX = 300;
int factoryY = 300;
int factoryW = 20;
int factoryH = 20;


float prob;

ControlP5 switchButton;
Button populate;

void setup() {
  size(600, 600);
  noStroke();
  smooth();

  switchButton = new ControlP5(this);
  populate = switchButton.addButton("Populate Map")
    .setPosition(50, 50)
      .setSize(100, 20)
        .setSwitch(true)
          .setOff();
}
void draw() {
  background(180);
  fill(0);
  rect(factoryX, factoryY, factoryW, factoryH);
  switchButton.draw();
  if (populate.booleanValue() == true) {
    for (int i=0; i<width; i++) {
      for (int j=0; j<height; j++) {
        float r = random(1);  
        if ((i > factoryX-20 && i<factoryX + factoryW+20) && (j>factoryY-20 && j<factoryY + factoryH+20)) {
          if ( r < 0.5) {
            stroke(#B200FF);
            point(i, j);
          }
        }
      }
    }
  }

  if (populate.booleanValue() == true) {
    for (int i=0; i<width; i++) {
      for (int j=0; j<height; j++) {
        float r = random(1);  
        if ((i > factoryX-40 && i<factoryX + factoryW+40) && (j>factoryY-40 && j<factoryY + factoryH+40)) {
          if ( r < 0.2) {
            stroke(#B200FF);
            point(i, j);
          }
        }
      }
    }
  }

  if (populate.booleanValue() == true) {
    for (int i=0; i<width; i++) {
      for (int j=0; j<height; j++) {
        float r = random(1);  
        if ((i > factoryX-80 && i<factoryX + factoryW+80) && (j>factoryY-80 && j<factoryY + factoryH+80)) {
          if ( r < 0.1) {
            stroke(#B200FF);
            point(i, j);
          }
        }
      }
    }
  }

  if (keyPressed) {
    if (key == 'f' || key == 'F') {
      rect(mouseX, mouseY, factoryW, factoryH);
    }
  }
}

MenteCode

It isn't a gradual change from dense to less dense...

If you want your dot population to become less dense farther away, unless there's some other hidden way that I don't know about, you won't be able to do this without PVector (unless, of course, you want to do the hypotenuse calculations yourself... ;) )

How to place more black squares with a key input and then get the sketch to run a similar density calculation on the placed squares...

If you want to have the ability to place multiple squares that do the same thing, this is where classes come in. They will save you a lot of time and space.

Just research the two methods. They're both in the Processing reference.

MenteCode

When I said that this is where classes come in, I didn't remember that it's harder to make an array of object in classes than in an ArrayList, which is what I actually meant.

MenteCode

BTW, I’m working on the code right now, so just sit back for now.

_vk

I was playing with this, but now i have to leave, Still some dumbness I've already detected, an some i haven't, but it might be an idea.

ArrayList<Quad> qs = new ArrayList<Quad>();

void setup() {
  size(400, 400, P2D);
  imageMode(CENTER);
  qs.add(new Quad(200, 200, 30));
}

void draw() {
  background(255);
  for (Quad q:qs) {
    q.display(true);
  }
}

void mouseReleased() {
  qs.add(new Quad(mouseX, mouseY, 30));
}







class Quad {

  int DEGREE = 360; //degrees is reserved...
  color RECTCOLOR  = color(0);
  color CLOUDCOLOR = color(0);
  PGraphics pg;

  int range;
  float x, y, sz;


  Quad( float _x, float _y, float _sz ) {
    x        = _x;
    y        = _y;
    sz       = _sz;
    range    = int( sz * 3 );
    pg = createGraphics(int(range*0.7), int(range*0.7), P2D);

    //init array based on range
    PVector[][] cloudTable = new PVector[DEGREE][range];

    //populate it
    for (int i = 0; i < DEGREE; i++) {
      for (int j = 0; j < range; j++) {
        float a  = radians(i + random(-0.5, 0.51));
        float xVec = pg.width/2 + cos(a) * ( j + random(-0.5, 0.51));
        float yVec = pg.height/2 + sin(a) * ( j + random(-0.5, 0.51));
        //use z for random chance to be...
        float zChance = random (1);
        cloudTable[i][j] = new PVector (xVec, yVec, zChance);
      }
    }

    drawBack(cloudTable);
  }//eofconstruct


  void display(boolean backOn) {

    if (true) {
      image(pg, x, y);
    }
    drawFront();

  }//eofdisplay

  void drawFront() {
        rectMode(CENTER);    
    fill(RECTCOLOR);
    noStroke();
    rect(x, y, sz , sz);
  }


  void drawBack(PVector[][] pv) {

    pg.beginDraw();
    pg.background(255,0);
    pg.stroke(CLOUDCOLOR);
    pg.noFill();
    for (int i = 0; i < DEGREE; i+=1) {
      for (int j = 0; j < range; j+=1) {
        PVector p = pv[i][j];
        if (toBe( p, j )) {
          pg.point(p.x, p.y);
        }
      }
    }
    pg.endDraw();
  }//eofdrawback


  boolean toBe(PVector p, int dist) {
    float far = map(dist, 0, range, 0, 0.25);// slight reducing towards border
    return p.z > 0.85 +  far;                // radial nature is already like this
  }//eof tobe
}//eofQuad

MenteCode

I haven't got as far as the placement of multiple squares, but I have some code for your required gradual change. Here:

import controlP5.*;

int factoryX = 300, factoryY = 300;

ControlP5 switchButton;
Button populate;

void setup() {
  size(600, 600);
  noStroke();
  smooth();
  switchButton = new ControlP5(this);
  populate = switchButton.addButton("Populate Map")
    .setPosition(50, 50)
      .setSize(100, 20)
        .setSwitch(true)
          .setOff();
}

void draw() {
  background(180);
  fill(0);
  rectMode(CENTER);
  switchButton.draw();
  if(populate.booleanValue() == true) {
    for(int i = 0; i < width; i++) {
      for(int j = 0; j < height; j++) {
        float r = random(100);
        float d = dist(factoryX, factoryY, i, j);
        if(r > d) {
          stroke(#B200FF);
          point(i, j);
        }
      }
    }
  }
  rect(factoryX, factoryY, 20, 20);
}

Hope that helps.

-- MenteCode