Suggestions for Randomizing Placement and Colors

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

I’m working on a sketch that has 16 ellipses as shown in the image below.

GadgetsScreen
GadgetsScreen789×789 127 KB

Each ellipse is filled with a different color and then various lines, rectangles, triangles and ellipses are drawn and animated using rotation based on frameCount. I’ll refer to each of the 16 combinations as “Gizmos”.
I’ve presently got each Gizmo as a function. Inside Draw I translate to the upper left corner of each area where the ellipse will be drawn and call the function that draws the Gizmo, for example (“smalldim” refers to the width/height of the canvas, which is always square and always limited by the smallest dimension of the window):

function draw() {
   scale(1);
Gizmo1();

push();
translate(0,smalldim * 0.25);
Gizmo2();
pop();

push();
translate(0,smalldim * 0.5);
Gizmo3();
pop();

push();
translate(0, smalldim * 0.75);
Gizmo4();
pop();

And, here’s an example of what the first Gizmo function looks like:

function Gizmo1() {
  fill(fill1); 
  ellipse(smalldim * 0.12, smalldim * 0.12, smalldim * 0.25);
  stroke(125, 0, 0);
  line(smalldim * 0.18, 0, smalldim * 0.18, smalldim * 0.27);
 line(0, smalldim * 0.17, smalldim * 0.17, smalldim * 0.17);
 line(0, smalldim * 0.07, smalldim * 0.27, smalldim * 0.07);
 stroke(fill15);
 strokeWeight(smalldim * 0.01);
 line(smalldim * 0.02, smalldim * 0.17, smalldim * 0.18, smalldim * 0.17);
 line(smalldim * 0.18, smalldim * 0.165, smalldim * 0.18, smalldim * 0.215);
 strokeWeight(smalldim * 0.025);
 stroke(125, 0, 0);
 push();
 translate(smalldim * .09, smalldim * 0.17);
  rotate(radians(frameCount*1.5));
  fill(fill4);
  square(0,0,smalldim * 0.06);
  pop();
  
}

The fill colors (“fill1” shown above) are defined in Setup.

I have two questions.

  1. How would I go about making each of the 16 Gizmos appear in a different location randomly, preferably using a pseudo random number generator so that they would always appear in the same location as long as the seed used in the PRNG doesn’t change. I’m fairly new to programming and unsure of whether this is something that I could create an array for, or whether there is a better way to do it than have each Gizmo as a function.
  2. How would I also assign each of 16 colors I’ve already defined to the Gizmos randomly, using the same PRNG? I’m thinking maybe I should use a For loop to assign the colors from an array to each location before I start drawing the lines, squares, etc for each Gizmo.
1 Like
2

Hello!

I think your array idea is the way to go for this. And then “shuffle” via shuffle():

:nerd_face:

1 Like
3

Hello,

What you could do is create an array of PVector containing the center of each ellipse. In your case you would have 16 items in it.

Then let’s have each gizmo function taking a PVector as a parameter that will be the center point of where it needs to be drawn (you can use the translate() function here to ease your life)

Then have the array of centers shuffled and give gizmo1 the first element of that array, gizmo2 the second and so on: it will randomize their location.

If you do it like this, I see very limited impact on your code so it could be done quite easily.

Up to you to code your own shuffle function to be able to use a seed to create the same results when given the same seed.

For the color, you can do the same thing, have an array of colors, shuffle it and add a color parameters to you gizmos functions.

Have fun coding =)

1 Like
4

Thank you! I’ve got that working using the p5js shuffle. Now I just need to figure out how to shuffle using my PRNG.