Hope's
Sleep
Journal

Key
Time Slept
Time Woke Up
Alarms

Incremental Circle Chart:
time representation from from 12:00 AM to 12:00 PM

Radial lines:
each line emanating from the center signify individual dates

let numDays; let sleepData = []; let timeString; let angleIncrement; function preload() { table = loadTable("sleep.php", "csv", "header"); } function setup() { createCanvas(800, 800); noLoop(); angleMode(DEGREES); initDropdown(); numDays = table.getRowCount(); document.getElementById('dateDropdown').addEventListener('change', updateSleepDataDisplay); document.getElementById('form').addEventListener('submit', function(event) { event.preventDefault(); // Prevent the default form submission behavior // Get the selected radio button value const selectedDay = document.querySelector('input[name="day"]:checked').value; // Check if "Show all Days" is not selected if (selectedDay !== 'Show all Days') { // Find the index of the selected date in the sleepData array const selectedIndex = sleepData.findIndex(entry => entry.date === selectedDay); if (selectedIndex === -1) { console.log("Selected date not found in data"); return; } // Define an array to store filtered data const filteredData = []; // Push the selected date into the filtered data filteredData.push(sleepData[selectedIndex]); // Start from the next index after the selected date and push every 7th day for (let i = selectedIndex + 7; i < sleepData.length; i += 7) { filteredData.push(sleepData[i]); } // Redraw or update the chart with the filtered data redrawChart(filteredData); } else { // If "Show all Days" is selected, redraw the chart with all days redrawChart(sleepData); } }); for (var r = 0; r < table.getRowCount(); r++) { var date = table.getString(r,0); var bedtime = table.getString(r,1); var wake = table.getString(r,2); var alarm1 = table.getString(r,3); var alarm2 = table.getString(r,4); var alarm3 = table.getString(r,5); var day = table.getString(r,6); } sleepData.push(new SleepDate(date, bedtime, wake, alarm1, alarm2, alarm3, day)) } //let timeStrings = ["10:30:00", "8:45:30", "12:00:00"]; function initDropdown() { let dateDropdown = document.getElementById('dateDropdown'); for (let i = 1; i < table.getRowCount(); i++) { let date = table.getString(i, 0).replace(/"/g, ' '); let option = document.createElement('option'); option.text = date; option.value = date; dateDropdown.add(option); } updateSleepDataDisplay(); // Call the function to populate the sleepDataDisplay initially } function updateSleepDataDisplay() { const selectedDate = document.getElementById('dateDropdown').value; const sleepDataDisplay = document.getElementById('sleepDataDisplay'); // Log the selected date console.log('Selected Date:', selectedDate); let bedtime = 'No bedtime data available'; let waketime = 'No waketime data available'; let alarm1 = 'No data available'; let alarm2 = 'No data available'; let alarm3 = 'No data available'; let found = false; // Iterate through each row in the table for (let i = 0; i < table.getRowCount(); i++) { console.log('Loop index (i):', i); // Log the loop index const date = table.getString(i, 0).replace(/"/g, ' ');; // Check if the date in the table matches the selected date if (date === selectedDate) { // If there's a match, extract the bedtime from the same row bedtime = table.getString(i, 1); waketime = table.getString(i, 2); alarm1 = table.getString(i, 3); alarm2 = table.getString(i, 4); alarm3 = table.getString(i, 5); found = true; // Mark that data is found break; // Exit loop once the data is found } } // Check if data is not found for the selected date if (!found) { console.log('No data found for the selected date:', selectedDate); } // Update the sleepDataDisplay div with the selected date and bedtime sleepDataDisplay.innerHTML = `

Selected Date: ${selectedDate}

Bedtime: ${bedtime} , Waketime: ${waketime}

Alarms before Waketime: ${alarm1} ${alarm2} ${alarm3} `; // Log the extracted bedtime console.log('Extracted bedtime:', bedtime); } function draw() { background(0); translate(width / 2, height / 2); stroke(255); noFill(); // Draw concentric circles for different hours for (let i = 1; i <= 12; i++) { let hour = i; let radius = map(hour, 1, 13, 100, width / 2 - 50); let fromColor = color(0, 0, 255); // Blue let toColor = color(255, 165, 0); // Orange let gradientColor = lerpColor(fromColor, toColor, map(radius, 100, width / 2 - 50, 0, 1)); stroke(gradientColor); ellipse(0, 0, radius * 2, radius * 2); } // Label the hours from 1 to 11 as AM for (let i = 1; i <= 11; i++) { let hour = i; let radius = map(hour, 1, 12, 100, width / 2 - 50); let fromColor = color(65, 105,255); // Blue let toColor = color(255, 165, 0); // Orange let gradientColor = lerpColor(fromColor, toColor, map(radius, 100, width / 2 - 50, 0, 1)); stroke(gradientColor); textAlign(CENTER, CENTER); textSize(12); let labelRadius = radius + (24 - (i * 1.5)); // Radius for labels let labelX = labelRadius * cos(-90); // X-coordinate for label let labelY = labelRadius * sin(-90); // Y-coordinate for label text(hour + " AM", labelX, labelY); } // Label 12 as PM let radius12 = map(12, 1, 13, 100, width / 2 - 50); textSize(12); textAlign(CENTER, CENTER); let labelRadius12 = radius12 + 26; // Radius for label let labelX12 = labelRadius12 * cos(-90); // X-coordinate for label let labelY12 = labelRadius12 * sin(-90); // Y-coordinate for label text("12 PM", labelX12, labelY12); let Color = color(255, 165, 0); let radius = map(13, 1, 13, 100, width / 2 - 50); stroke(Color); ellipse(0, 0, radius * 2, radius * 2); let angleIncrement = 360 / numDays; fill(255); stroke(255, 90); for (let i = 1; i < numDays; i++) { let angle = i * angleIncrement; push(); rotate(angle); // radial line line(0, 0, 0, (-height / 2 + 50)); let dateString = table.getString(i, 0).replace(/"/g, ' '); // text position let labelX = 0; let labelY = -height / 2 + 35; // date label text(dateString, labelX, labelY); pop(); } // for (let i = 1; i < numDays; i++) { // let angle = i * angleIncrement; // let bedtime = table.getString(i, 1); // let hours = timeToHoursFloat(bedtime); // // Calculate radius based on hours // let radius = map(hours * 20, 0, 24 * 20, 50, width / 2 - 50); // // Calculate Cartesian coordinates // let x = radius * cos(angle); // let y = radius * sin(angle); // fill(255); // ellipse(x, y, 5, 5); // } for (let i = 0; i < numDays; i++) { bedtimeString = table.getString(i,1); let hoursFloat = timeToHoursFloat(bedtimeString); console.log("Time String: " + bedtimeString + " Hours Float: " + hoursFloat); } // for (let i = 0; i < numDays; i++) { // wakeString = table.getString(i,1); // let hoursFloat = timeToHoursFloat(wakeString); // console.log("Time String: " + wakeString + " Hours Float: " + hoursFloat); // } function timeToHoursFloat(time) { // split the time string into hours, minutes, and seconds let [hours, minutes, seconds] = time.split(':').map(Number); // calculate the total time in hours let totalHours = hours + (minutes / 60) + (seconds / 3600); return totalHours; } fill(0); ellipse(0, 0, 200, 200); for (let i = 1; i < numDays; i++) { textSize(14); let angle = i * angleIncrement; push(); rotate(angle); stroke(255, 90); strokeWeight(15); let startX = 0; let startY = -100 - (timeToHoursFloat(table.getString(i,1))*21); let endX = 0; let endY = -100 - ((timeToHoursFloat(table.getString(i,2)))*21); line(startX, startY, endX, endY); // radial line starting 100 units out pop(); } for (let i = 1; i < numDays; i++) { let angle = i * angleIncrement; push(); rotate(angle); fill(255); let startX = 0; let startY = -100 - (timeToHoursFloat(table.getString(i,2))*21); ellipse(startX, startY, 10, 10); pop(); } for (let i = 1; i < numDays; i++) { let angle = i * angleIncrement; push(); rotate(angle); stroke(255); noFill(); let startX = 0; let startY = -100 - (timeToHoursFloat(table.getString(i,1))*21); ellipse(startX, startY, 10, 10); pop(); } for (let i = 1; i < numDays; i++) { let angle = i * angleIncrement; push(); rotate(angle); fill(255, 0, 0); let startX = 0; let startY = -100 - (timeToHoursFloat(table.getString(i,5))*21); ellipse(startX, startY, 5, 5); pop(); } for (let i = 1; i < numDays; i++) { let angle = i * angleIncrement; push(); rotate(angle); fill(255, 0, 0); let startX = 0; let startY = -100 - (timeToHoursFloat(table.getString(i,4))*21); ellipse(startX, startY, 5, 5); pop(); } for (let i = 1; i < numDays; i++) { let angle = i * angleIncrement; push(); rotate(angle); fill(255, 0, 0); let startX = 0; let startY = -100 - (timeToHoursFloat(table.getString(i,3)*21)); ellipse(startX, startY, 5, 5); pop(); } } function redrawChart(data) { background(0); translate(width / 2, height / 2); stroke(255); noFill(); // Calculate the angle increment based on the number of data points let angleIncrement = 360 / data.length; // Adjust other parameters based on the length of data let radiusMax = min(width, height) / 2 - 50; let textSizeFactor = min(width, height) / 100; // Draw concentric circles for different hours for (let i = 1; i <= 12; i++) { let hour = i; let radius = map(hour, 1, 13, 100, radiusMax); let fromColor = color(0, 0, 255); // Blue let toColor = color(255, 165, 0); // Orange let gradientColor = lerpColor(fromColor, toColor, map(radius, 100, radiusMax, 0, 1)); stroke(gradientColor); ellipse(0, 0, radius * 2, radius * 2); } // Draw radial lines and labels for each data point for (let i = 0; i < data.length; i++) { let angle = i * angleIncrement; push(); rotate(angle); // Draw radial lines and labels... pop(); } // Draw points for bedtime and wake time for each data point for (let i = 0; i < data.length; i++) { let angle = i * angleIncrement; push(); rotate(angle); // Draw points... pop(); } // Draw additional elements as needed based on your data } class SleepDate{ constructor(Primary_Date, Bedtime, Wake_Time, Alarm1, Alarm2, Alarm3, Day){ // data properties this.date = Primary_Date; this.bedtime = Bedtime; this.wake = Wake_Time; this.alarm1 = Alarm1; this.alarm2 = Alarm2; this.alarm3 = Alarm3; this.date = Day; } }