Rasterizing Image with grid of dice

[asymmetric]

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:

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);
    }
  }
}

[glv]

Hello @asymmetric,

Topic continued from here:

Creating a grid of dice representing an image

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)? [IMG_6028]

@glv

Try to write code to scale the die first and then integrate it into your code.

Here is an example of scaling a die:

// 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
• 2D Transformations / Processing.org

:)

[asymmetric]

@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?

[asymmetric]

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.

[asymmetric]

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.

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 )
      { 
        
      }
    }
  }
}

[glv]

@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:

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.

:)

[asymmetric]

@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.

[glv]

@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!

The tutorial on Strings and Drawing Text may be helpful.

:)

[asymmetric]

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!

[glv]

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 code that is not used and see what happens.

Reference:
https://en.wiktionary.org/wiki/comment_out

:)