# Rasterizing Image with grid of dice
**URL:** https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176
**Category:** Coding Questions
**Created:** [December 15, 2022, 5:36pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176 "2022-12-15T17:36:33Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [December 15, 2022, 5:36pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/1 "2022-12-15T17:36:33Z")
Hi! I am trying to rasterize an image with dice connected to each pixel value, but I am running into a wall with sizing the dice appropriately.
Goal:
Current output:
Input image:
Current code:
```auto
PImage img;
void setup(){
size(800,800);
img = loadImage("IMG_7741.jpeg");
img.resize(80,80);
}
void draw(){
background(#f1f1f1);
//noSrtoke();
float tilesX = 80;
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:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 16, 2022, 12:40am UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/2 "2022-12-16T00:40:45Z")
Hello @asymmetric,
Topic continued from here:
> [@Creating a grid of dice representing an image](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364):
>
> Hi, how would I go about creating a grid of random(); dice that respond to a PImage(); in 2D (like the image below) or a 3D (heightmap)?
> [@Creating a grid of dice representing an image](https://discourse.processing.org/t/creating-a-grid-of-dice-representing-an-image/38364/79):
>
> Try to write code to scale the die first and then integrate it into your code.
Here is an example of scaling a die:
```auto
// Scaling
// GLV
// 2022-12-15
// Topic:
// https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176
PImage img;
Die die;
void setup()
{
size(500,500);
die = new Die();
}
void draw()
{
background(255);
int s = int(map(mouseX, 0, width, 0, 7)); // 1-6 dice sides
float sc = map(mouseY, 0, height, 1, 10); // 1 to 9 die size
push();
translate(mouseX, mouseY);
scale(sc, sc);
die.show(0, 0, s);
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);
}
}
}
```
Scrutinize the changes that I made to your code.
You should be able to integrate the concepts with your code once you understand it.
Image used:
`img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");`
References:
- [Objects / Processing.org](https://processing.org/tutorials/objects)
- [2D Transformations / Processing.org](https://processing.org/tutorials/transform2d)
`:)`
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [December 17, 2022, 7:35pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/3 "2022-12-17T19:35:10Z")
> [@glv](#):
>
> ` float sc = map(mouseY, 0, height, 1, 10); // 1 to 9 die size`
Hi @glv! I’m still struggling… do you have anymore recommendations?
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [December 17, 2022, 7:36pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/4 "2022-12-17T19:36:48Z")
I realized I had inverted the mapping brightness values, so I was able to fix that! But I am still having a hard time scaling the die.
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [December 17, 2022, 7:49pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/5 "2022-12-17T19:49:48Z")
I understand how to pixelate an image or get() the color value, but I am having trouble connecting the ellipse layout or the numbers in your example to the values.
```auto
void setup(){
size(900,900);
img = loadImage("IMG_7741.jpeg");
img.resize(900,900);
}
void draw(){
background(#f1f1f1);
noStroke();
float tilesX = 90;
float tilesY = tilesX;
float tileW = width / tilesX;
float tileH = height/ tilesY;
translate(-30,-20);
for (int x = 0; x < tilesX; x++){
for (int y = 0; y < tilesY; y++){
int px = int(x*tileW);
int py = int(y*tileH);
color c = img.get(px,py);
fill(c);
rect(x*tileW, y*tileH, tilesX, tilesY);
if( c == 0 )
{
}
}
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 18, 2022, 2:40pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/6 "2022-12-18T14:40:59Z")
> [@asymmetric](#):
>
> I am having trouble connecting the ellipse layout or the numbers in your example to the values.
My example in the previous post was provided to show how to select the face of a die and change the size; I did this by mapping the mouse values for a dynamic display. You can replace it directly with any values or variables of your choosing.
This is your code with an ellipse to replace rectangle and I mapped the die value and displayed the text at the target location:
The above was done to test out the code and I often employ this in development.
I replaced the ellipse with a mapped die value that was also scaled:
The above was done integrating the example I provided with your code.
You can also enter a value for scaling directly and later write the code to scale dynamically for different dimensions.
If you want to use your existing die code you could also do something like this:
```auto
void setup()
{
size(150, 150);
show(10, 10, 1);
PImage img = get(10, 10, 62, 62);
image(img, 50, 50);
img.resize(25, 25);
image(img, 90, 90);
}
```
There are other approaches to creating a die face… I was focused on adapting the code you are working with.
I leave the rest to you.
`:)`
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [December 20, 2022, 1:36am UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/7 "2022-12-20T01:36:09Z")
> [@glv](#):
>
> This is your code with an ellipse to replace rectangle and I mapped the die value and displayed the text at the target location:
How did you map the number of the value of the pixel to the ellipse in your code? I am having a disconnect there, but perhaps if you clear it up I can get closer to my end goal with the dice value image.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 20, 2022, 11:01am UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/8 "2022-12-20T11:01:39Z")
> [@asymmetric](#):
>
> How did you map the number of the value of the pixel to the ellipse in your code?
You have already done this in the code you provided.
The next step is to display the text.
I suggest you:
- break it down to a simple step(s) without the bloat of all your other code
- think about the necessary steps before writing any code
- write them down in order of execution
- write pseudo code or flowcharts
- work on writing _simple_ code examples to achieve required tasks
- consider where to integrate code with the larger project
There are resources (tutorials, references, examples) here:
> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…
The tutorial on _Strings and Drawing Text_ may be helpful.
`:)`
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [December 21, 2022, 5:36pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/9 "2022-12-21T17:36:59Z")
Yayyyyyyyyyyyyyyyyuy! The radius of the circles were to large! Processing does give me the error that myX, myY, and sc variables are not being used so should I delete them?
I manually resized the circles!
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 21, 2022, 6:01pm UTC](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176/10 "2022-12-21T18:01:17Z")
Hello,
Save working versions of your code and I suggest you number them.
Experiment a little with a copy of the last working version!
[Comment out](https://en.wiktionary.org/wiki/comment_out) code that is not used and see what happens.
Reference:
[https://en.wiktionary.org/wiki/comment\_out](https://en.wiktionary.org/wiki/comment_out)
`:)`