Визуальные часы: новые для обработки

Question

Назад с моими визуальными часами. Мне нужно немного руководства. Я пытаюсь сделать «график часов», который подсчитывает время (в часах) до тех пор, пока события, которые вводит пользователь, например, пока они не едят обед, не спать и т. Д. В моем эскизе «сейчас» находится темно-серая линия на влево, и я хотел бы создать систему, которая учитывает эти времена ввода по отношению к реальному времени. Белые клещи означают 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(); 

Answer 1

Это действительно трудно ответить "как я это делаю?" или «как мне начать?» типа, поэтому они обычно считаются вне темы на переполнение стека. Stack Overflow больше подходит для конкретных «Я попробовал 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); 
} 

Оттуда, постоянно спрашивать себя: , что является абсолютным, наименьшее, самое простое, что я знаю, что нужно делать дальше? Если что-то кажется запутанным или слишком большим, тогда сломайте его еще дальше.Создайте кучу крошечных эскизов, которые делают только одно, и думайте только о том, чтобы объединить их, когда у вас есть они сами. Таким образом, когда вы застрянете, вы сможете задать более конкретные вопросы, разместив небольшой набросок, на котором вы застряли.

Вместо того, чтобы фокусироваться на большой картинке и пытаться сделать это все сразу, разбить ее на более мелкие кусочки и сосредоточиться только на одной маленькой кусочке за раз.

Удачи и счастливого кодирования!