Creating a grid of dice representing an image

asymmetric · October 31, 2022, 9:46pm

Yes, I would love smaller dice!

Chrisir · October 31, 2022, 9:48pm

Replace tilesX by img.width

Same for the for loop with y ::: img.height

And change the resize command in setup

I gotta go.

asymmetric · October 31, 2022, 10:25pm

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?

Chrisir · November 1, 2022, 4:08am

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

asymmetric · November 1, 2022, 5:20pm

I get a gray window when I replace TilesX and TilesY in the for loop…

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

asymmetric · November 1, 2022, 5:21pm

 
  for (int x = 0; x < img.width; x++){
    for (int y = 0; y < img.height; y++){

Chrisir · November 1, 2022, 5:21pm

ONLY in these lines

Please read your code and develop an understanding how it works

asymmetric · November 1, 2022, 5:21pm

That’s what I did and I get a gray screen.

asymmetric · November 1, 2022, 5:23pm

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?

Chrisir · November 1, 2022, 5:25pm

Comment this out again

What happens

Be patient we are getting there

asymmetric · November 1, 2022, 5:26pm

I appreciate your help so much, @Chrisir !!

I commented out that line and still a gray screen.

Chrisir · November 1, 2022, 5:26pm

As I said go with 100 here

The tilesX is how many tiles you have. 20 is too little, try 100

asymmetric · November 1, 2022, 5:28pm

Still gray screen

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

asymmetric · November 1, 2022, 5:49pm

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!

asymmetric · November 1, 2022, 5:50pm

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

asymmetric · November 1, 2022, 5:51pm

This is with size 80 tile size… see how the dots arent in proportion or even in proportion to the get pixel value?

asymmetric · November 1, 2022, 5:57pm

I can put the img.width and img.height back in the for loop though! It will go gray again… lol

Chrisir · November 1, 2022, 6:00pm

The image is far too big

Change the resize command and try again

glv · November 1, 2022, 6:12pm

Hello,

Try your most recent version of code with:

img.resize(80, 80);
and
tilesX = 80;

Take a close look at this and simplify it:

      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!

:)

Topic		Replies	Views
Rasterizing Image with grid of dice Coding Questions	9	286	December 21, 2022
Grid collage of random PImage Coding Questions	1	118	January 7, 2023
Not sure how to code this Random/shuffling image effect Coding Questions	4	776	November 1, 2018
Coding Help Cannot Make Random Images Being Chosen Coding Questions	1	245	November 29, 2018
Random Image Generation + Random Rotation Coding Questions	4	603	May 2, 2020

Creating a grid of dice representing an image

Related Topics