Hello welcome to the ten minute coding challenge. This is a new segment that I am starting here on the "coding rainbow". Where I am given a programming problem and I am given 10 minutes to solve that problem and then the timer goes I've got to stop recording. So, uh, someone- uh, I'm not prepared for this but, normally I'd get a coding challenge from somebody so, [insert person's twitter handle here]. Uh, wrote in and asked, "How do you make a star-field, warp speed, simulation visualization?" So I'm gonna do this in the Processing programming environment I will also make a p5 JS version of it, but not in this 10 minutes- and I am talking way too much, I gotta get started programming! So, this first thing I wanna do- and I, I'm gonna skip a few steps here that I might normally do just because I feel like I'm in a little bit of a hurry, and I see the clock I already lose a minute of start, and I haven't started programming yet. I'm gonna make a- ohps! Nope, don't rename. I'm gonna make a new tab here, and I'm gonna call that tab "Star", because what I wanna do is make a "Star" class, and I want my Star class- and I probably could use a PVector, but um I'm not gonna use a PVector at the moment I wanna have an X, and a Y, and a Z. Um, and when I make a Star object I want to make I want the X to have a random value between zero and the width of the window and Y to have a random between zero and the height of the window And the truth of the matter is, for simplicity's sake I wonder if anyone's gonna watch this video on YouTube on like two-times speed 'cause it's gonna be a 5-minute programming challenge I'm already talking really fast so I'm gonna talk really fast in the 5-minute- <i>incoherent mumbling</i> Ok! Now I'm gonna do void draw. And, I'm gonna say size four hundred, four hundred So, I want to have a window that's a square so I don't have to worry about width versus height and maybe we could figure that out later. But I need a random, um- and then I'm also gonna make Z some random value Now you're kind of wondering, "If I have an X and Y and a Z, shouldn't I be in 3-D space?" And, probably I should be in 3-D space, to really create this star-field simulator, but- but- I'm gonna try to do this in 2-D because eventually I wanna port this to Javascript and Canvas and I don' wanna deal with WebGL or 3-D rendering I just wanna kinda create the illusion of stars moving quickly past my face So! Let's keep going here So, now what I wanna do, is I wanna make an array and I could make an ArrayList 'cause I wanna add stars and when they get off the screen I wanna remove them But I'm gonna do something simpler, just gonna have an array of stars I'm gonna put like, a hundred of them in there Um, because I think what might make the most sense is when a star goes off the window to just re-use that same star in the array, but reset it's location back Um, and I'm going to say stars index "i" equals a new star And then in draw, space is what color? The blackness of space, so I will make the black background and I'm just gonna say like, update and draw, display, show I'll just do show So this is the basic outline of the program I make a bunch of stars, I update them and I show them Now these functions don't exist yet, so I need to go back to my star object and I need to say update- how am I doing on time? Six minutes left! I need to say show, and the main thing I wanna do is fill two-fifty-five, no stroke, I wanna draw an ellipse at that X and Y location and I'm gonna make that ellipse just like, eight And I'm gonna run this and make sure this is working Good! Ok! So I do see, a bunch of things that look like they could be stars Now I need to make them move. So they really should move like, they should move- let's kinda move this closer to myself This is bad for me to start talking I really just gotta keep programming But I want them to move like, fanning out from the center and as they go out to the center I want them to go faster and faster And that's what I'm gonna use that Z-value for I'm essentially going to, divide- you could think of- you could think of the ratio of their location from the center to the edge and I wanna divide by some value So their- So that value I'm dividing by is getting bigger and bigger and they're moving out to the edge I think this is gonna work and I saw an example like, a year ago and I'm gonna find that example and link to it in the video 'cause now I'm realizing this is kinda based on that Anyway, I'll find it Ok but I can't talk about it too much right now because I only got five minutes left So what I wanna do is, I wanna say something like this I wanna say, uh- I'm gonna make a new value called like, SX and I wanna say X divided by Z And then I wanna map that value, kind of like a ratio which goes between zero and one to between zero and the width And I want it to do the same thing for Y Y divided by Z Right, because Z- Let's just, like- Let's just pretend they're all starting really far away So, basically what I'm saying is that I want them to start I almost shouldn't use Z, I just used Z because I'm thinking of them as moving closer or farther away but I really want a value between zero and one, and um- Let's run this again And we should see it kinda looks the same but now the difference is, I could say here Z equals Z minus one And- Oh! You know what I've done here that's bad? Everything is happening according to the top left corner This is a terrible- This is- This is a problem, and we've gotta correct this Only got four minutes left So, I can translate in draw, with divided by two, height divided by two This makes a lot more sense because really what I want is to be translating to the, um- I want everything to be fanning out from the center, not the top left So if I do this, you can see, things are fanning out, but still from there So all I need to do now is really think about this as like, negative width to width and negative height to height That should- That should do well, and you can see here, um- And- And, let that- Only, um- A hundred stars wasn't so many, so let's make four hundred And you can see things are moving out from the center and you can see as they move out, they start getting faster and faster and faster, 'cause I'm dividing by this number Ohps! And you can see them now, so they're coming back they're getting sucked in back to the center, and I also divided by zero because I got this Infinity problem So, I need to do a couple things Number one is, um, I need to deal with the fact that when Z, gets down to zero I want to reset Z back to somewhere else, and also let's have them all start at a random Z And then, if Z is- and let's just say less than one because I don't want to divide by zero Z should get a random, actually it should just go all the way back And, you know we could give them a new X and Y also And I could put this into another function, now look at this So now things are moving out, and you could see as they- As they come back, they're- they're re-appearing Now here's another thing I could do First of all, let's make this whole thing bigger And let's make more stars, just to be able to see more So you could see how this is looking, now they're moving kind of slowly So I also think that it would make a lot more sense for this to be like, the number ten And you could see- Ah, there we go we're start- Now we got something that's really starting to look like a star-field, right? You could- But, the thing is they're kind of like popping up, like they just appear So one thing I could do is also change their size, right? If they're farther away they should be small, if they're closer they should be big So, right now the ellipse is always drawn The ellipse is always drawn at- Oh my god I only have two minutes left! The ellipse is always drawn at eight pixels So what I wanna do is make another variable called R And, uh rand- not random, I wanna map they're Z value, which goes between zero and width to when they're- Close, being zero, they should be big, like sixteen And when they're far away, being width, they- They, I shouldn't be able to see them at all And so now, if we do that You can see, they're far away they're small and as they come closer they get bigger and bigger Now this is like a star-field, and let's just- By the way, let's make this really quickly- Woops! Let's make this just like, how Z changes a global variable and let's be able to control that by the mouse So I'm gonna say- I'm gonna add a variable called speed And I'm gonna say, speed equals map, the mouse X, mouse x which goes between zero and width to between zero and, I don't know, twenty? So now I can control the speed, right? As I move the mouse over, I'm moving faster, I'm slowing down, I'm moving faster And I can eventually get to warp speed- And I've got one minute left! 'Cause I wanna do one more thing, I wanna see these streaking I wanna see lines streaking, with one minute left, fifty-nine seconds So what do I need to do, to have them streaking? Well I want their current location and I want their previous location, and I want to connect those things with a line So I'm actually gonna make more variables I'm gonna say PX and PY And, I'm gonna set those variables here to um, PX equals SX, PY equals SY I want to also draw a line- Oh I realize I'm gonna have a problem, and I only have twenty-six seconds left! I'm gonna- Oh g- I can do this! Line PX, PY, SX, SY So, this is fine You can see, there's a problem though which is, when they get to the edge- When they get to the edge- When they get to the edge they're drawing, they're connecting a line to their- To their previous locations, so- So, really what I should be doing is saying, this- What the he- I failed, ok the- You know, whatever So that was the ten minute coding challenge, you should stop now This is really like, so dramatic and exciting and yet I totally failed But I'm gonna- I'm gonna give myself- I'm gonna give myself a bonus two minutes Bonus two minutes Bonus two minutes to solve this problem So I kind of was screwing around here because I was trying to be tricky and get the previous location But really I don't want the previous- I need to keep track- Right, every time The previous location when it starts should just be it's X location And the previous- And then, each time after it moves and I draw it, then I should update it's previous location Then it gets it's new location, but really what I wanna do here For that line Is say, PSX, PSY- And it's not- Oh my goodness, the X doesn't matter The X doesn't- This is the whole problem, it's the Z The Z- All I care about is the previous Z, I knew something was going on here I want previous Z Boy, previous Z because the Z is the only thing that's changing it's X is like it's position in the world The Z is what's actually causing it to change So I want PZ to start- Being previous Z, to start at Z And I wanna draw, and then- The whole point of this- Oh! And the camera goes off! And I have fifty-four seconds left, we're gonna make this happen in my bonus two minutes I gotta- I'm gonna say, here, float- Yeah, yeah, yeah PX equals, and this exact same formula But now, I want X divided by PZ and PY, I want X divided by- Y divided by PZ So now, I'm drawing a line between the two locations We don't care about this, although it's probably a good time here to give it it's previous location also- Whoa, something lunacy is happening, what did I miss? I have nineteen seconds left X, X divided by PZ Oh! Height- No, but that shouldn't matter Oh, X,X Here we go, here we go, here we go! So close, six seconds left what did I miss? PX, Oh SX, SX, SX, SY Here we go! There we go, so you can see now, in all of it's glory the warp speed streaky-ness Boy, it said one second there for awhile 'cause it doesn't actually say time expired, until I click over here Ok Interestingly enough, something is definitely not working, because- Ah! I forgot to say PZ equals Z There we go, so you can see it's streaky-ness Let's make it go faster I'm really failing with the ten minute thing Let's see how long this video is in the end Oh it's only- It can't be more than fifteen minutes otherwise I will really feel like a total failure I'm gonna turn off the ellipse for a second And, here we go this is what I was sort of hoping to see You can see the streaks as it draws the lines And I can slow down, and I can put those circles back in there There's all sorts of possibilities here So, I hope you enjoyed this video about how to make a star-field I'm also going to upload a Javascript version of this that will run in the browser The links to both the code for both of those will be in the description If they're not there, write a comment reminding me And, I will see you in the next edition of Ten-Minute Coding Challenge Which is just probably gonna be fifteen minutes Tweet me with a challenge, I'll keep track of a list of them And I will do it in the next time, ok. Subtitles by the Amara.org community
