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	344	December 21, 2022
Creating variation in grid with random(); & image Coding Questions	27	555	December 19, 2022
3D Perlin noise in Processing Coding Questions	30	1222	July 12, 2022
Colouring pixels Coding Questions	25	1319	November 18, 2019
Image() is slow, are there any alternatives? Coding Questions	24	1992	April 28, 2020

Creating a grid of dice representing an image

Related topics