視覺時鐘：新加工

回到我的視頻時鐘。我需要一些指導。我正在嘗試製作一個「時鐘」圖表，用於記錄時間（以小時爲單位），直到用戶輸入的事件發生時爲止，例如直到他們吃晚飯，睡覺等等。在我的素描中，「現在」是深灰色線條左邊，我想建立一個系統，倒計時這些輸入時間，實時。白色蜱象徵着一天24小時。我還希望梯度根據外部亮度根據「現在」改變。建議製圖，但我甚至不知道從哪裏開始。這裏是我的素描和代碼：任何幫助，你會感激！視覺時鐘：新加工

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

來源

2015-11-07 Madeline Engle

你有沒有想過這個想法？ –

這真的很難回答「我怎麼做呢？」或「我該如何開始？」類型問題，所以它們通常被認爲是堆棧溢出的主題。堆棧溢出是更具體的「我試過X，預計Y，但得到Z而不是」類型的問題。

這就是說，你的問題是「我該如何開始編寫像這樣的草圖？」，我會盡力回答。

開始一個編程項目的黃金法則是：開始較小。 Try to break your end goal down into much smaller individual steps，然後嘗試一次執行一個這些步驟。你已經有了一個草圖來完成繪製顯示的步驟，這很好。現在創建一個單獨的草圖，只顯示當前時間。這可能看起來很愚蠢，或者比你感興趣的小，但這很好。這就是你開始一個大型編程項目的方式：把它分解成看起來太小而不感興趣的小塊。

在創建這些單獨的草圖，只做你的大主要目標的一小塊，Processing reference是你最好的朋友。查看時間&日期部分有用功能的參考。這裏有一個小例子草圖，只是顯示當前時間：

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() function參考表明顯示的時間在一個簡單的可視化的例子：

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-07 13:22:06

視覺時鐘：新加工

回答

相關問題