title
Coding Challenge #74: Clock with p5.js

description
In this coding challenge, I attempt to program a clock in HTML5 canvas with the p5.js library. Code: https://thecodingtrain.com/challenges/74-clock 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/2lvHFWPbW 🎥 Next video: https://youtu.be/RPz75gcHj18?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📓 Golan Levin's notes on MAEDA’S 12 O’CLOCKS: http://cmuems.com/2016/60212/lectures/lecture-09-09b-clocks/maedas-clocks/ 🕐 Alca's Clock Collection: https://codepen.io/collection/DqRNLQ/ 📄 ICM-2017 Syllabus: https://github.com/ITPNYU/ICM-2017 Videos: 🎥 Livestream Archive: https://youtu.be/BcbS0MR3vxQ Related Coding Challenges: 🚂 #66 JavaScript Countdown Timer: https://youtu.be/MLtAMg9_Svw Timestamps: 0:00 Introducing today's topic 0:44 Inspiration 2:15 How do we get the time information? 3:15 Add a digital clock 4:55 Use arcs to visualize the time 7:05 Add angleMode() 9:17 Map the end of the arc to the seconds, minutes, and hour 12:07 Translate to the center of canvas and rotate by -90 degrees 15:15 Add hour, minutes, and second hands 18:57 Concluson and creative possibilities Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #beginner #clocks #generativeart #javascript #p5js

detail
{'title': 'Coding Challenge #74: Clock with p5.js', 'heatmap': [{'end': 262.119, 'start': 237.83, 'weight': 0.973}, {'end': 1128.533, 'start': 1115.948, 'weight': 0.712}], 'summary': 'Tutorial series covers creating unique clocks in p5.js, including a particle clock and visualizing time with arcs, demonstrating mapping time to clock angles and creative 24-hour clock design, as well as addressing clock rotation problems and the process of creating a clock in p5 using basic programming knowledge and drawing techniques.', 'chapters': [{'end': 115.642, 'segs': [{'end': 83.917, 'src': 'embed', 'start': 24.604, 'weight': 0, 'content': [{'end': 29.73, 'text': 'Make a clock in whatever imaginative crazy way has never been done before,', 'start': 24.604, 'duration': 5.126}, {'end': 37.179, 'text': "and it's really easy to get the time information with p5.js and then it's just up to you to figure out what to draw based on that time information.", 'start': 29.73, 'duration': 7.449}, {'end': 41.744, 'text': 'Now, the inspiration for this idea comes from That was a very loud squeak.', 'start': 37.219, 'duration': 4.525}, {'end': 44.665, 'text': "John Mida's 12 O'Clocks.", 'start': 42.464, 'duration': 2.201}, {'end': 48.728, 'text': 'So John Mida, this is a project from 1996 to 97 made for Classic Mac.', 'start': 45.026, 'duration': 3.702}, {'end': 51.249, 'text': "You can see here are examples of John Mida's 12 clocks.", 'start': 48.748, 'duration': 2.501}, {'end': 67.463, 'text': 'And this documentation page was created by Golan Levin, who,', 'start': 61.816, 'duration': 5.647}, {'end': 78.994, 'text': "for his course at Carnegie Mellon University oh that's from last year maybe has an assignment which is to create your own clock.", 'start': 67.463, 'duration': 11.531}, {'end': 82.436, 'text': "And so here's an example clock made in p5.js, a template.", 'start': 79.334, 'duration': 3.102}, {'end': 83.917, 'text': "And you can see, this is what I'm talking about.", 'start': 82.676, 'duration': 1.241}], 'summary': "Create a unique clock using p5.js inspired by john mida's 12 o'clocks.", 'duration': 59.313, 'max_score': 24.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY24604.jpg'}], 'start': 0.7, 'title': 'Creating unique clocks in p5.js', 'summary': "Delves into the process of designing imaginative clocks using p5.js, drawing inspiration from john mida's 12 o'clocks and a carnegie mellon university assignment, with the goal of fostering a collection of distinct clocks.", 'chapters': [{'end': 115.642, 'start': 0.7, 'title': 'Creating innovative clocks in p5.js', 'summary': "Explores the process of creating imaginative clocks using p5.js, inspired by john mida's 12 o'clocks and the assignment from carnegie mellon university, aiming to inspire a world of unique clocks.", 'duration': 114.942, 'highlights': ["The process involves creating imaginative clocks using p5.js, inspired by John Mida's 12 O'Clocks and the assignment from Carnegie Mellon University, aiming to inspire a world of unique clocks.", 'An assignment from Carnegie Mellon University encourages creating original clocks, leading to a vast world of unique clocks inspired by the coding challenge.', "John Mida's 12 O'Clocks project from 1996 to 97 for Classic Mac serves as an inspiration for inventing new ways of displaying time, showcasing the potential for creativity and expression in programming and graphics.", "Golan Levin's documentation page provides a template for creating clocks in p5.js, offering a starting point for individuals to express their creativity and develop unique clock designs."]}], 'duration': 114.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY700.jpg', 'highlights': ["The process involves creating imaginative clocks using p5.js, inspired by John Mida's 12 O'Clocks and the assignment from Carnegie Mellon University, aiming to inspire a world of unique clocks.", 'An assignment from Carnegie Mellon University encourages creating original clocks, leading to a vast world of unique clocks inspired by the coding challenge.', "John Mida's 12 O'Clocks project from 1996 to 97 for Classic Mac serves as an inspiration for inventing new ways of displaying time, showcasing the potential for creativity and expression in programming and graphics.", "Golan Levin's documentation page provides a template for creating clocks in p5.js, offering a starting point for individuals to express their creativity and develop unique clock designs."]}, {'end': 277.867, 'segs': [{'end': 197.979, 'src': 'embed', 'start': 135.286, 'weight': 0, 'content': [{'end': 138.787, 'text': "So there's two things I want to talk about before I start writing some code.", 'start': 135.286, 'duration': 3.501}, {'end': 143.569, 'text': 'Number one is, how do I get the time information? So this is actually one of the things that P5 does for you.', 'start': 138.807, 'duration': 4.762}, {'end': 150.472, 'text': "I mean, it's just wrapping native JavaScript functions that are part of the browser for getting the current time based on your computer's clock.", 'start': 143.609, 'duration': 6.863}, {'end': 156.536, 'text': 'And if I go to the P5 reference, we can see those under time and date.', 'start': 152.453, 'duration': 4.083}, {'end': 161.16, 'text': 'So I can get the day, the hour, the minute, the month, the second, and the year.', 'start': 156.937, 'duration': 4.223}, {'end': 165.624, 'text': "I'm just going to use hour, minute, I'm just going to use, and second.", 'start': 161.32, 'duration': 4.304}, {'end': 168.325, 'text': 'I think it was with three, hour, minute, and second.', 'start': 166.204, 'duration': 2.121}, {'end': 174.588, 'text': 'Millis is a function that gives you the number of milliseconds that have passed since the sketch started.', 'start': 168.585, 'duration': 6.003}, {'end': 179.05, 'text': 'And this could be used for timers and keeping track of things and syncing an animation to a clock.', 'start': 174.628, 'duration': 4.422}, {'end': 181.991, 'text': "And it's interesting and useful, but I'm going to actually just pull.", 'start': 179.35, 'duration': 2.641}, {'end': 185.013, 'text': "And I'm not going to do fractionals of a second.", 'start': 182.311, 'duration': 2.702}, {'end': 189.355, 'text': "I'm just going to pull hour, minute, and second from P5.", 'start': 185.033, 'duration': 4.322}, {'end': 193.397, 'text': "So let's actually really quickly just spin up a digital clock.", 'start': 189.395, 'duration': 4.002}, {'end': 197.979, 'text': "So I'm going to say let hour equal hours.", 'start': 193.897, 'duration': 4.082}], 'summary': 'Utilizing p5.js to access time data for creating a digital clock.', 'duration': 62.693, 'max_score': 135.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY135286.jpg'}, {'end': 262.119, 'src': 'heatmap', 'start': 237.83, 'weight': 0.973, 'content': [{'end': 247.874, 'text': "colon plus minute plus colon plus second, and I'm going to put that at 10 comma 200.", 'start': 237.83, 'duration': 10.044}, {'end': 249.174, 'text': "So let's see if this works.", 'start': 247.874, 'duration': 1.3}, {'end': 251.855, 'text': 'We have a really quickly, there we go.', 'start': 249.515, 'duration': 2.34}, {'end': 262.119, 'text': 'We have our clock, right? It is now 6 0 8 And 28, 29, 30 seconds.', 'start': 252.216, 'duration': 9.903}], 'summary': 'The clock is set to 10:200 and currently shows 6:08:30.', 'duration': 24.289, 'max_score': 237.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY237830.jpg'}], 'start': 115.662, 'title': 'Creating a particle clock', 'summary': "Discusses creating a digital clock using p5.js, utilizing native javascript functions to obtain time information and displaying it in the format 'hour:minute:second' while highlighting the use of p5's millis function for tracking time in milliseconds.", 'chapters': [{'end': 277.867, 'start': 115.662, 'title': 'Creating a particle clock', 'summary': "Discusses creating a digital clock using p5.js, utilizing native javascript functions to obtain time information and displaying it in the format 'hour:minute:second' while highlighting the use of p5's millis function for tracking time in milliseconds.", 'duration': 162.205, 'highlights': ['The chapter discusses creating a digital clock using P5.js. It explains the process of programming a digital clock using P5.js to display the current time.', "Utilizing native JavaScript functions to obtain time information and displaying it in the format 'hour:minute:second'. The speaker explains how P5.js wraps native JavaScript functions to retrieve time information and uses functions like hours, minutes, and seconds to obtain the current time.", "Highlighting the use of P5's millis function for tracking time in milliseconds. The chapter emphasizes the usage of P5's millis function to track the number of milliseconds since the sketch started, showcasing its utility for timers and animation synchronization."]}], 'duration': 162.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY115662.jpg', 'highlights': ['The chapter discusses creating a digital clock using P5.js.', "Utilizing native JavaScript functions to obtain time information and displaying it in the format 'hour:minute:second'.", "Highlighting the use of P5's millis function for tracking time in milliseconds."]}, {'end': 542.038, 'segs': [{'end': 305.633, 'src': 'embed', 'start': 278.328, 'weight': 0, 'content': [{'end': 282.33, 'text': "And there's all sorts of interesting things I could do for designing, making a digital clock.", 'start': 278.328, 'duration': 4.002}, {'end': 284.813, 'text': "I'm leaving all of the creative ideas to you.", 'start': 283.03, 'duration': 1.783}, {'end': 286.797, 'text': 'But what I want to do is visualize the time.', 'start': 284.894, 'duration': 1.903}, {'end': 293.248, 'text': "So I think my idea to do something rather simple, but is a little bit more interesting than just bars, is I'm going to use arcs.", 'start': 287.097, 'duration': 6.151}, {'end': 297.748, 'text': 'So this is what the ellipse function does in p5.', 'start': 294.946, 'duration': 2.802}, {'end': 305.633, 'text': 'The ellipse function draws an ellipse or a circle at a given xy according to some width and according to some height.', 'start': 298.068, 'duration': 7.565}], 'summary': 'Designing a digital clock using arcs with the ellipse function in p5.', 'duration': 27.305, 'max_score': 278.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY278328.jpg'}, {'end': 386.936, 'src': 'embed', 'start': 356.197, 'weight': 2, 'content': [{'end': 357.238, 'text': "Now I don't need that anymore.", 'start': 356.197, 'duration': 1.041}, {'end': 358.439, 'text': 'I can use that for debugging.', 'start': 357.278, 'duration': 1.161}, {'end': 362.727, 'text': "I'm going to draw an ellipse at 200, 200.", 'start': 358.739, 'duration': 3.988}, {'end': 367.112, 'text': "I'm going to say stroke weight 4, no fill.", 'start': 362.728, 'duration': 4.384}, {'end': 373.397, 'text': "And I'm going to give it a diameter of, let's just say, 200 right now.", 'start': 368.132, 'duration': 5.265}, {'end': 375.419, 'text': "Yeah, no, let's say 300.", 'start': 374.378, 'duration': 1.041}, {'end': 378.201, 'text': "And let's take a look at that.", 'start': 375.419, 'duration': 2.782}, {'end': 384.434, 'text': 'Oh, and I need to say stroke 255.', 'start': 380.042, 'duration': 4.392}, {'end': 386.936, 'text': "So there's my ellipse, right? That's the full ellipse.", 'start': 384.434, 'duration': 2.502}], 'summary': 'Drawing an ellipse at 200, 200 with a diameter of 300 and stroke weight 4.', 'duration': 30.739, 'max_score': 356.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY356197.jpg'}, {'end': 493.35, 'src': 'embed', 'start': 434.751, 'weight': 3, 'content': [{'end': 438.854, 'text': 'If I make the stroke weight of this 8, Whoops.', 'start': 434.751, 'duration': 4.103}, {'end': 446.327, 'text': 'Oh, and the stroke weight of this one, four.', 'start': 441.919, 'duration': 4.408}, {'end': 450.541, 'text': 'We can see the pink arc inside of the white one.', 'start': 447.438, 'duration': 3.103}, {'end': 455.245, 'text': 'And I could say with the arc, let me only have 180 degrees, half of that.', 'start': 451.402, 'duration': 3.843}, {'end': 461.911, 'text': "And you can see that it's drawing that inside only 180 degrees.", 'start': 455.585, 'duration': 6.326}, {'end': 471.059, 'text': 'And what I could do is I could say let end equal to map the mouse x location, which goes between 0 and width, between 0 and 360 degrees.', 'start': 461.991, 'duration': 9.068}, {'end': 473.662, 'text': 'And I could say end here.', 'start': 472, 'duration': 1.662}, {'end': 482.615, 'text': 'So you can see as I move the mouse, and this is a little, I want to do this kind of like the other way around actually.', 'start': 475.049, 'duration': 7.566}, {'end': 485.877, 'text': 'This is a little bit weird.', 'start': 482.635, 'duration': 3.242}, {'end': 490, 'text': "This makes no sense what I'm doing.", 'start': 488.699, 'duration': 1.301}, {'end': 490.881, 'text': "I'm going to get rid of.", 'start': 490.18, 'duration': 0.701}, {'end': 493.35, 'text': 'That one.', 'start': 492.97, 'duration': 0.38}], 'summary': 'Demonstrating drawing shapes, adjusting stroke weights, and using mouse location in coding.', 'duration': 58.599, 'max_score': 434.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY434751.jpg'}, {'end': 556.993, 'src': 'embed', 'start': 520.832, 'weight': 5, 'content': [{'end': 528.194, 'text': 'I can say open, which is filling it like this, not as a pie, but straight across without connecting the stroke.', 'start': 520.832, 'duration': 7.362}, {'end': 534.896, 'text': 'Or I can actually say chord, which is filling it like open, but by connecting the stroke.', 'start': 528.974, 'duration': 5.922}, {'end': 537.917, 'text': "So that's a small detail, but it's interesting to see how that works with arc, kind of useful.", 'start': 534.916, 'duration': 3.001}, {'end': 542.038, 'text': "I don't care about any of that because I want to say no fill.", 'start': 538.757, 'duration': 3.281}, {'end': 556.993, 'text': "So what I want to do now is, instead of just mapping this arc's location to the mouse, I want to say map the number of seconds,", 'start': 544.008, 'duration': 12.985}], 'summary': 'Demonstrating different ways of filling arcs in a drawing tool.', 'duration': 36.161, 'max_score': 520.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY520832.jpg'}], 'start': 278.328, 'title': 'Visualizing time with arcs in p5.js', 'summary': 'Delves into using arcs in p5.js to design a digital clock, illustrating the process of drawing ellipses with start and end angles. it also covers drawing ellipses and arcs with specific parameters, stroke weight, fill, color, and angle measurements in degrees. additionally, it demonstrates drawing a full arc from 0 to 360 degrees using p5.js, with options for filling the arc.', 'chapters': [{'end': 356.117, 'start': 278.328, 'title': 'Digital clock visualization with arcs', 'summary': 'Discusses the use of arcs in p5 to visualize time for designing a digital clock by drawing ellipses with start and end angles, providing a more interesting approach than using bars.', 'duration': 77.789, 'highlights': ['The arc function in p5 allows drawing ellipses with start and end angles, providing a creative way to visualize time for designing a digital clock.', 'The ellipse function in p5 draws ellipses or circles at a given xy with a specified width and height, offering flexibility in designing the digital clock.', 'Using arcs to visualize time provides a more interesting and creative approach compared to using bars, enhancing the design of the digital clock.']}, {'end': 461.911, 'start': 356.197, 'title': 'Drawing ellipses and arcs', 'summary': 'Discusses drawing ellipses and arcs using specific coordinates and parameters, including stroke weight, fill, color, diameter, and angle measurements in degrees, with examples and comparisons between different measurements and units.', 'duration': 105.714, 'highlights': ['The chapter explains how to draw an ellipse using specific coordinates and parameters such as stroke weight, fill, and diameter, providing an example of drawing an ellipse at 200, 200 with a diameter of 300.', 'It discusses drawing an arc with the same values as the ellipse and using the 0 to 360 degrees parameter to draw a full circle, while emphasizing the use of degrees as the unit of measurement for the arc function.', 'The chapter demonstrates changing the stroke weight and using the 0 to 180 degrees parameter to draw a partial arc, providing visual examples of the effects of these adjustments.']}, {'end': 542.038, 'start': 461.991, 'title': 'Using p5.js to draw a full arc', 'summary': "Demonstrates using p5.js to draw a full arc from 0 to 360 degrees, with options to fill in the arc using different methods like 'no fill', 'pi', 'open', and 'chord'.", 'duration': 80.047, 'highlights': ['The chapter shows using p5.js to map the mouse x location between 0 and width to draw a full arc from 0 to 360 degrees.', "Different fill options for the arc are demonstrated, including 'no fill', 'pi', 'open', and 'chord'.", "The varying ways to fill in the arc, such as 'no fill', 'pi', 'open', and 'chord', are explained, providing options for different visual effects."]}], 'duration': 263.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY278328.jpg', 'highlights': ['The arc function in p5 allows drawing ellipses with start and end angles, providing a creative way to visualize time for designing a digital clock.', 'Using arcs to visualize time provides a more interesting and creative approach compared to using bars, enhancing the design of the digital clock.', 'The chapter explains how to draw an ellipse using specific coordinates and parameters such as stroke weight, fill, and diameter, providing an example of drawing an ellipse at 200, 200 with a diameter of 300.', 'The chapter demonstrates changing the stroke weight and using the 0 to 180 degrees parameter to draw a partial arc, providing visual examples of the effects of these adjustments.', 'The chapter shows using p5.js to map the mouse x location between 0 and width to draw a full arc from 0 to 360 degrees.', "Different fill options for the arc are demonstrated, including 'no fill', 'pi', 'open', and 'chord'."]}, {'end': 786.921, 'segs': [{'end': 613.729, 'src': 'embed', 'start': 576.786, 'weight': 1, 'content': [{'end': 581.208, 'text': 'Let me map the number of minutes that also goes between 0 and 360.', 'start': 576.786, 'duration': 4.422}, {'end': 584.489, 'text': "But I'm going to have it be 280, so a little smaller, and n2.", 'start': 581.208, 'duration': 3.281}, {'end': 599.206, 'text': "So there's the number of minutes, right? And as soon as seconds gets all the way to 60, this should go one more.", 'start': 591.604, 'duration': 7.602}, {'end': 601.727, 'text': 'Come on, get to 60, here we go.', 'start': 599.786, 'duration': 1.941}, {'end': 603.727, 'text': 'There we go, and minutes went up by one.', 'start': 602.067, 'duration': 1.66}, {'end': 606.808, 'text': "And now I'm going to do the very last one.", 'start': 604.747, 'duration': 2.061}, {'end': 613.729, 'text': 'And three between for hour.', 'start': 609.128, 'duration': 4.601}], 'summary': 'The number of minutes goes from 0 to 280, increasing by one each time seconds reach 60.', 'duration': 36.943, 'max_score': 576.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY576786.jpg'}, {'end': 691.163, 'src': 'embed', 'start': 640.936, 'weight': 0, 'content': [{'end': 649.399, 'text': 'And now we can see I have the number of seconds, the number of minutes, and then the hour.', 'start': 640.936, 'duration': 8.463}, {'end': 650.46, 'text': "But this isn't right.", 'start': 649.459, 'duration': 1.001}, {'end': 657.703, 'text': "Because what if I want these to actually point to what's right, what's wrong?", 'start': 650.8, 'duration': 6.903}, {'end': 661.844, 'text': "The point is to make a kind of creative clock that you wouldn't normally imagine seeing.", 'start': 657.743, 'duration': 4.101}, {'end': 673.982, 'text': "What I would like to do here, however, is actually have these positioned in the correct place, in the sense of, if it were 3 o'clock,", 'start': 664.818, 'duration': 9.164}, {'end': 676.083, 'text': 'the arc would go from the top all the way to there.', 'start': 673.982, 'duration': 2.101}, {'end': 677.484, 'text': "So let's think about the time.", 'start': 676.324, 'duration': 1.16}, {'end': 681.746, 'text': "The time that I'm recording this right now is approximately 6.15 PM.", 'start': 677.524, 'duration': 4.222}, {'end': 684.668, 'text': 'So the hours should go all the way to the bottom.', 'start': 682.166, 'duration': 2.502}, {'end': 688.83, 'text': 'And so the hours.', 'start': 687.369, 'duration': 1.461}, {'end': 691.163, 'text': "6 o'clock.", 'start': 690.943, 'duration': 0.22}], 'summary': 'Creating a creative clock with hours, minutes, and seconds positioned correctly, aiming for a unique design.', 'duration': 50.227, 'max_score': 640.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY640936.jpg'}, {'end': 744.264, 'src': 'embed', 'start': 715.984, 'weight': 2, 'content': [{'end': 719.185, 'text': "So that we can see now this is being the hours, but it's off.", 'start': 715.984, 'duration': 3.201}, {'end': 727.048, 'text': 'What I really want to do is have that range not go from 0 to 360, but I want to start at negative 90 degrees.', 'start': 719.465, 'duration': 7.583}, {'end': 731.949, 'text': 'So this is confusing because rotation happens counterclockwise.', 'start': 727.828, 'duration': 4.121}, {'end': 737.188, 'text': 'So if this is 0 degrees, I want to start up here at negative 90.', 'start': 732.229, 'duration': 4.959}, {'end': 744.264, 'text': 'Or I could also think of that as 270, right? And I want to go from that all the way to itself.', 'start': 737.188, 'duration': 7.076}], 'summary': 'Adjusting rotation range from 0 to 360 to -90 to 270 for counterclockwise rotation.', 'duration': 28.28, 'max_score': 715.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY715984.jpg'}], 'start': 544.008, 'title': 'Mapping time to a clock and creative 24-hour clock design', 'summary': "Demonstrates mapping seconds, minutes, and hours to clock angles, with seconds ranging from 0 to 360, minutes from 0 to 280, and hours from 0 to 260. it also discusses the design of a 24-hour creative clock, adjusting hour and minute arcs' positions based on the time, using modulus to restart hours at 12, and translating to the center for a better design approach.", 'chapters': [{'end': 640.936, 'start': 544.008, 'title': 'Mapping time to a clock', 'summary': 'Demonstrates the mapping of seconds, minutes, and hours to the angles of a clock, with seconds ranging from 0 to 360, minutes from 0 to 280, and hours from 0 to 260.', 'duration': 96.928, 'highlights': ['The chapter demonstrates the mapping of seconds, minutes, and hours to the angles of a clock, with seconds ranging from 0 to 360, minutes from 0 to 280, and hours from 0 to 260.', 'The implementation shows the update of minutes when the seconds reach 60, causing the minutes to increase by one.', 'The speaker mentions the possibility of applying different colors to the clock design, highlighting the potential for creative customization.']}, {'end': 786.921, 'start': 640.936, 'title': 'Creative 24-hour clock design', 'summary': "Discusses the design of a 24-hour creative clock, adjusting the hour and minute arcs' positions based on the time, using modulus to restart hours at 12, and translating to the center for a better design approach.", 'duration': 145.985, 'highlights': ["The design involves positioning the hour and minute arcs based on the time, such as the hours going all the way to the bottom at 6:15 PM, and adjusting the hour range using modulus to restart at 1 o'clock after reaching 12.", 'Utilizing a range not from 0 to 360, but starting at negative 90 degrees to account for counterclockwise rotation, and considering the option of translating to the center for a visually appealing design.', 'Exploring the adjustment of 0 degrees in P5 to draw the entire clock and discussing its potential confusion, along with the possibility of using translation to the center at coordinates (200, 200) for a more convenient approach.']}], 'duration': 242.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY544008.jpg', 'highlights': ["The design involves positioning the hour and minute arcs based on the time, such as the hours going all the way to the bottom at 6:15 PM, and adjusting the hour range using modulus to restart at 1 o'clock after reaching 12.", 'The chapter demonstrates the mapping of seconds, minutes, and hours to the angles of a clock, with seconds ranging from 0 to 360, minutes from 0 to 280, and hours from 0 to 260.', 'Utilizing a range not from 0 to 360, but starting at negative 90 degrees to account for counterclockwise rotation, and considering the option of translating to the center for a visually appealing design.', 'The implementation shows the update of minutes when the seconds reach 60, causing the minutes to increase by one.', 'The speaker mentions the possibility of applying different colors to the clock design, highlighting the potential for creative customization.']}, {'end': 1225.675, 'segs': [{'end': 854.864, 'src': 'embed', 'start': 820.531, 'weight': 2, 'content': [{'end': 827.176, 'text': 'So this is a problem I did, which the mapping should actually be right from 0 to 59 minutes seconds 0 to 59 minutes and then 0 to,', 'start': 820.531, 'duration': 6.645}, {'end': 836.48, 'text': "Because we don't get 12..", 'start': 835.66, 'duration': 0.82}, {'end': 842.222, 'text': 'We get 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, and then 12 again.', 'start': 836.48, 'duration': 5.742}, {'end': 843.742, 'text': 'So 0 to 11.', 'start': 842.242, 'duration': 1.5}, {'end': 845.462, 'text': "And this shouldn't say, oh, I also messed this up.", 'start': 843.742, 'duration': 1.72}, {'end': 851.963, 'text': "This shouldn't say, so let me, oh, no, no, no.", 'start': 845.762, 'duration': 6.201}, {'end': 852.804, 'text': '12 was right there.', 'start': 851.983, 'duration': 0.821}, {'end': 854.864, 'text': 'There we go.', 'start': 854.284, 'duration': 0.58}], 'summary': 'Mapping problem with 0-11 minutes and seconds instead of 0-59.', 'duration': 34.333, 'max_score': 820.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY820531.jpg'}, {'end': 916.82, 'src': 'embed', 'start': 883.144, 'weight': 1, 'content': [{'end': 884.505, 'text': "But it's interesting to think about it.", 'start': 883.144, 'duration': 1.361}, {'end': 886.066, 'text': 'But these are subtle little points.', 'start': 884.525, 'duration': 1.541}, {'end': 888.806, 'text': 'But these should actually be 60.', 'start': 886.106, 'duration': 2.7}, {'end': 890.207, 'text': "And now we've got the clock.", 'start': 888.806, 'duration': 1.401}, {'end': 897.15, 'text': "So I mean, again, I'm not suggesting this is a beautiful or interesting or wonderful clock in any way whatsoever.", 'start': 890.587, 'duration': 6.563}, {'end': 903.533, 'text': "What I'm doing is showing you that you can get the time information and you can map it to some kind of design system.", 'start': 897.23, 'duration': 6.303}, {'end': 907.495, 'text': 'This is a tried and true kind of interesting exercise.', 'start': 903.914, 'duration': 3.581}, {'end': 910.637, 'text': 'You can actually do this without knowing a lot about programming.', 'start': 907.775, 'duration': 2.862}, {'end': 916.82, 'text': "If you know just how to draw shapes and how to manipulate numbers, that's really all you need for this, the second, the hour, and the minute function.", 'start': 910.657, 'duration': 6.163}], 'summary': 'You can create a clock design using time information with simple shapes and numbers, no programming knowledge required.', 'duration': 33.676, 'max_score': 883.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY883144.jpg'}, {'end': 1143.619, 'src': 'heatmap', 'start': 1115.948, 'weight': 0.712, 'content': [{'end': 1119.089, 'text': 'Zero What did I miss here? Oh, I forgot.', 'start': 1115.948, 'duration': 3.141}, {'end': 1119.87, 'text': 'Ah, look at this.', 'start': 1119.309, 'duration': 0.561}, {'end': 1122.17, 'text': 'Horrible typo.', 'start': 1120.83, 'duration': 1.34}, {'end': 1123.351, 'text': "I'm staring at it.", 'start': 1122.751, 'duration': 0.6}, {'end': 1126.392, 'text': 'I should never do coding challenges after hours and hours of live streaming.', 'start': 1123.431, 'duration': 2.961}, {'end': 1128.533, 'text': "I'm like at three and a half hours of live streaming.", 'start': 1126.472, 'duration': 2.061}, {'end': 1130.734, 'text': 'I just lost the word map there by accident.', 'start': 1129.173, 'duration': 1.561}, {'end': 1132.214, 'text': 'There we go.', 'start': 1131.654, 'duration': 0.56}, {'end': 1133.975, 'text': 'Oh, this was terrible.', 'start': 1132.234, 'duration': 1.741}, {'end': 1135.076, 'text': 'This is our clock.', 'start': 1134.255, 'duration': 0.821}, {'end': 1136.236, 'text': 'Oh, it makes me happy.', 'start': 1135.276, 'duration': 0.96}, {'end': 1138.397, 'text': 'That is actually kind of a nice looking clock.', 'start': 1136.596, 'duration': 1.801}, {'end': 1140.838, 'text': "And I don't know why I got distracted by this arc thing.", 'start': 1138.697, 'duration': 2.141}, {'end': 1143.619, 'text': 'If I were to just comment out the arcs just for a second here.', 'start': 1140.878, 'duration': 2.741}], 'summary': 'Struggles with coding challenge after 3.5 hours of live streaming, regrets typo, finds joy in clock design.', 'duration': 27.671, 'max_score': 1115.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY1115948.jpg'}, {'end': 1173.389, 'src': 'embed', 'start': 1140.878, 'weight': 0, 'content': [{'end': 1143.619, 'text': 'If I were to just comment out the arcs just for a second here.', 'start': 1140.878, 'duration': 2.741}, {'end': 1151.405, 'text': 'This is the basic idea of making a clock.', 'start': 1145.619, 'duration': 5.786}, {'end': 1156.05, 'text': 'So I have now made a clock in P5 in JavaScript.', 'start': 1151.845, 'duration': 4.205}, {'end': 1159.493, 'text': 'But the point of me showing you the arc and again it was not very creative,', 'start': 1156.25, 'duration': 3.243}, {'end': 1167.127, 'text': 'it was not very exciting that you can now take this basic idea of the code and reading Seconds,', 'start': 1159.493, 'duration': 7.634}, {'end': 1173.389, 'text': "minutes and hours from the P5 functions and drawing to your heart's content the most creative, strange way.", 'start': 1167.127, 'duration': 6.262}], 'summary': 'Demonstrates creating a clock in p5 in javascript, emphasizing the potential for creativity in representing time.', 'duration': 32.511, 'max_score': 1140.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY1140878.jpg'}], 'start': 787.942, 'title': 'Clock mapping and creation in p5', 'summary': 'Discusses clock rotation problem involving modulus of 12 and 60, and demonstrates the process of creating a clock in p5 in javascript using basic programming knowledge and drawing techniques.', 'chapters': [{'end': 883.104, 'start': 787.942, 'title': 'Clock rotation and mapping problem', 'summary': 'Discusses a problem with mapping clock rotation from 0 to 59 minutes and 0 to 11 hours, involving a modulus of 12 and 60, and the correction process for the same.', 'duration': 95.162, 'highlights': ['The mapping problem involves correcting the range from 0 to 59 minutes and 0 to 11 hours, with a correction process involving a modulus of 12 and 60, as well as addressing the issue of ending at 59 seconds instead of reaching the top.', 'The need to adjust the mapping from 0 to 59 minutes and 0 to 11 hours, with a focus on the correction process involving a modulus of 12 and 60, to accurately represent the clock rotation.', 'Discussion about adjusting the mapping from 0 to 59 minutes and 0 to 11 hours, including addressing the issue of ending at 59 seconds and the correction process involving a modulus of 12 and 60.']}, {'end': 1225.675, 'start': 883.144, 'title': 'Creating a clock in p5 in javascript', 'summary': 'Demonstrates the process of creating a clock in p5 in javascript, showcasing how time information can be mapped to a design system using basic programming knowledge and drawing techniques.', 'duration': 342.531, 'highlights': ['The chapter demonstrates the process of creating a clock in P5 in JavaScript. Showcases the step-by-step process of creating a functional clock using P5 in JavaScript.', 'Time information can be mapped to a design system using basic programming knowledge and drawing techniques. Illustrates how time information can be utilized to create a design system without requiring extensive programming knowledge, emphasizing the use of drawing shapes and manipulating numbers.', 'Encourages viewers to submit their own clock creations. Promotes viewer participation by encouraging them to create and submit their own clock designs, providing avenues such as GitHub and social media for submission.']}], 'duration': 437.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E4RyStef-gY/pics/E4RyStef-gY787942.jpg', 'highlights': ['The chapter demonstrates the process of creating a clock in P5 in JavaScript. Showcases the step-by-step process of creating a functional clock using P5 in JavaScript.', 'Time information can be mapped to a design system using basic programming knowledge and drawing techniques. Illustrates how time information can be utilized to create a design system without requiring extensive programming knowledge, emphasizing the use of drawing shapes and manipulating numbers.', 'The mapping problem involves correcting the range from 0 to 59 minutes and 0 to 11 hours, with a correction process involving a modulus of 12 and 60, as well as addressing the issue of ending at 59 seconds instead of reaching the top.']}], 'highlights': ["The process involves creating imaginative clocks using p5.js, inspired by John Mida's 12 O'Clocks and the assignment from Carnegie Mellon University, aiming to inspire a world of unique clocks.", 'An assignment from Carnegie Mellon University encourages creating original clocks, leading to a vast world of unique clocks inspired by the coding challenge.', "John Mida's 12 O'Clocks project from 1996 to 97 for Classic Mac serves as an inspiration for inventing new ways of displaying time, showcasing the potential for creativity and expression in programming and graphics.", "Golan Levin's documentation page provides a template for creating clocks in p5.js, offering a starting point for individuals to express their creativity and develop unique clock designs.", 'The chapter demonstrates the process of creating a clock in P5 in JavaScript. Showcases the step-by-step process of creating a functional clock using P5 in JavaScript.', 'Time information can be mapped to a design system using basic programming knowledge and drawing techniques. Illustrates how time information can be utilized to create a design system without requiring extensive programming knowledge, emphasizing the use of drawing shapes and manipulating numbers.', "The design involves positioning the hour and minute arcs based on the time, such as the hours going all the way to the bottom at 6:15 PM, and adjusting the hour range using modulus to restart at 1 o'clock after reaching 12.", 'The chapter discusses creating a digital clock using P5.js.', "Utilizing native JavaScript functions to obtain time information and displaying it in the format 'hour:minute:second'.", 'The arc function in p5 allows drawing ellipses with start and end angles, providing a creative way to visualize time for designing a digital clock.', 'Using arcs to visualize time provides a more interesting and creative approach compared to using bars, enhancing the design of the digital clock.', 'The chapter explains how to draw an ellipse using specific coordinates and parameters such as stroke weight, fill, and diameter, providing an example of drawing an ellipse at 200, 200 with a diameter of 300.', 'The chapter demonstrates changing the stroke weight and using the 0 to 180 degrees parameter to draw a partial arc, providing visual examples of the effects of these adjustments.', 'The chapter shows using p5.js to map the mouse x location between 0 and width to draw a full arc from 0 to 360 degrees.', "Different fill options for the arc are demonstrated, including 'no fill', 'pi', 'open', and 'chord'.", 'The chapter demonstrates the mapping of seconds, minutes, and hours to the angles of a clock, with seconds ranging from 0 to 360, minutes from 0 to 280, and hours from 0 to 260.', 'Utilizing a range not from 0 to 360, but starting at negative 90 degrees to account for counterclockwise rotation, and considering the option of translating to the center for a visually appealing design.', 'The implementation shows the update of minutes when the seconds reach 60, causing the minutes to increase by one.', 'The speaker mentions the possibility of applying different colors to the clock design, highlighting the potential for creative customization.']}