1

带着我的视觉时钟再次回来。我需要一点指导。我正在尝试制作一个“时钟”图表，该图表倒计时（以小时为单位）直到用户输入的事件时间，例如直到他们吃晚饭，睡觉等。在我的草图中，“现在”是深灰色的线左边，我想创建一个系统，对这些输入时间进行倒计时，与实时相关。白色刻度表示一天 24 小时。我还希望渐变相对于“现在”发生变化，具体取决于外部的亮度。有人建议映射，但我什至不知道从哪里开始。这是我的草图和代码：感谢您的任何帮助！

我在 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();
4

1 回答 1

5

真的很难回答“我该怎么做？” 或“我该如何开始？” 类型问题，因此它们通常被认为在 Stack Overflow 上是题外话。Stack Overflow 更适用于特定的“我尝试了 X，预期 Y，但得到了 Z”类型的问题。

话虽如此，您的问题是“我如何开始编写这样的草图？” ，我会试着回答这个问题。

开始一个编程项目的黄金法则是：从小处着手。尝试将您的最终目标分解为更小的单个步骤，然后尝试一次完成这些步骤。您已经有了一个草图，可以完成绘制显示的步骤，这很棒。现在创建一个仅显示当前时间的单独草图。这可能看起来很愚蠢，或者比您感兴趣的要小，但这很好。这就是你开始一个大型编程项目的方式：将它分解成看起来太小而有趣的部分。

在创建这些仅完成您的主要目标的一小部分的单独草图时，处理参考是您最好的朋友。查看参考资料的时间和日期部分，了解一些有用的功能。这是一个仅显示当前时间的小示例草图：

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

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

从那里开始，在这个小示例中创建倒数计时器比继续专注于大目标更容易。这是倒计时到午夜的一个：

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

既然您已经完成了这项工作，那么进行小的增量更改以越来越接近您的目标会更容易。您可能要做的下一件事是显示时间的简单可视化而不是文本。同样，参考是您最好的朋友：minute() 函数的参考显示了一个示例，该示例以简单的可视化方式显示时间：

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

我们可能会尝试将这种类型的逻辑添加到我们的小型倒计时草图中。像这样的东西：

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

从那里开始，不断问自己：我知道接下来需要做的绝对、最小、最简单的事情是什么？如果某件事看起来令人困惑或太大，那就进一步分解它。创建一堆只做一件事的小草图，当你让它们自己工作时才考虑组合它们。这样，当您遇到困难时，您可以通过发布您卡住的小草图来提出更具体的问题。

与其专注于大局并试图一次完成所有工作，不如将其分解成更小的部分，一次只关注一个小部分。

祝你好运，编码愉快！

于 2015-11-07T13:22:06.607 回答