1

視覚時計で再び戻る。少しご案内が必要です。夕食や睡眠など、ユーザーが入力するイベント時間までの時間 (時間単位) をカウントダウンする「時計」グラフを作成しようとしています。私のスケッチでは、「今」は上の濃い灰色の線です。これらの入力時間をリアルタイムでカウントダウンするシステムを作成したいと思います。白い目盛りは 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 ではトピック外と見なされます。スタック オーバーフローは、特定の「X を試し、Y を期待したが、代わりに Z を取得した」タイプの質問に適しています。

そうは言っても、あなたの質問は「このようなスケッチのプログラミングを開始するにはどうすればよいですか?」ということです。、そして私はそれに答えようとします。

プログラミング プロジェクトを開始するための黄金律は、小さく始めることです。最終目標をより小さな個々のステップに分割し、それらのステップを 1 つずつ実行してみてください。ディスプレイを描画するステップを実行するスケッチが既にあります。これは素晴らしいことです。ここで、現在の時刻のみを示す別のスケッチを作成します。これはばかげている、または興味のあるものよりも小さいように見えるかもしれませんが、それは良いことです。これが、大きなプログラミング プロジェクトを開始する方法です。小さすぎて面白くないと思われる断片に分割します。

大きな主な目標の小さな部分を 1 つだけ実行するこれらの個別のスケッチを作成する場合、Processing リファレンスは最良の友です。便利な機能については、リファレンスの時刻と日付のセクションをご覧ください。現在の時刻を表示するだけのスケッチの例を次に示します。

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

そこから、自分自身に問い続けてください:次にしなければならないことがわかっている絶対的で、最小で、最も単純なことは何ですか? 何かがわかりにくい、または大きすぎると思われる場合は、さらに細かく分割してください。1 つのことだけを行う小さなスケッチをたくさん作成し、単独で作業する場合はそれらを組み合わせることだけを考えてください。そうすれば、行き詰まったときに、行き詰まっている小さなスケッチを投稿することで、より具体的な質問をすることができます.

全体像に集中して一度にすべてをやろうとするのではなく、小さな断片に分解し、一度に 1 つの小さな断片だけに集中します。

幸運を祈ります。コーディングをお楽しみください。

于 2015-11-07T13:22:06.607 に答える