Star Field Hyperdrive Light Speed Effect
Vložit
- čas přidán 5. 08. 2024
- Coding Train video: • Coding Challenge 1: St...
Code: editor.p5js.org/BarneyCodes/s...
The star field light speed effect is an iconic effect often seen in movies (eg Star Wars) and gives an amazing sense of depth considering we are simply drawing lines on the screen!
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
0:00 Intro
0:20 Star class
2:21 Adding random stars
4:00 Removing stars that have left the screen
5:57 UHRG UHRG UHRG
6:07 Adding new stars to replace the old ones
6:40 Giving the stars a trail
7:30 Fading in the new stars
8:30 Final product
#creativecoding #p5js #javascript
Using Array.filter() will be a game changer, it's much nicer than having to go through arrays backwards to remove items!
Have you got any other nifty tricks?
You could've used Array.map() to remove old stars and create new ones in a single function, for example: stars = stars.map(star => { star.draw(); star.update(acc); return star.isActive() ? star : new Star(random(width), random(height)); });
Ha! Just when I think I'm being clever by using filter()! That's a great suggestion, will be sure to keep it in mind for the next time I need to do something like this! Cheers
Great video! Well executed and explained with a great pace to match. Keep up the good work!
Thanks so much!
Nice video! I was surprised by the time of the video, but it's amazing how you could show that much information in this short period. Keep it up! The effect looks amazing too!
Wow! That's very kind of you, thank you so much! Glad you enjoyed it :)
great video!
Thank you so much! Glad you enjoyed it :)
I like your content, keep like these
Thanks, will do!
Thanks for this awesome tutorial ! this is one of the best channels for p5js around.
I managed to get to the end result following your instructions and everything animates correctly. I just noticed that for some reason the trails leave a slightly grey permanent mark wherever they go instead of going completely to rgb(0,0,0) after the trail ends, when I colour pick it's leaving rgb(6,6,4) in those "trail stains". Like they are painting the canvas grey.
It's not just in this video, it's anywhere the method to create trails with background alpha is used. I thought it would eventually go to pure black but for some reason it doesn't. I tried taking your code from the link and replacing mine and it's still there. do you know of a way to get this to stop happening or what I might be doing wrong ?
Wow, that's a really big compliment, thank you so much!
Glad to hear you got it all working! I've noticed that trail sometimes too, I think certain monitors make it more obvious than others? I'm not exactly sure what causes it either, I would have expected it to eventually go to complete black after a while too.
One thought would be to maybe try some different blend modes (p5js.org/reference/#/p5/blendMode), which affect how new colours are applied to the canvas. Something like HARD_LIGHT might fix the issue? Sorry I'm not at my computer right now to check.
Let me know how you go!
Thanks so much for the video! I can't figure out how to get the animation to work only when the mouse is pressed? I would like to implement it on the page that you need to click a button (i.e "enter") and then the page goes into lightspeed mode. Is there a way to do this?
That's such a cool idea, I love it!
What I would probably do is remove the acceleration calculation from the draw function (where we map the mouseX position) and instead make the "acc" variable global. This way you can set it to be slow at the start.
Then I would add the keyReleased or mouseReleased function (depending on if you want to use the keyboard or the mouse to trigger it) and inside that function I would set the "acc" variable to be larger, making the stars move at light speed.
I hope that helps! Let me know if you have any other questions, and good luck!
@@BarneyCodes amazing thanks! No I just need to figure out how to mace the "acc variable global"
The last thing that would be cool to know is how to change the background from black to white for example when lightspeed kicks in.
This page will be so dope thanks to you!
@@kalen04 you can make a variable global by not putting it inside any function (eg the line "let stars = [];" right at the top), this means that the variable can be accessed anywhere inside your script, not just the function it was declared in (you can learn more here if you're interested: developer.mozilla.org/en-US/docs/Glossary/Scope). So what you'll want is to have "let acc = 0.005;" somewhere at the top of the file, and then in the keyReleased/mouseReleased function you can have "acc = 0.2" to put it into light speed.
You could do a similar thing with the background colour, you could make that a global variable and change it when you change the speed, but you might want it to fade from one colour to the other and for that I would suggest using the lerpColor function: p5js.org/reference/#/p5/lerpColor
@@BarneyCodes Thank you so much! Let me know if you have a discord # to give you props in the community once the page is live!! =)
I figured out how to do the click animation, thanks a lot!
2 things came to mind:
1. If there's a way to turn the background transparent it would be easier to implement into webflow for example (because then one could animate transitions easier i.e leave the page background on black, once lightspeed starts it slowly transitions to white)
If I currently change the background to fully transparency function draw() {
background(0, 0); the animation doesn't work anymore
2. Right now the acc is on mouseX "const acc = map(mouseX, 0, width, 0.005, 0.2);" so if you hover with the mouse on the left acc is lowest and all the way right it's the strongest. Currently my workaround is to map acc to mouseReleased, is it however possible to map the maximal acc at the center of the screen instead of right?
No worries at all, my discord username is BarneyCodes#2555, keen to see how it ends up!
1. Hmm yea that's a bit of a tricky problem since the animation relies on the background to fade the stars. The other way to do it is to store the last 10 (for example) positions of each star, rather than just their current position and then you can draw the trail of each star meaning the background can be transparent. This is a bit more computationally intense to draw so keep that in mind!
2. Definitely! To do that what you'd need to do is calculate the distance to the middle by using "const distToMiddle = abs(width/2 - mouseX);" This finds the difference between the mouseX location and the middle of the screen, and the abs() function makes sure it's always a positive number. Then you can update the map call to be "const acc = map(distToMiddle, 0, width/2, 0.005, 0.2);" so that you use the centre of the screen as the maximum!
Line 19 on my attempt says TypeError : §star.draw is not a function - any ideas on what to do to resolve this issue
It's a bit hard to say without being able to look at your code. It sounds like you might be using typescript? If that's the case you might need to type the stars array to be an array of Star objects and make sure that you do actually have a function called "draw" on your Star object.
Otherwise, it could be that you've somehow put an item in your array that isn't a Star, so it doesn't have the "draw" function.
Hope that helps! Let me know if you have any more questions!
How can I change the color of the stars
In the draw function of the Star class there is the line "stroke(255, alpha);", the stroke function changes the colour of lines drawn in P5js. When it's given 2 values like this, it will use the first value as a grayscale and the second value as the opacity, but if we want to make it colourful we can use the 4 variable version "stroke(r, g, b, alpha);", where we can specify the red, green, blue, and alpha values respectively.
I hope that helps!