# How to put random dots inside a square?

**URL:** <https://discourse.processing.org/t/how-to-put-random-dots-inside-a-square/14102>\
**Category:** Coding Questions\
**Created:** [September 21, 2019, 11:33pm UTC](https://discourse.processing.org/t/how-to-put-random-dots-inside-a-square/14102 "2019-09-21T23:33:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![woluk](https://avatars.discourse-cdn.com/v4/letter/w/d78d45/32.png) [@woluk](https://discourse.processing.org/u/woluk)\
**Post date:** [September 21, 2019, 11:33pm UTC](https://discourse.processing.org/t/how-to-put-random-dots-inside-a-square/14102/1 "2019-09-21T23:33:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 22, 2019, 3:33am UTC](https://discourse.processing.org/t/how-to-put-random-dots-inside-a-square/14102/2 "2019-09-22T03:33:03Z")

</div>

could try to test and dig into

> **this**
>
> ```auto
> // 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

---

<div class="post-metadata">

**Author:** ![Xelo](https://avatars.discourse-cdn.com/v4/letter/x/9fc348/32.png) [@Xelo](https://discourse.processing.org/u/Xelo)\
**Post date:** [September 22, 2019, 5:44am UTC](https://discourse.processing.org/t/how-to-put-random-dots-inside-a-square/14102/3 "2019-09-22T05:44:06Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1110d6079120e3b0af98ed2309c6f4e193d27dab.png)

1. use a switch statement to draw the dots manually based on which number you want.

```auto
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
  }
}

```