# 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:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@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")

</div>

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");`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/f/2f37d6ec2afe48672c9b8d480930817ff7aa147f.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/d/fd26f3fcb4fab37dec86e1b21f293989aa6f7e06.png)

References:

- [Objects / Processing.org](https://processing.org/tutorials/objects)
- [2D Transformations / Processing.org](https://processing.org/tutorials/transform2d)

`:)`

---

_[View the full topic](https://discourse.processing.org/t/rasterizing-image-with-grid-of-dice/40176)._