Digital Clock Made from image

[F_War]

Hi!
I am very very new to processing. I did a few classes with the basics but I cannot wrap my head around it.

I am trying to make a clock from pictures of numbers that I have taken.
I have pictures of 0,1, 2, 3 … 9 and I would like to make a functioning clock where the images change according to the actual time. Kind of like four slide shows next to each other changing independently.

So, let’s say the time is 13:10 I would have an image of 1, 3, 1 and 0.

I think I can figure out how to place the images and make a slide show but I am not sure how to code it to the actual time, or assign an image to a minute or hour. I would appreciate any help or direction.

Thanks!

[hotfooted]

you could store you images in an array and address them by using the hour and minutes functions built into processing i’ll only include the hour function as it contains an example of minutes and seconds as well (i know you’re not using seconds but still nice to have the option)

hour

so basically you would take the hour and

  /this is terrible but gives you an idea of what to do for each digit
  //to get an index into your image array
  
  //get the hour
  String h = str(hour());
  //get the first digit of the hour string as an int to use as an index into the image array
  int h1 = int(str(h.charAt(0)));
  //get the second digit of the hour string as an int to use as an index into the image array
  int h2 = int(str(h.charAt(1)));
  
  //test we have the correct values
  println("h1: " + h1);
  println("h2: " + h2);

[F_War]

Thank you for your reply. Thank you for the seconds suggestion!

This is the Array I have, I don’t understand how to combine this array with your suggestion. could you please explain me a bit more ho to get from the array to the string?

I thought I will attach a screenshot from a mock-up I made in photoshop to illustrate what I mean.

PImage p0, p1, p2, p3, p4, p5, p6, p7, p8, p9;
PImage [] picArray = new PImage[10];

void setup (){
size(900,600);
p0 = loadImage(“0w.png”);
p1 = loadImage(“1w.png”);
p2 = loadImage(“2w.png”);
p3 = loadImage(“3w.png”);
p4 = loadImage(“4w.png”);
p5 = loadImage(“5w.png”);
p6 = loadImage(“6w.png”);
p7 = loadImage(“7w.png”);
p8 = loadImage(“8w.png”);
p9 = loadImage(“9w.png”);
picArray[0] = p0;
picArray[1] = p1;
picArray[2] = p2;
picArray[3] = p3;
picArray[4] = p4;
picArray[5] = p5;
picArray[6] = p6;
picArray[7] = p7;
picArray[8] = p8;
picArray[9] = p9;

}

[hotfooted]

Assuming you have your images in the data folder of your sketch you can just load the images as shown below

PImage[] digits;

void setup() {
  digits = new PImage[10];
  for (int i = 0; i < 10; i++) {
    //making the assumption that the images are just called 0-9.png
    digits[i] = loadImage("data/" + i + ".png");
  }
}

//and just to demonstrate drawing the hour. i haven't tested this but i'm fairly sure it's correct
void draw() {
  background(255);
  //get the hour
  String h = str(hour());
  //get the first digit of the hour string as an int to use as an index into the image array
  int h1 = int(str(h.charAt(0)));
  //get the second digit of the hour string as an int to use as an index into the image array
  int h2 = int(str(h.charAt(1)));

  image(digits[h1], 0, 0);
  image(digits[h2], digits[h1].width, 0);
}

[F_War]

Cool I will dig into that. Thank you!

[hotfooted]

just a note if you are going with 24hr time you might need to pad the digits you get in the am as I think the hour function returns 0-23 or something along those lines so when it returns 9 as the hour the string will only contain one character and you would end up with an out of bounds error it’s probably best just to replace

this

String h = str(hour());

with this

String h = nf(hour(), 2);

it’s just to ensure there is always 2 digits to reference.

[F_War]

thank you, I will replace that. I am trying to do the minutes now.

[F_War]

Ok fantastic! its working.
I have one more question. What if I have two sets of numbers: one green and one white and I would like to alternate them like on the image above should I do a new
“digits” set?

[F_War]

Solved ! @hotfooted Thank you again!

[hotfooted]

no worries. there are heaps of ways you could do all of this and the demo code above is far from great. just a note with wanting to swap between sets of images it might be easier to do something like this

PImage digitsStrip;
int digitWidth;
int digitHeight;
void setup() {
  size(640, 480, P2D);
  digitsStrip = loadImage("digitsStripAlt1.png");
  digitWidth = 52;
  digitHeight = 64;
}

void draw() {
  background(0);
  //get the hour
  String h = nf(hour(), 2);
  //get the first digit of the hour string as an int to use as an index into the image array
  int h1 = int(str(h.charAt(0)));
  //get the second digit of the hour string as an int to use as an index into the image array
  int h2 = int(str(h.charAt(1)));
  
  //now instead of using h1 and h2 as references into an array you use them as offsets
  //into the digitsStrip image just note that .get() is slow when you are doing many things
  //and there are alternatives to this method it's just simple and clean with the trade off
  //of performance
  image(digitsStrip.get(h1 * digitWidth, 0, digitWidth, digitHeight), 0, 0);
  image(digitsStrip.get(h2 * digitWidth, digitHeight, digitWidth, digitHeight), digitWidth, 0);
}

and this is the digitsStrip image used in the example

anyways best of luck with it all