Visual Clock: New to Processing

Question

Back again with my visual clock. I need a bit of guidance. I am trying to make a "clock" graph that counts down the time (in hours) until event times that a user inputs, such as until they eat dinner, sleep etc. In my sketch, "now" is the dark grey line on the left, and I would like to create a system that counts down these input times, in relation to real time. The white ticks signify 24 hrs in a day. I also want the gradient to change in relation to "now" depending on the lightness outside. Mapping was suggested, but I don't even know where to start. Here is my sketch and code: any help you be appreciated!

My Sketch in Illustrator

PFont din;
PFont din2;
color blue = color(0, 80, 200);
color orange = color(255, 150, 50);
int hr = hour();
float w, h, angle;


void setup () {
  size (1100, 600, P2D);
  din = loadFont("DIN-Medium-30.vlw");
  din2 = loadFont("DIN-Medium-15.vlw");
}


void draw() {

  background(255);

  gradientRect(90, 470, 850, 50, blue, orange);
  fill(0, 102, 153);
  textFont(din);

  if (hr > 12) {
    hr=hour()-12;

    text("pm", 220, 55);
  } else {
    text ("am", 220, 55);
  }

  text(nf(hr, 2)+":", 86, 55); 
  text(nf(minute(), 2)+":", 126, 55); 
  text(nf(second(), 2), 166, 55);

  textFont(din2);
  text("SLEEP", 25, 350);
  stroke(255);

  textFont(din2);
  text("TEST", 25, 250);

  textFont(din2);
  text("DINNER", 25, 150);

  //GREY RECT
  strokeWeight(0);
  fill(209);
  rect(90, 70, 850, 400);

  //DINNER
  strokeWeight(2);
  stroke(255);
  noFill();
  rect(90, 130, 850, 30);

  //TEST
  strokeWeight(2);
  stroke(255);
  noFill();
  rect(90, 230, 850, 30);

  //SLEEP
  strokeWeight(2);
  stroke(255);
  noFill();
  rect(90, 330, 850, 30);

  //NOW
  stroke(150);
  strokeWeight(5);
  line(90, 470, 90, 75);

  //24 HRS
  stroke(255);
  strokeWeight(2);

  translate(90, 230);

  // TIME
  angle = millis();
  w = hr=hour()-12;
  h = 30;    

  fill(255);
  rect(0, 0, w, 100);
  strokeWeight(0);
}

//Gradiant
void gradientRect(int x, int y, int w, int h, color c1, color c2) {
  beginShape();
  fill(c1);
  vertex(x, y);
  vertex(x, y+h);
  fill(c2);
  vertex(x+w, y+h);
  vertex(x+w, y);
  endShape();
}

//input, output - calculations, get second();
//map();

Did you ever get this figured out? – Kevin Workman Dec 06 '17 at 00:27 — Kevin Workman, Dec 06 '17 at 00:27

Kevin Workman · Answer 1 · 2017-06-19T20:11:40.283

It's really hard to answer "how do I do this?" or "how do I start?" type questions, so they're generally considered off-topic on Stack Overflow. Stack Overflow is more for specific "I tried X, expected Y, but got Z instead" type questions.

That being said, your question is "How do I start programming a sketch like this?", and I'll try to answer that.

The golden rule to starting a programming project is: start smaller. Try to break your end goal down into much smaller individual steps, and then try to do those steps one at a time. You've already got a sketch that does the step of drawing a display, and that's great. Now create a separate sketch that only shows the current time. This might seem dumb, or smaller than what you're interested in, but that's good. That's how you start a big programming project: by breaking it down into pieces that seem too small to be interesting.

In creating these separate sketches that only do one small piece of your big main goal, the Processing reference is your best friend. Check out the Time & Date section of the reference for some useful functions. Here's a little example sketch that just shows the current time:

void draw() {
  background(0);
  int h = hour();
  int m = minute();
  int s = second();

  String time = h + ":" + m + ":" + s;
  text(time, 10, 50);
}

From there, it's easier for you to create a countdown timer in this small example than if you keep focusing on your big goal. Here's one that counts down until midnight:

void draw() {
  background(0);
  int h = 24-hour();
  int m = 60-minute();
  int s = 60-second();

  String time = h + ":" + m + ":" + s;
  text(time, 10, 50);
}

Now that you've got that working, it'll be easier to make small, incremental changes to get closer and closer to your goal. The next thing you might do is show a simple visualization of the time instead of text. Again, the reference is your best friend: the reference for the minute() function shows an example that shows the time in a simple visualization:

void draw() {
  background(204);
  int s = second();  // Values from 0 - 59
  int m = minute();  // Values from 0 - 59
  int h = hour();    // Values from 0 - 23
  line(s, 0, s, 33);
  line(m, 33, m, 66);
  line(h, 66, h, 100);
}

And we might try to add that type of logic to our small countdown sketch. Something like this:

void draw() {
  background(128);
  int h = 24-hour();
  int m = 60-minute();
  int s = 60-second();

  line(s, 0, s, 33);
  line(m, 33, m, 66);
  line(h, 66, h, 100);
}

From there, keep asking yourself: what is the absolute, smallest, simplest thing I know I need to do next? If something seems confusing or too big, then break it down even further. Create a bunch of tiny sketches that only do one thing, and only think about combining them when you have them working by themselves. That way, when you get stuck, you'll be able to ask more specific questions by posting the small sketch that you're stuck on.

Instead of focusing on the big picture and trying to do it all at once, break it down into smaller pieces, and focus on only one small piece at a time.

Good luck, and happy coding!

Visual Clock: New to Processing

1 Answers1