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-
incoherent mumbling
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