How to put random dots inside a square?

Processing Coding Questions
1

Hi,

Sorry if my question sounds dumb, I just started using Processing. I am trying to create a square that pops randomly on the screen with a different number each time.

So far, I managed to create the squares, to make them move and change colors randomly. I am struggling with the numbers on each dice. I don’t know how to make them appear randomly inside of each square. Does anyone have any insight ? Thanks a lot.

1 Like
2

could try to test and dig into

this 
// v 0.1 use mousePressed and mouseReleased
// v 0.2 give speed to slow down rotation
// v 0.3 and rotate 7 times ( not use mouseReleased )
String rev = " v0.3";
int x=100, y=x, w=50, h=w, grid=3, many=grid*grid, diam=30;
int dice = 0;
int[][] points = {
  {0, 0, 0, 0, 0, 0, 0, 0, 0}, // none
  {0, 0, 0, 0, 1, 0, 0, 0, 0}, //1
  {0, 0, 1, 0, 0, 0, 1, 0, 0}, //2
  {0, 0, 1, 0, 1, 0, 1, 0, 0}, //3
  {1, 0, 1, 0, 0, 0, 1, 0, 1}, //4
  {1, 0, 1, 0, 1, 0, 1, 0, 1}, //5
  {1, 0, 1, 1, 0, 1, 1, 0, 1}, //6
  {1, 1, 1, 1, 1, 1, 1, 1, 1}  //all              used as dice = 7 rolling
};
PShape squircle;
float speed, slower = 0.0001, ang = 0;          // animation: dice rolling
int roll = 3;                                   // roll limit

void setup() {
  size(300, 300);
  surface.setTitle("myDice"+rev);
  println("mouse click makes the magic");
  noStroke();                                      
  my_squircle(1, 90, 90);                       // generate the dice shape
}

void draw() {
  background(200, 200, 0);
  draw_dice();
}

void mousePressed() {
  dice = 7;
  ang = 0;
  speed = 0.10;
}

//__________________________________________________________ DICE
void draw_dice() {
  if ( dice == 7 ) {                            // dice rolling
    translate(width/2, height/2);
    speed -= slower;                            // v0.2 slow down rotation
    if ( speed < 0 ) speed = 0;                 // avoid rolling back
    ang += speed;
    rotate(ang);
    if ( speed == 0 || ang > roll * TWO_PI ) {  // v 0.3 roll limit 
      dice = int(random(1, 7));
      println("new dice: "+dice);
    }
    translate(-width/2, -height/2);
  }
  shape(squircle, width/2, height/2);           // shape first
  for (int i = 0; i < many; i++) {
    fill(180, 180, 180);                        // same dice squircle border, 190 would be invisible
    if ( points[dice][i] == 1 ) fill(200, 0, 0);
    ellipse(x+(i%grid)*w, y+(floor(i/grid))*h, diam, diam);
  }
}

//__________________________________________________________ SQUIRCLE
void my_squircle(float r, float wx, float wy) {
  float x1, y1;
  squircle = createShape();
  squircle.beginShape();
  squircle.stroke(180, 180, 180);
  squircle.strokeWeight(5);
  squircle.fill(190, 190, 190);
  for (float t = 0; t < TWO_PI; t += TWO_PI/160) {          // 160 vertex points is too much
    x1 = pow(abs(cos(t)), 0.5) * r*wx * sign(cos(t));
    y1 = pow(abs(sin(t)), 0.5) * r*wy * sign(sin(t));
    squircle.vertex(x1, y1);
  }
  squircle.endShape(CLOSE);
}

float sign(float input) {
  if (input < 0)  return -1.0;
  if (input > 0)  return  1.0;
  return 0.0;
}

possibly can use parts of it,
also for many dice ( with different random number )
might need array or even class setup

3

if you are new to processing, here’s a few simple (to understand) ways you can go about doing it:
1.
Make an array of images containing the dice dots:

float positionX;
float positionY;
PImage [] diceDots;

void setup(){
  size(400,400);
  background(255,246,237);
  frameRate(10);
  positionX= (100);
  positionY= (300);
  diceDots = new PImage[6]; // make an array of 6 Images for the dots to be stored in
  // you can do it in a for loop too
  //load the images in
  diceDots[0] = loadImage("dots1.png");
  diceDots[1] = loadImage("dots2.png");
  diceDots[2] = loadImage("dots3.png");
  diceDots[3] = loadImage("dots4.png");
  diceDots[4] = loadImage("dots5.png");
  diceDots[5] = loadImage("dots6.png");
}

void draw(){
  strokeWeight(5);
  //store the colour
  color c = color(255,random(246),random(237));
  fill(c);
  //change the colour of any images that are drawn too
  tint(c);
  
  positionX = int(random(width));
  positionY = int(random(height));
  rect(positionX-20,positionY-20,100,100,15);
  int number = round(random(1,6))-1; // makes a number between 0 and 5  , (int)random(0,6) works just as well but for the sake of math clarity
  //draw the image
  image(diceDots[number],positionX-10,positionY-10,80,80); 
}

Example of ‘dots2.png’
image

  1. use a switch statement to draw the dots manually based on which number you want.
float positionX;
float positionY;
PImage [] diceDots;

void setup(){
  size(400,400);
  background(255,246,237);
  frameRate(10);
  positionX= (100);
  positionY= (300);
}

void draw(){
  strokeWeight(5);
  fill(255,random(246),random(237));
  
  positionX = int(random(width));
  positionY = int(random(height));
  rect(positionX-20,positionY-20,100,100,15);
  int number = round(random(1,6)); // makes a number between 1 and 6  , (int)random(1,7) works just as well but for the sake of math clarity
  fill(0); //colour of the dots
  switch(number){
    case 1:  // 1 dot
        ellipse(positionX+30,positionY+30,15,15);
    break:
    case 2:  // 2 dots
        ellipse(positionX+30,positionY+5,15,15);
        ellipse(positionX+30,positionY+55,15,15);
    break:
    // and keep going :3
  }
}
1 Like