# Creating a grid of dice representing an image
**URL:** https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364
**Category:** Coding Questions
**Created:** [August 15, 2022, 4:41pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364 "2022-08-15T16:41:22Z")
**Posts on this page:** 19
**Page:** 4
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [October 31, 2022, 9:46pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/61 "2022-10-31T21:46:57Z")
Yes, I would love smaller dice!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 31, 2022, 9:48pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/62 "2022-10-31T21:48:21Z")
> [@asymmetric](#):
>
> `for (int x = 0; x < tilesX`
Replace tilesX by img.width
Same for the for loop with y ::: img.height
And change the resize command in setup
I gotta go.
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [October 31, 2022, 10:25pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/63 "2022-10-31T22:25:59Z")
When I replace the TilesX and TilesY with img.width and img.height my screen goes blank when I compile.
I have a couple of questions…
Do I need to fix my conditional statements in my class to somehow relate the pixels (s) to the dots?
Am I passing my parameters correctly?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 1, 2022, 4:08am UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/64 "2022-11-01T04:08:48Z")
> [@asymmetric](#):
>
> When I replace the TilesX and TilesY with img.width and img.height my
I meant to replace it only in the 2 for loops, NOT the variables itself since we need them later!!!
Also put the line with scale back to work (don’t comment it out anymore)
Post your entire code every time
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:20pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/65 "2022-11-01T17:20:13Z")
> [@Chrisir](#):
>
> I meant to replace it only in the 2 for loops, NOT the variables itself since we need them later!!!
I get a gray window when I replace TilesX and TilesY in the for loop…
```auto
PImage img;
void setup(){
size(800,800);
img = loadImage("IMG_7741.jpeg");
img.resize(800,800);
}
void draw(){
background(#f1f1f1);
//noSrtoke();
float tilesX = 20;
float tilesY = tilesX;
float tileW = width / tilesX;
float tileH = height/ tilesY;
for (int x = 0; x < tilesX; x++){
for (int y = 0; y < tilesY; y++){
int px = int(x);
int py = int(y);
color c = img.get(px,py);
fill(c);
float b = brightness(c);
float s = int(map(b, 0, 255, 0, 7)); // 1-6 dice sides
Die die = new Die(x*tileW, y*tileH );
float sc = tileW/50; //50 is size of die face
push();
scale(sc, sc);
die.show(x * tileW, y * tileH, int (s)); //Class
pop();
}
}
}
class Die
{
//variable declarations here
int dots;
float myX;
float myY;
Die(float x, float y) //constructor
{
float myX = x;
float myY= y;
}
void show(float myX, float myY, int s )
{
fill(255,255,255);
rect(myX, myY, 50, 50);
fill(0, 0, 0);
dots = s;
if (dots == 1)
{
ellipse(myX+25, myY+25, 10, 10);
} else if (dots == 2)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 3)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+25, myY+25, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 4)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 5)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
ellipse(myX+25, myY+25, 10, 10);
} else if (dots == 6)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+25, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
ellipse(myX+40, myY+25, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
}
}
}
```
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:21pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/66 "2022-11-01T17:21:14Z")
```auto
for (int x = 0; x < img.width; x++){
for (int y = 0; y < img.height; y++){
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 1, 2022, 5:21pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/67 "2022-11-01T17:21:27Z")
> [@asymmetric](#):
>
> ```auto
> for (int x = 0; x < tilesX; x++){
> for (int y = 0; y < tilesY; y++){
>
> ```
ONLY in these lines
Please read your code and develop an understanding how it works
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:21pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/68 "2022-11-01T17:21:47Z")
That’s what I did and I get a gray screen.
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:23pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/69 "2022-11-01T17:23:34Z")
I understand the way to rasterize an image, and how to use OOP, but I’m having a disconnect as to how to connect the die values to the pixel values. Are my conditional statements under show(); missing some logic?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 1, 2022, 5:25pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/70 "2022-11-01T17:25:20Z")
> [@asymmetric](#):
>
> `scale(sc, sc);`
Comment this out again
What happens
Be patient we are getting there
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:26pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/71 "2022-11-01T17:26:32Z")
I appreciate your help so much, @Chrisir !!
I commented out that line and still a gray screen.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 1, 2022, 5:26pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/72 "2022-11-01T17:26:49Z")
> [@asymmetric](#):
>
> `img.resize(800,800);`
As I said go with 100 here
The tilesX is how many tiles you have. 20 is too little, try 100
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:28pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/73 "2022-11-01T17:28:54Z")
Still gray screen
```auto
PImage img;
void setup(){
size(800,800);
img = loadImage("IMG_7741.jpeg");
img.resize(800,800);
}
void draw(){
background(#f1f1f1);
//noSrtoke();
float tilesX = 100;
float tilesY = tilesX;
float tileW = width / tilesX;
float tileH = height/ tilesY;
for (int x = 0; x < img.width; x++){
for (int y = 0; y < img.width; y++){
int px = int(x);
int py = int(y);
color c = img.get(px,py);
fill(c);
float b = brightness(c);
float s = int(map(b, 0, 255, 0, 7)); // 1-6 dice sides
Die die = new Die(x*tileW, y*tileH );
float sc = tileW/50; //50 is size of die face
push();
//scale(sc, sc);
die.show(x * tileW, y * tileH, int (s)); //Class
pop();
}
}
}
class Die
{
//variable declarations here
int dots;
float myX;
float myY;
Die(float x, float y) //constructor
{
float myX = x;
float myY= y;
}
void show(float myX, float myY, int s )
{
fill(255,255,255);
rect(myX, myY, 50, 50);
fill(0, 0, 0);
dots = s;
if (dots == 1)
{
ellipse(myX+25, myY+25, 10, 10);
} else if (dots == 2)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 3)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+25, myY+25, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 4)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 5)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
ellipse(myX+25, myY+25, 10, 10);
} else if (dots == 6)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+25, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
ellipse(myX+40, myY+25, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
}
}
}
```
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:49pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/74 "2022-11-01T17:49:52Z")
I entered 40 with TilesX and TilesY in the for loop and that seems to be the perfect pixel size… the proportion of the dot is off or not even visible after doing so though!
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:50pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/75 "2022-11-01T17:50:14Z")
```auto
PImage img;
void setup(){
size(800,800);
img = loadImage("IMG_7741.jpeg");
img.resize(800,800);
}
void draw(){
background(#f1f1f1);
//noSrtoke();
float tilesX = 40;
float tilesY = tilesX;
float tileW = width / tilesX;
float tileH = height/ tilesY;
for (int x = 0; x < tilesX; x++){
for (int y = 0; y < tilesY; y++){
int px = int(x);
int py = int(y);
color c = img.get(px,py);
fill(c);
float b = brightness(c);
float s = int(map(b, 0, 255, 0, 7)); // 1-6 dice sides
Die die = new Die(x*tileW, y*tileH );
float sc = tileW/50; //50 is size of die face
push();
//scale(sc, sc);
die.show(x * tileW, y * tileH, int (s)); //Class
pop();
}
}
}
class Die
{
//variable declarations here
int dots;
float myX;
float myY;
Die(float x, float y) //constructor
{
float myX = x;
float myY= y;
}
void show(float myX, float myY, int s )
{
fill(255,255,255);
rect(myX, myY, 50, 50);
fill(0, 0, 0);
dots = s;
if (dots == 1)
{
ellipse(myX+25, myY+25, 10, 10);
} else if (dots == 2)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 3)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+25, myY+25, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 4)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
} else if (dots == 5)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
ellipse(myX+25, myY+25, 10, 10);
} else if (dots == 6)
{
ellipse(myX+10, myY+40, 10, 10);
ellipse(myX+10, myY+25, 10, 10);
ellipse(myX+10, myY+10, 10, 10);
ellipse(myX+40, myY+10, 10, 10);
ellipse(myX+40, myY+25, 10, 10);
ellipse(myX+40, myY+40, 10, 10);
}
}
}
```
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:51pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/76 "2022-11-01T17:51:47Z")
This is with size 80 tile size… see how the dots arent in proportion or even in proportion to the get pixel value?
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [November 1, 2022, 5:57pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/77 "2022-11-01T17:57:32Z")
I can put the img.width and img.height back in the for loop though! It will go gray again… lol
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 1, 2022, 6:00pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/78 "2022-11-01T18:00:02Z")
The image is far too big
Change the resize command and try again
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 1, 2022, 6:12pm UTC](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/79 "2022-11-01T18:12:04Z")
Hello,
> [@glv](#):
>
> Resize image. This makes it easy to extract a pixel and simplifies things… no need to get an average color of a section. Explore a more advanced approach later…
Try your most recent version of code with:
`img.resize(80, 80);`
and
`tilesX = 80;`
Take a close look at this and simplify it:
```auto
int px = int(x);
int py = int(y);
color c = img.get(px,py);
```
Above works as is but can be simplified to one line.
Comment out all the show related code and try this with a suitable fill():
`rect(x*tileW, y*tileH, tileW, tileH);`
You really must go through every line of code and scrutinize it until you understand it.
Add a comment to each important line on your code to explain what it is doing.
Use `println()` where necessary to see the program variables. You can comment them out later!
And voila!
Once you have the above working _ **and** _ you understand it try replacing the rectangle with:
- text; this can be 1 to 6 for a die for example.
- other shapes that are the correct size.
- scaling shapes such as a larger die as necessary to the correct size.
Code that I provide is not always intended to be _plug and play_ and _inserted_ in to your code… it is for insight to help you along.
Write and understand simple examples first and then consider how best to integrate them in to your code or not use them.
Try to write code to scale the die first and then integrate it into your code.
Keep at it!
`:)`
[Previous page](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364.md?page=3)