Coding Challenge #74: Clock with p5.js

tick tock tick tock goes the clock anyway this is a coding challenge where I am going to make a very simple very basic clock in p5 GS why am i doing this well if you are beginning to learn about programming and learn about graphics and animation a great exercise that you can do that can really even really express your creativity with is invent a new way of showing time make make a clock and whatever imaginative crazy way has never been done before 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 now the inspiration for this idea comes from also very loud squeak John Midas twelve o'clock so John Maeda this is a project from 1996 to 97 made in classic Mac for classic Mac you could see here are examples of John my de 12 clocks and these were this this documentation page was created by Golan Levin who as for his course at Carnegie Mellon University oh that's from last year maybe has an assignment which is to create your own clock and so here's an example clock made in p5.js a template and you can see this is what I'm talking I would like to do something like this which just shows you the mechanics of how you get the hour the minute the second and draw something based on those and temp template that you could use and I hope that making this video will inspire a world of so many clocks that I could never possibly imagine and I can't wait to see all the clocks that people are going to make after watching this video and I will try to come back and make more ah I want to if you're looking for more inspiration I gotta get to making the clock this is a collection of clocks made by alka loyal viewer of the coding train and there's some wonderful ones this is one of my this is a really nice one the particle clock will just look at this where we can see like a look at this these are the particles so this is actually having particles fly around and end up and use it with the actual numbers of the time I'm gonna try to draw something based on time okay I now have some empty code and I am ready to start programming the clock so there's two things I want to talk about before I start writing some code number one is how do I get the time information so this is actually one of the things that p5 does for you I mean it's just wrapping native javascript file functions that are part of the browser for getting the current time based on your computer's clock and if I go to the p5 reference we can see those under time and date so I can get the day the hour the minute the month the second and the year I'm just gonna use our minute I'm just going to use and second okay no three hour minute and second Millie's is a function that gives you the number of milliseconds that have passed since the sketch started and this could be used for timers and keeping track of things and thinking in animation to a clock and it's interesting and useful but I'm gonna actually just pull and I'm not gonna do like you know fractions of a second I'm just gonna pull hour minute and second from from p5 so let's actually really quickly just like spin up a digital clock so I'm gonna say let our equal hours let minute equal minutes I think this is right let second equal seconds for those the name of the functions hour minute second boy this is so this is a terrible idea that I just did hour minute second I'm gonna call this HR for owl MN for a minute and SC for second I really should come up with better variable names than that that's what I'm gonna do right now and what I'm going to do next is I'm just gonna say fill 255 no stroke and then I'm gonna say text hour + : + minute + : + second and I'm gonna put that at 10 comma 200 so let's see if this works we have a really quickly there we go we have our clock right it is now six oh eight and 28 29 30 seconds is that the right time oh my god I'm so late that's why I'm gonna keep going with this cutting jobs and I'll leave when I'm done this is good actually to do it when I'm supposed to be somewhere that I have the coding challenge to be the time so there's no zero there so I need to think about number formatting and you know there's all sorts of interesting things I could do for designing making a digital clock I believe in all the creative ideas to you but what I want to do is visualize the time so I think my idea to do something rather simple but it's a little bit more interesting than just bars is I'm gonna use arcs so this is what the ellipse function does in p5 the ellipse function draws an ellipse or a circle at a given X Y according to some width and according to some height and the width and height could be the same because you get to get that just as a diameter if it's a perfect circle so I'm actually just going to have an ellipse and an XY with a particular diameter okay what the arc function does is exactly the same thing it draws an ellipse at a given X Y with a given diameter however in addition to the X Y the diameter width and height I can give a start angle and an end angle meaning I can say draw this arc from 0 to 180 degrees so I'll only see this part of the of the circle so let's see how that works and let's try to draw just to see this in action I'm gonna get rid of the text now I don't need that anymore I can use that for debugging I'm gonna draw an ellipse at 200 200 I'm gonna say stroke wait for no fill and I'm going to give it a diameter of let's just say 200 right now let's yeah no let's say 300 and let's take a look at that oh and I need to say stroke 255 so there's my ellipse right that's the full lips now what I want to do is I want to draw an arc so I'm gonna say stroke and I'm gonna give it some arbitrary color and I'm gonna say Ark and I'm gonna give it exactly these same values and I'm going to say zero to 360 zero to 360 which means draw the whole thing the full circle from zero all the way three or six degrees the problem is I want to think of degrees here I've talked in other videos about degrees versus radians a different unit of measurements it's an interesting topic but it's easier for me right now I think to just say angle mode degrees so that the unit of measurement that I'm using in the arc function is degrees and if I run this we see the circle turn pink but it didn't actually turn pink right if I make the stroke weight of this eight whoops oh and the stroke weight of this 1/4 we can see the pink arc inside of the white one and I could say with the arc like let me only have 180 degrees half of that and you can see that it's drawing that inside though it's drawing that inside only 180 degrees 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 and I could say end here so you can see as I move the mouse and this is a little I'm gonna I want to do this the and kind of like the other way around actually I don't this is a little bit weird this makes it so what I'm doing I'm gonna get rid of that one right you can see this is me drawing that full arc so going from 0 all the way to 360 degrees and by the way there are varying ways I can fill in the arc like I'm at this point I probably just want to say no fill and it's just gonna do this but if I wanted to keep that fill there I could say pi which is like filling it like a pie chart right you can see that I can say open which is filling it like this not as a pipe it straight across without connecting this or I can actually say cord which is filling it like open but by connecting the stroke so that's a small detail but it's interesting to see how that works with arc kind of useful I don't care about any of that because I want to say no Phil so what I want to do now is instead of instead of just mapping this arcs location to the mouse I want to say map the number of seconds which goes between 0 and 60 to between 0 and 360 and look at that there's my clock with the number of seconds now I want to let me do the same thing again and 1 and 2 and I could be more thoughtful about this let me map the number of minutes that also goes between 0 and 360 but I'm gonna have it be you know 280 so a little smaller and n2 so there's the number of minutes right and as soon as seconds gets all the way to 60 this should go one more come on get to 60 here we go there we go minutes went up by one and now I'm gonna do the very last one and three between four hour an hour goes from zero to 24 and I could give some different colors here too also you know again I'm not being very thoughtful about the design that's what I'm hoping you who are watching this video for much more creative than me but I can now see and I actually want this one to be instead of 280 let's say 260 and now we can see I have the number of seconds the number of minutes and then the hour but this isn't right right because what if what if I want these to actually point to where the the you know what's right what's wrong the point is to make a kind of creative clock that you wouldn't normally imagine see but what I what I would like to do here however is actually have these position in the correct place in the sense of like if it were three o'clock the ark would go from the top all the way to there so let's think about the time the time that I'm recording this right now is approximately 6:15 p.m. so the hours should go all the way to the bottom and so the hours six o'clock oh no but it's 24-hour clock oh it's a 24-hour clock let me just do that it's in the seconds and I'll think about no I can do it I could do it let's do it let's do it so what thing I could do is say actually the hours don't go between 0 and 24 they go between 0 and 12 and I just say modulus 12th so it'll restart once it gets to 12 and 13 will become one o'clock again so that we can see now this is being the hours but it's off 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 right so this is confusing because rotation happens counterclockwise so if this is zero degrees I want to start up here at negative 90 or I could also think of that as 270 right and I want to go from that all the way to itself so me I am so me in the chat just said well why don't instead I could just rotate everything something interesting actually about in p5 is zero degrees when you when you put the end at zero it actually will draw you the entire thing and it's sort of debatable whether that's a good or bad idea but mostly it confuses people if it doesn't do that so that's why it does that in p5 but let's come back here so there's a couple things I can do number one is I could just translate to the center so I could use I have a whole video now about transformations that you could watch so I could just translate to 200 200 and I could draw all these at 0-0 so this I think will be a nice or easier way to deal with this and I can then just say rotate I think negative 90 so there we go so now we can see I'm coming up on finishing 60 seconds and here we go and it starts over again now but I and you can see so now it is sit fought that's not six the green should be at six oh you know why so somebody else Maxwell in the chat is telling me 0 to 59 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 right because we don't get 12 we get 0 1 2 3 4 5 6 7 8 9 10 11 and then 12 again so 0 to 11 and this shouldn't say oh I also messed this up this shouldn't say right so let me know no 12 was right there there we go did I did I get it right with the minutes should be it should be zero 259 12 is fine with the modulus because it's going back to it right let's see duh 0 1 oh no so it's kind of hard to think about but it actually should be 0 to 60 because 59 seconds does not end at the top it ends a little bit before that's why this should be 0 to 12 and modulus 12 so I did this a few different ways but it is interesting to think about it but these are subtle little points but these should actually be 60 and now we've got the clock so I mean again I'm not suggesting this is a beautiful or interesting or wonderful clock in any way whatsoever 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 this is a tried-and-true kind of interesting exercise you can actually do this without knowing a lot about programming if you know just how to draw shapes and how to manipulate numbers that's really all you need for this the second hour and the minute function so this this coding challenge was about to end and I actually just wrapped up but I'm gonna keep going actually cuz there's a lively discussion in the chat let's just sort of I don't know why what I probably should have done is just made a literal clock with minute second and our hands let's do that for a second let's actually put those lines there and see if this kind of maps with what we think it should be so I am going to in addition to drawing these arcs I'm going to draw a line I'm just going to do the second hand for a second from 0 0 to 100 comma 0 and I'm gonna give it a stroke of 255 so I'm drawing this line straight up now I want that line to rotate according to that end angle and I'm gonna need to put push and pop around it because that rotation should only affect that line not the arcs so now we can see that is the actual second hand and while I'm letting that run for a little bit I'm going to and I'm just gonna put these at the end I should put this like I should this should be called I'm really second angle oh shoot I just lost my copy paste so I'm gonna do this here so this should be called this should be called second angle if I'm being worrier about this this should be called minute angle and this should be called hour angle if I want to be a bit more thoughtful second angle minute angle and now what I'm going to do is make these lines and I'm gonna do a second angle and I'm going to do a minute angle and hour angle and I'll make the minute 75 and the hour 50 and here we go so again I could be this is right now right it is now well okay I need these to be different colors is that that doesn't look right all right it's the minute angle number of minutes let's make this let's use the same colors I don't know why I put it down there now this is silly of me to separate these things that's the minute angle this is the hour whoops this is the hour color and this is the second color I should draw a point in the middle that would be helpful and then let's also at the end just say stroke 255 point zero zero so there should be a nice little dot in the middle there we go so yeah this is the minute looks wrong zero what did I miss here oh I forgot ah look at this horrible typo I'm staring at it I should never do coding challenges after hours and hours of live streaming this I'm like I'd like three and a half hours of live streaming I just lost the word map there by accident there we go this is our clock oh it makes me happy that is actually kind of a nice looking clock and I don't know why I got distracted by this arc thing if I were to just comment out the arcs just for a second here this is the basic items this is the basic idea of making a clock so I have now made a clock in p5 in JavaScript but the point of me showing you the arc and again it was not very creative is not very exciting that you can now take this basic idea of the code are in reading seconds minutes and hours from the p5 functions and drawing to your heart's content the most creative strange way look at the jaw my two clocks look at there's an the lecture by goal on eleven that I will include as a link in this video's description and look at the sum of the clock examples from alka and other users that I'll also link from code pen and hold on so I want to check I don't know if one thing that could be an interesting project is porting all of John might original clocks from the 12 o'clock series if this is a loud thing to do to a p5 GS to like allow those projects to live on and for people to see them in the browser either beautiful and interesting experiments so thanks for everyone for tuning in to this coding challenge I can't wait to see all the clocks that people make I will create a github page where you can submit them and there'll be a link to that in the video's description but you can also tweet me at Schiffman with your clocks or just write them in the comments and I'll see them that way thanks for watching [Music]

Channel: The Coding Train

Views: 437,459

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, itp nyu, translate, rotate, p5.js transformations, javascript clocks, golan levin, john maeda, p5.js clocks, 12 o'clocks, interactivity & computation, challenge, javascript, p5.js, p5.js tutorial, programming challenge

Id: E4RyStef-gY

Length: 20min 39sec (1239 seconds)

Published: Wed Sep 20 2017