Creating a grid of dice representing an image

asymmetric · October 30, 2022, 12:51am

Where do I insert the following code?

This is what I have so far, but should I remove the random function from the class since the dots are referring to the brightness?

PImage img;

void setup(){
  size(700,700);
  img = loadImage("IMG_7741.jpeg");
  img.resize(800,800);
}

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 = map(b, 0, 255, 1, 6); // 1-6 dice sides
      Die die = new Die(x*tileW, y*tileH );
      die.show(s);
      
      //rect(x*tileW, y*tileH, tilesX, tilesY);
      
        
      }
   }
}
class Die
{
  //variable declarations here
  int dots;
  int myX;
  int myY;

  Die(float x, float y) //constructor
  {
    roll();
    myX = x;
    myY= y;
  }
  void roll()
  {
    if (s(6) <= 1)
    {
      dots = 1;
    } else if (random(6) <= 2) // remove random?
    {
      dots = 2;
    } else if (random(6) <= 3) // remove random?
    {
      dots = 3;
    } else if (random(6) <= 4) // remove random?
    {
      dots = 4;
    } else if (random(6) <= 5) // remove random?
    {
      dots = 5;
    } else if (random(6) <= 6) // remove random?
    {
      dots = 6;
    }
  }
  void show(int s )
  {
    fill(255,255,255);
    rect(myX, myY, 50, 50);
    fill(0, 0, 0);

    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 · October 30, 2022, 12:52am

My image is 800 pixels by 800 pixels.

asymmetric · October 30, 2022, 12:53am

“The method show() in the type “sketch” Die is not applicable for the arguments (float)”

asymmetric · October 30, 2022, 12:58am

Thank you for your help @Chrisir ! I’m learning slowly but surely!!

scudly · October 30, 2022, 1:13am

use die.show( int(s) );

Java is being picky about converting a float to an int so you have to tell it explicitly that that’s what you want to do.

But also in your show() function, you need dots = s; so that it uses that value to choose how many dots to show.

asymmetric · October 30, 2022, 1:19am

I just fixed my code with your suggestions! I’m still recieving compiler erros… specifically line 47 says “cannot convert from float to int”.

myX = x;

PImage img;

void setup(){
  size(700,700);
  img = loadImage("IMG_7741.jpeg");
  img.resize(800,800);
}

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 = map(b, 0, 255, 1, 6); // 1-6 dice sides
      Die die = new Die(x*tileW, y*tileH );
      die.show(int(s)); // or s?
       
      }
   }
}
class Die
{
  //variable declarations here
  int dots;
  int myX;
  int myY;

  Die(float x, float y) //constructor
  {
    roll();
    myX = x;
    myY= y;
  }
  void roll()
  {
    if (s(6) <= 1) 
    {
      dots = 1;
    } else if (random(6) <= 2)
    {
      dots = 2;
    } else if (random(6) <= 3)
    {
      dots = 3;
    } else if (random(6) <= 4)
    {
      dots = 4;
    } else if (random(6) <= 5)
    {
      dots = 5;
    } else if (random(6) <= 6)
    {
      dots = 6;
    }
  }
  void show(int s )
  {
    fill(255,255,255);
    dots = s;
    rect(myX, myY, 50, 50);
    fill(0, 0, 0);

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

scudly · October 30, 2022, 1:30am

In class Die, change int myX; to float myX; and same for myY.

asymmetric · October 30, 2022, 1:37am

Okay! Now line 52 is creating a compiler error

“The function s(int) does not exist.”

    if (s(6) <= 1)

asymmetric · October 30, 2022, 1:39am

Should I change the random function to int s?

PImage img;

void setup(){
  size(700,700);
  img = loadImage("IMG_7741.jpeg");
  img.resize(800,800);
}

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 = map(b, 0, 255, 1, 6); // 1-6 dice sides
      Die die = new Die(x*tileW, y*tileH );
      die.show(int(s)); // or s?
       
      }
   }
}
class Die
{
  //variable declarations here
  int dots;
  float myX;
  float myY;

  Die(float x, float y) //constructor
  {
    roll();
    myX = x;
    myY= y;
  }
  void roll()
  {
    if (s <= 1) 
    {
      dots = 1;
    } else if (random(6) <= 2) // Change random to s?
    {
      dots = 2;
    } else if (random(6) <= 3) // Change random to s?
    {
      dots = 3;
    } else if (random(6) <= 4) // Change random to s?
    {
      dots = 4;
    } else if (random(6) <= 5)// Change random to s?
    {
      dots = 5;
    } else if (random(6) <= 6)// Change random to s?
    {
      dots = 6;
    }
  }
  void show(int s )
  {
    fill(255,255,255);
    dots = s;
    rect(myX, myY, 50, 50);
    fill(0, 0, 0);

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

scudly · October 30, 2022, 2:21am

You’re not using roll(), are you? Seems like you could just delete it if all you want is just the dice images.

Chrisir · October 30, 2022, 6:21am

You really don’t need this.

Read your code and understand the concepts. s is a variable and not a function

glv · October 30, 2022, 11:17am

Hello @asymmetric,

Consider just using this in your class or as a standalone function/method:

void show(float myX, float myY, float dots)
  {
 // Code here...
  }

You will also have to scale your die faces:

float sc = tileW/50; //50 is size of die face
println(sc, 1/sc);

push();
scale(sc, sc);
int s = int(random(0, 7));  // This will give 0 to 6! Use print() to see this before and after int()
die.show(1/sc*px, 10, s); //Class
//show(1/sc*px, 10, s);  // Function
pop();

The above is just one way to do it using your existing die class.

Scaled die faces:

You should write separate working examples for each element of your code and then combine them; I did this with the class and scaling before adding it to the image tiling.

I was able to achieve this with above hints:

Reference:

:)

asymmetric · October 30, 2022, 5:24pm

Thank you @glv ! I will re-read that chapter on Objects by Daniel Shiffman to get a stronger understanding!

Do I enter the following scaling code within the show() function or draw()? For now it is under the void draw(); block.

glv:

float sc = tileW/50; //50 is size of die face
println(sc, 1/sc);

push();
scale(sc, sc);
int s = int(random(0, 7));  // This will give 0 to 6! Use print() to see this before and after int()
die.show(1/sc*px, 10, s); //Class
//show(1/sc*px, 10, s);  // Function
pop();

asymmetric · October 30, 2022, 5:25pm

I removed the roll() dice function block!

Chrisir · October 30, 2022, 5:30pm

Draw is correct

Replace random by map… brightness…

asymmetric · October 30, 2022, 5:49pm

Do you mean that I didn’t need to completely remove the roll() block? Do I need to change the roll block’s functionality from random to map the brightness? Like so? Or should I put the following conditional statements in the show() function?

  void brightness()
  {
    if (s <= 1) 
    {
      dots = 1;
    } else if (s <= 2) 
    {
      dots = 2;
    } else if (s <= 3)
    {
      dots = 3;
    } else if (s <= 4) 
    {
      dots = 4;
    } else if (s <= 5)
    {
      dots = 5;
    } else if (s <= 6)
    {
      dots = 6;
    }
  }

Chrisir · October 30, 2022, 10:16pm

You should really read my initial post, read your code and understand the idea we’re following.

You are making things far too complicated.

s=dots;

asymmetric · October 31, 2022, 6:41pm

Hi @chrisir & @glv ! I read your code, as well as my code and I re-read the chapter on objects, yet I am still feeling confused as to how to connect the dice values to the value of the pixels… Can you steer me in the right direction?

PImage img;

void setup(){
  size(700,700);
  img = loadImage("IMG_7741.jpeg");
  img.resize(800,800);
}

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 = 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
      println(sc, 1/sc);

      push();
      scale(sc, sc);
      //int s = int(random(0, 7));  // This will give 0 to 6! Use print() to see this before and after int()
      die.show(1/sc*px, 10, s); //Class
      //show(1/sc*px, 10, s);  // Function
      pop();
      }
   }
}
class Die
{
  //variable declarations here
  int dots;
  float myX;
  float myY;

  Die(float x, float y) //constructor
  {
    int dots = s;
    float myX = x;
    float myY= y;
  }

  void show(float myX, float myY, float dots )
  {
    fill(255,255,255);
    dots = s;
    rect(myX, myY, 50, 50);
    fill(0, 0, 0);

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

Chrisir · October 31, 2022, 6:45pm

maybe here you use the position parameters
xtileW , y tileH, s

Otherwise test it and debug it

asymmetric · October 31, 2022, 7:59pm

Die(float x, float y) //constructor
  {
    int dots = s;
    float myX = x;
    float myY= y;
  }

“s cannot be resolved to a variable”

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

Creating a grid of dice representing an image

Related topics