How to use random to get at my color array

Petros

What I'm trying to do: create a bunch of ellipses (in a grid) that each have one of an array of colors and that each mask one or more rectangles that also have a variable color from the same array. I've succeeded at (1) creating a masked shape, (2) duplicating it in a grid, and (3) creating an array of colors. Right now I'm trying to get that array to affect the colors but I'm failing. What am I doing wrong? I'm getting an error "expecting EOF, found 'colorset'." Pretty sure I have my file set up incorrectly. Any tips?

/**
 * Draw rectangles inside of circles
 * 2017-08-22
 **/
PGraphics sourceImage;
PGraphics maskImage;

  int colorset;
  color [] colorsetarray = { 
    color(#3AC459), 
    color(#3D8CFF), 
    color(#8CD6ED), 
    color(#F7CC68), 
    color(#F77068), 
    color(#576984), 
    color(#7A9BB0), 
    color(#D8E8ED), 
    color(#EAF4F7) };
  colorset = colorsetarray[(int)random(0, 8)];

void setup() {
  size(800, 800); //size of canvas
  noLoop();
  smooth();
}

void draw() {

  for (int y = 20; y < height-8; y += 120) {
    for (int x = 20; x < width-80; x += 120) {
      // create source
      sourceImage = createGraphics(100, 100); //size of drawing
      sourceImage.beginDraw();
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      sourceImage.translate(width/2, height/2);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(-600, -200, 80, 500); //locate the rectangle and draw it
      sourceImage.endDraw();

      // create mask
      maskImage = createGraphics(100, 100); //size of mask
      maskImage.beginDraw();
      maskImage.ellipse(50, 50, 100, 100);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
}

jeremydouglass

@Petros -- to start, this line is not a declaration:

  colorset = colorsetarray[(int)random(0, 8)];

...so it can't go in the header. It has to appear in a function -- specifically, put it in setup().

If you really wanted to, you could combine it with its declaration and put it in the header AFTER the field that it references:

  int colorset = colorsetarray[(int)random(0, 8)];

...but don't. setup() is better.

Petros

Thanks Jeremy. That fixed the problem of the sketch running (working now, yay!), but my spheres are all coming out black. Do you see what am I doing wrong?

jeremydouglass

Errors with relative motion. You need to review

• https://processing.org/tutorials/transform2d

For example this:

sourceImage.translate(width/2, height/2);

You are in a 100x100 image, and you just moved to 400x400, using variables based on the width of your sketch. So you are way off the screen. Everything you draw will be off the screen.

sourceImage.rect(-600, -200, 80, 500);

This looks wrong. What, specifically, are you trying to do? Better to anchor your rect at 0,0,x,y and use translate to place your drawing origin.

Color: try...

  sourceImage.background(0,0,255); //color the background
  sourceImage.fill(255,0,0); //color the rectangle

...does that work? If it does, now you can work out the placement. Once you've worked out the placement, then you can fix your color code. One thing at a time.

Are you initializing colorsetarray correctly? In setup, try:

  println(colorsetarray);

Does it contain a set of different values? If not you should use a different method for setting up your array -- try checking the color reference page:

• https://processing.org/reference/color_datatype.html

Petros

YEEESSSSS! It's working! Thank you so much for the help!

/**
 * Draw rectangles inside of circles
 * 2017-08-22
 **/
PGraphics sourceImage;
PGraphics maskImage;

int colorset;
color [] colorsetarray = { 
  #3AC459,
  #3D8CFF,
  #8CD6ED,
  #F7CC68,
  #F77068,
  #576984,
  #7A9BB0,
  #D8E8ED,
  #EAF4F7,
};


void setup() {
  size(800, 800); //size of canvas
  noLoop();
  smooth();
  colorset = colorsetarray[(int)random(0, 8)];
  println(colorsetarray);
}

void draw() {

  for (int y = 20; y < height-8; y += 120) {
    for (int x = 20; x < width-80; x += 120) {
      // create source
      sourceImage = createGraphics(100, 100); //size of drawing
      sourceImage.beginDraw();
      //sourceImage.background(0, 0, 255); //color the background
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      //sourceImage.fill(255, 0, 0); //color the rectangle
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      pushMatrix();
      sourceImage.translate(0, 0);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(0, 0, 100, 100); //locate the rectangle and draw it
      sourceImage.endDraw();
      popMatrix();

      // create mask
      maskImage = createGraphics(100, 100); //size of mask
      maskImage.beginDraw();
      maskImage.ellipse(50, 50, 100, 100);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
}

jeremydouglass

@Petros -- congratulations -- and it looks beautiful.

Petros

Thanks! It's getting there. Not sure if I should start a new thread or not, but I have another question. I'm now trying to save a few things from the sketch: (1) the entire image with all the circles, and (2) each individual circle shape. I added a save() at the end which works, but my saveFrame() in the for loop, it's doing what I would expect (saving as the sketch renders), but not what I want (saving each circular shape element). Any suggestions about how I would get to a place where for each time I run the sketch each individual shape is exported to a uniquely named .png? Maybe I should add another for loop and put the save in there? LMK if I should post a new question.

Example of output:

My code: /** * Draw rectangles inside of circles * 2017-08-22 **/ PGraphics sourceImage; PGraphics maskImage;

int colorset;
color [] colorsetarray = { 
  #3AC459, 
  #3D8CFF, 
  #8CD6ED, 
  #F7CC68, 
  #F77068, 
  #576984, 
  #7A9BB0, 
  #D8E8ED, 
  #EAF4F7, 
};


void setup() {
  size(800, 800); //size of canvas
  noLoop();
  smooth();
  colorset = colorsetarray[(int)random(0, 8)];
  println(colorsetarray);
}

void draw() {

  for (int y = 20; y < height-8; y += 120) {
    for (int x = 20; x < width-80; x += 120) {
      // create source
      sourceImage = createGraphics(100, 100); //size of drawing
      sourceImage.beginDraw();
      //sourceImage.background(0, 0, 255); //color the background
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      //sourceImage.fill(255, 0, 0); //color the rectangle
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      pushMatrix();
      sourceImage.translate(0, 0);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(0, 0, 100, 100); //locate the rectangle and draw it
      sourceImage.endDraw();
      popMatrix();

      // create mask
      maskImage = createGraphics(100, 100); //size of mask
      maskImage.beginDraw();
      maskImage.ellipse(50, 50, 100, 100);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);

      // show masked source
      image(sourceImage, x, y); //move the chip here
      saveFrame("/Users/--------/Desktop/Chips/"+"IndividualChip"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+"#####"+".png"); //this works and does increment the filename
    }
  }
  //save("/Users/--------/Desktop/Chips/Chipsa.png"); //this works but doesn't increment the filename
  save("/Users/--------/Desktop/Chips/"+"Chip"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+".png"); //this works and does increment the filename
}

jeremydouglass

Good idea keeping it all in one thread -- much easier to understand the context and give feedback.

After you run sourceImage.mask(maskImage), you have a separate completed image object named sourceImage in memory. Now you can save that object, rather than the whole screen, with sourceImage.save()

• https://processing.org/reference/PImage_save_.html

Petros

Cool. That's saving the last circle each time I run it, but not all the circles. I've read a few threads but can't figure out how to increment the filename. Any suggestions? The other thing that I'm struggling with is centering the rectangle inside the circle. I read the canvas/grid article you mentioned (in another thread?) several times, and I've cleaned up my code some since then, but still can't figure out how to center the rectangle.

/**
 * Draw rectangles inside of circles
 * 2017-08-24
 **/
PGraphics sourceImage;
PGraphics maskImage;

int colorset;
color [] colorsetarray = { 
  #3AC459, 
  #3D8CFF, 
  #8CD6ED, 
  #F7CC68, 
  #F77068, 
  #576984, 
  #7A9BB0, 
  #D8E8ED, 
  #EAF4F7, 
};
int chipsize;


void setup() {
  size(990, 624); //width and then height of canvas
  // size (4250, 5500); //printable size
  rectMode(CENTER);
  noLoop();
  smooth();
  colorset = colorsetarray[(int)random(0, 8)];
  println(colorsetarray);
  chipsize = 48; //100 works best, other numbers are working OKAY, not always great.
  // background(#576984);
}

void draw() {

  for (int y = chipsize; y < height-chipsize; y += chipsize*2) {
    for (int x = chipsize; x < width-chipsize; x += chipsize*2) {
      // create source
      sourceImage = createGraphics(chipsize, chipsize); //size of chip
      sourceImage.beginDraw();
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      pushMatrix();
      sourceImage.translate(chipsize/-2, 0);
      sourceImage.rotate(radians(0));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(chipsize/2, chipsize/2, chipsize, random(2, 80)); //locate the rectangle and draw it
      sourceImage.endDraw();
      popMatrix();

      // create mask
      maskImage = createGraphics(chipsize, chipsize); //size of mask
      maskImage.beginDraw();
      //sourceImage.translate(chipsize/-2, 0);
      maskImage.ellipse(chipsize/2, chipsize/2, chipsize, chipsize);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);
      sourceImage.save("/Users/petros/Desktop/Chips/IndividualChips/"+"IndividualChip"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+"#####"+".png"); //this works and does increment the filename

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
  save("/Users/petros/Desktop/Chips/"+"Chip"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+".png"); //this works and does increment the filename
}

Petros

Okay, think I figured the part about centering the rectangle. Still don't know about saving out each one:

/**
 * Draw rectangles inside of circles
 * 2017-08-24
 **/
PGraphics sourceImage;
PGraphics maskImage;

int colorset;
color [] colorsetarray = { 
  #3AC459, 
  #3D8CFF, 
  #8CD6ED, 
  #F7CC68, 
  #F77068, 
  #576984, 
  #7A9BB0, 
  #D8E8ED, 
  #EAF4F7, 
};
int chipsize;


void setup() {
  size(1000, 624); //width and then height of canvas
  // size (4250, 5500); //printable size
  rectMode(CENTER);
  noLoop();
  smooth();
  colorset = colorsetarray[(int)random(0, 8)];
  println(colorsetarray);
  chipsize = 48; //100 works best, other numbers are working OKAY, not always great.
  // background(#576984);
}

void draw() {

  for (int y = chipsize; y < height-chipsize; y += chipsize*2) {
    for (int x = chipsize; x < width-chipsize; x += chipsize*2) {
      // create source
      sourceImage = createGraphics(chipsize, chipsize); //size of chip
      sourceImage.beginDraw();
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      pushMatrix();
      sourceImage.translate(chipsize/2, chipsize/2);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      int rect_width_a;
      rect_width_a = int(random (2, 45)); //sets the width for the first stroke "a"
      sourceImage.rect(-chipsize/2, rect_width_a/-2, chipsize, rect_width_a); //locate the rectangle and draw it x, y, sizex, sizey
      sourceImage.endDraw();
      popMatrix();

      // create mask
      maskImage = createGraphics(chipsize, chipsize); //size of mask
      maskImage.beginDraw();
      //sourceImage.translate(chipsize/-2, 0);
      maskImage.ellipse(chipsize/2, chipsize/2, chipsize, chipsize);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);
      sourceImage.save("/Users/petros/Desktop/Chips/IndividualChips/"+"IndividualChip"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+"#####"+".png"); //this works and does increment the filename

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
  save("/Users/petros/Desktop/Chips/"+"Chip"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+".png"); //this works and does increment the filename
}

koogs

The ###### in the filename gets replaced with the frame number. But this is the same for all values of your for loop as they are all drawn in the same frame. So each is overridden by the next meaning you only see the last.

Add X and y to the filename to save all of them.

And look at Java's simpleDateFormat...

Petros

Thanks @koogs. Is simpleDateFormat included in processing already or do I have to add a library? I found this and this but my code isn't working for it. I put this in the setup section

int dateFormat;
  dateFormat = SimpleDateFormat("yyyy-MM-dd HH-mm-ss") ;

But the console (right term?) says "The function "SimpleDateFormat(String) does not exist". I'm probably doing something obviously wrong. Any pointers on how to do this right? I've read this and this.

Definitely get your point about the saveFrame() and #####; that was kind of a shot in the dark. When you say "Add X and y to the filename to save all of them" I'm not sure what you mean. Can you elaborate for me?

GoToLoop

https://Forum.Processing.org/two/discussion/20006/is-there-a-way-to-access-a-fraction-of-a-second-of-the-system-clock-not-millis-related#Item_1

koogs

Yeah, sorry, you'll need to add an import.

koogs

"Add X and y to the filename to save all of them"

The current problem is that your filenames aren't unique so it's overwriting files. By including the current X and y values in the filenames (or, maybe, some new index value that increments per item) then they will be unique and won't overwrite.

Petros

Yes! I'm so psyched. I added this to my code and it's now saving out the circles individually.

before Setup:

int file_number=0;

and then in my two for loops I added:

sourceImage.save("/Users/Petros/Desktop/Chips/IndividualChips/NumberingTest/"+"IndividualChip"+file_number+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+".png"); //this works and does increment the filename
    file_number+=1;

I'm also really psyched that they're exporting with transparency. Thank you guys so much for your help! Now to try and get a handle on the date format stuff...(apologize for bad code formatting above; I can't figure out how to fix it.)

jeremydouglass

Congratulations!

Note that the code will produce many images during the same second -- hence same file name, hence overwriting. That's why you also need x y or something unique as @koogs points out.

P.S. your code isn't formatting in the post above because it needs a blank line above and below.

Petros

Cool. Fixed my formatting. I've got an incrementing number to keep the files unique (I think?). Now I'm having trouble incorporating, @GoToLoop, your suggestion. The code looks really simple, but I can't get it to work. I added this to my setup:

  final String PATTERN = "H:mm:ss:SSS";
  final SimpleDateFormat formatter = new SimpleDateFormat(PATTERN);
  Date now = new Date();
  String formatted_date = formatter.format(now);

And then have this for my save in the for loop:

  sourceImage.save("/Users/Petros/Desktop/Chips/IndividualChips/NumberingTest/"+"Chip_"+file_number+"_"+formatted_date.png"); 
  file_number+=1;

But I'm getting the error "String literal is not properly closed by a double quote." Why should file_number not need a double quote but formatted_date does? Or, any suggestions on how to properly put the formatted date into the filename? I'm really thankful for all the help you folks have provided!

GoToLoop

/** 
 * SimpleDateFormat Image Save (v1.0.1)
 * GoToLoop (2017/Aug/25)
 *
 * Forum.Processing.org/two/discussion/23896/
 * how-to-use-random-to-get-at-my-color-array#Item_18
 */

import java.util.Date;
import java.text.SimpleDateFormat;

static final String FOLDER_PATTERN = "yyyy-MM-dd";
final SimpleDateFormat foldFormat = new SimpleDateFormat(FOLDER_PATTERN);

static final String FILE_PATTERN = "H-mm-ss-SSS";
final SimpleDateFormat fileFormat = new SimpleDateFormat(FILE_PATTERN);

static final String FILE_NAME = "chips", EXT_NAME = ".png";

void setup() {
  noLoop();
}

void draw() {
  background((color) random(#000000));
}

void mousePressed() {
  if (mouseButton != LEFT)  saveDateImage(getGraphics());
  redraw();
}

void keyPressed() {
  if (key != ESC)  saveDateImage(getGraphics());
  redraw();
}

void saveDateImage(final PImage pic) {
  final Date now = new Date();
  final String fold = foldFormat.format(now);
  final String file = fileFormat.format(now);

  println(fold, file);

  final String name = fold + '/' + file + '.' + FILE_NAME + EXT_NAME;
  final String path = dataPath(name);

  println(path, ENTER);
  pic.save(path);
}

Petros

Thanks @GoToLoop; definitely helpful. Except I can't figure out how to change the path where this image would be saved to. If I wanted to put the files on my (mac) desktop, how would I do it? I'm trying to figure out how to learn from the code you posted and I want to get this to put the files in a folder I control.

GoToLoop

IMO, best place to place program's files is inside the very same folder the program is. $-)

However, if you wanna pick another folder for them, you've gotta specify its full path as you had already done in your own latest version, rather than using dataPath() like I did in mine. :>

Petros

Another (somewhat unrelated) question: Does anyone know what I could do to avoid some of the fuzz around the edge of my circles? I'd love them to be crisp. It seems to happen whether or not I have smooth(); in the setup section or not. Here's what I mean:

I also have it set to noLoop();

GoToLoop

For default JAVA2D renderer, AFAIK, best sampling level is 3: smooth(3); ^#(^
https://Processing.org/reference/smooth_.html

Perhaps you may try out noSmooth() instead? :-??
https://Processing.org/reference/noSmooth_.html

Petros

Hmm, noSmooth definitely isn't it; that gives me no anti-aliasing. Tried smooth(2), smooth(3), and smooth(8), but didn't see the fuzz go away.

GoToLoop

Try out other renderers like FX2D, P2D & P3D.
P2D & P3D can use higher sampling levels such as 8. Maybe even more. $-)
Dunno yet FX2D's max level sampling though. 8-|

koogs

Isn't the fuzz just the anti aliasing?

Maybe the problem is that it's doing the anti-aliasing using a background colour different to the colour is ending up on and baking some of that colour into the dot image. Ie a light dot on a dark background will have a fringe of dark pixels. Copy the dot to a light background and the fringe will be more visible. I haven't run the code though so that just a guess.

I'd be tempted to use vector graphics, export to PDF or svg. But if a rewrite though.

This btw is bad

final String PATTERN = "H:mm:ss:SSS";

Because : isn't valid character in Windows filenames. But I guess you've fixed that.

koogs

Also, why are you creating the mask image every single time when it doesn't ever change. Make it a global variable, create it in setup.

Petros

Thanks for those points! I haven't got the simplified dating working yet, so hopefully I'll fix the : if and when I get that working in a more streamlined way. But I'll look into the other renderers and that's a good point about the mask.

The fuzz is heavier on the top left (where it seems egregious) than it is on the bottom right (where it seems normal).

jeremydouglass

Maybe the problem is that it's doing the anti-aliasing using a background colour different to the colour is ending up on and baking some of that colour into the dot image.

Hmm, that might be it -- you could try using background(255) / background(128) / background(0) in PGraphics during the mask process to see if it helps.

Petros

I've stalled a bit on this. Fixed the part about creating the mask over and over, fixed the :'s in the date format (which I still haven't successfully used), and tried a few of the different rendering things, and tried the background color idea (didn't seem to cut down the fuzz).

I'll probably come back to that stuff to make the code cleaner and more manageable, but for the meantime I'm really curious how I can vary the number of rectangles that are drawn within the circle. Right now I have two for loops to make the grid; I think I want to make a for loop that will draw more rectangles inside each circle. I've been thinking about it for a few days but I can't figure out how to approach it. I know I need to create a variable that varies the number of rectangles that get drawn, and I suppose that variable needs to be defined within the for loop, but how do I make it work? How can I tell it to draw between 2 and 10 rectangles inside each circle, each of which rectangle has a different x and y position and size that I can tweak? Any advice in that direction would be sweet. Here's what I have now in that section:

//int rect_count; this is where I was thinking of varying the number of rectangles
      rect_count = int(random (1, 3)); //determines how many rectangles will be created. Haven't figured out how to incorporate yet
      int rect_width_a;
      rect_width_a = int(random (2, chipsize)); //sets the width for the first stroke "a"
      int rect_offset_a;
      //rect_offset_a = int(random (-chipsize/2, chipsize/2)); //Shifts the first stroke left or right
      rect_offset_a = int(chipsize/-2);
      int rect_offset_ay;
      rect_offset_ay = int(random (-20, 20));

      int rect_offset_b;
      //rect_offset_b = int(random (-chipsize/2, chipsize/2)); //Shifts the second sroke left or right
      rect_offset_b = int(chipsize/-2); 
      int rect_width_b;
      rect_width_b = int(random (2, chipsize)); //sets the width for the second stroke "b"
      int rect_offset_by;
      rect_offset_by = int(random (-20, 20));

      sourceImage.rect(rect_offset_a, rect_offset_ay, chipsize, rect_width_a); //locate the rectangle and draw it x, y, sizex, sizey
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the ellipse
      sourceImage.rect(rect_offset_b, rect_offset_by, chipsize, rect_width_b);
      sourceImage.endDraw();
      popMatrix();

Petros

@Koogs, the anti-aliasing is really bugging me and I can't fix it. Is there a simple way to change my program from creating .pngs to creating and saving vector .svgs or .pdfs? You said it would require a rewrite. Any tips on how I would go about that?

koogs

Too late to look into that today. Maybe tomorrow.

The anti-aliasing, if that's what it is, looks asymmetric, which is odd.

jeremydouglass

I need to create a variable that varies the number of rectangles that get drawn, and I suppose that variable needs to be defined within the for loop, but how do I make it work? How can I tell it to draw between 2 and 10 rectangles inside each circle

That's a for loop.

int rectCount = round(random(2,10));
for(int i=0; i<rectCount; i++){
  rect(x,y,w,h);
}

• https://processing.org/reference/random.html
• https://processing.org/reference/round_.html

each of which rectangle has a different x and y position and size that I can tweak?

Those are already the arguments to the rect() function.

• https://processing.org/reference/rect_.html

You can randomize the arguments, or make them a sequence based on i, or draw them from a list like an array, etc.

int rectCount = round(random(2,10));
for(int i=0; i<rectCount; i++){
  int x = x + 5; // 5, 10, 15, 20...
  int y = i*10; // 0, 10, 20, 30...
  int w = i*rectCount; // 0, 6, 12, 18, 24, 30
  int h = int(random(100); // 32, 98, 11, 19...
  rect(x,y,w,h);
}

You can also make that its own function -- drawRect();

Petros

Thanks for that Jeremy. I'm trying out your suggestion which mostly makes sense to me, but, don't laugh, I can't get the rectangles to stop drawing after they've reached the random number between 2 and 10. Do I need to add a count or something to check if i has reached that variable number between 2 and 10? Here's the full test sketch I'm working on...

PGraphics rectangle;

void setup () {
  size(200, 200);
}

void draw () {
  int rectxPosition = round(random(-100, 200));
  int rectyPosition = round(random(-100, 200));

  int rectCount = round(random(2, 10));

  for (int i=0; i<rectCount; i++) {
    rectangle = createGraphics (30, 30);
    rectangle.beginDraw();
    rect(rectxPosition, rectyPosition, 30, 30);
    rectangle.endDraw();
  }
}

koogs

re the masking...

add maskImage.save("mask.png") and examine that...

Petros

WOW. @koogs, what a find! The mask was getting drawn with a stroke which was causing the fuzz. Here's the mask before I put a noStroke() on it:

And once I fixed that the fuzz went away. Woohoo!

I also did a bunch of code refactoring (thanks @jeremydouglass for the hints, and Daniel Shiffman on YouTube) which enabled me to work in the additional for loop. I'm pretty psyched about these results.

Now maybe I'll have time to figure out the simpler date formats. Thank you guys for your insights!

koogs

Can you paste the two lines where you save items?

Petros

Sure thing. Here's one (note I changed my createGraphics variable names, e.g. "maskedContent")

//save out the individual circles
  maskedContent.save("/Users/myusername/Desktop/ProjectBadges/2017-08-31/"+"Badge_"+year()+"-"+"0"+month()+"-"+day()+"_"+hour()+minute()+"0"+second()+"_"+nf(file_number, 3)+".png"); 
  file_number+=1;

And the other

//save the entire image
  save("/Users/myusername/Desktop/ProjectBadges/Sheets/"+"Sheet"+"-"+year()+"0"+month()+day()+"-"+hour()+minute()+"0"+second()+".png");