# How to put random dots inside a square?

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

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

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
}

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’

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