Completely overhauling my game
5:50
Simulating Water Colour Paint in P5js
12:06
Пікірлер
@FrankBudino
@FrankBudino Күн бұрын
Summary of this shader tutorial: "But...I'm not gonna go into a lot of details..."
@bwabbel
@bwabbel Күн бұрын
Bro you just made shaders make sense to me! 🤯 "You're a wizard, Barney"
@BarneyCodes
@BarneyCodes Күн бұрын
So glad to hear it! They're a lot of fun :)
@ProgrammingRainbow
@ProgrammingRainbow 5 күн бұрын
You're traps are not traps. Your first 1 is spot on. If you know how to do a thing then do it. If you want to spend a year learning a game engine then you can reuse that knowledge. But if you made your own engine you can also reuse that too. Your knitting a wool sweater doesnt make sense. Your not raising the sheep or creating the yarn with an engine someone else has already knitted it for you. Your just sewing it together and then telling someone you knitted a sweater and you didnt. It also doesn't sound like you had imposter syndrome. As J blow says you had an accurate feeling of your own coding ability. This video sounds like your salty. If your trying to make your first commercial steam game no matter what you choose it will be very hard road. They were not traps its just hard.
@AlexEscalante
@AlexEscalante 7 күн бұрын
This is so very well explained!
@BarneyCodes
@BarneyCodes 6 күн бұрын
Thanks, I'm glad you found it useful!
@gridmatrix6364
@gridmatrix6364 11 күн бұрын
This was really great!! I only had to reserach "this", "PVector", "constrain". Feeling I got a better hang of this after watching this.movie :p
@William-nani
@William-nani 11 күн бұрын
the clearest explanation ever <3 or maybe this is just easy idk.....
@BarneyCodes
@BarneyCodes 11 күн бұрын
Maybe a little bit of both :) It's certainly easy once you know a bit of shader programming, but without that knowledge shaders can be a real mystery!
@William-nani
@William-nani 11 күн бұрын
@@BarneyCodes i am still wondering why nobody did this explanation before. Life saver!
@RaccoonEatingCacti
@RaccoonEatingCacti 15 күн бұрын
Thanks for this! I was doing this with Python in the slowest way possible and decided to try it with shaders to gain some speed. This was a good exercise to help figure out how it would work in a shader. This video really helped me wrap my head around the whole thing.
@BarneyCodes
@BarneyCodes 15 күн бұрын
That sounds awesome! Shaders are a great thing to add to your toolbelt, good on you for figuring it out!
@Mrchingchingdingding
@Mrchingchingdingding 15 күн бұрын
The visual effect caused by the initial vertex shader isn't intelligible from the structure or content of the code as-is. You vaguely mention this is the way you do it for a rectangle, but can you help explain why it works, where the *2-1 comes from and how changing the values of these variables resulted in the screen changing.
@BarneyCodes
@BarneyCodes 15 күн бұрын
Sorry I glossed over it, I was focusing on the fragment shader in this video and just mentioned the vertex stuff so that you'd be aware it's there! The reason behind this maths is to do with converting the vertex positions between different "spaces". The initial vertex position passed on is in "model space" which is the vertex's position within the model which goes between 0 and 1. The final output into gl_Position is in "clip space" which goes between -1 and 1. The *2 - 1 maps the position from the 0-1 range of model space into the -1 to 1 range of clip space! If you're using transforms and a camera to view a scene, and want to view the geometry in its "proper" location, you instead have to convert from model space, into world space, then into the clip space, which is done using matrices that contain the transform and camera information, which is what I do later in the video to make the sphere show up :) Hopefully that answers your question! Let me know if you've got any follow up questions! I haven't gone into detail about the matrices here because this comment is getting quite long already and there'll be resources out there that can explain it a lot better than I can! (Learn OpenGL is a great, free resource if you want to read more about it!)
@KynesisCoding
@KynesisCoding 16 күн бұрын
Thanks for sharing ❤ Shaders are in my future 😮
@BarneyCodes
@BarneyCodes 15 күн бұрын
Glad you enjoyed it! I found shaders were basically a doorway into a whole new world of cool program stuff. Have fun!
@markrolandmakes
@markrolandmakes 19 күн бұрын
This is fantastic, thank you! I've been casually interested in shaders for a couple of years and this video was a great introduction. I'm excited to try this out!
@BarneyCodes
@BarneyCodes 17 күн бұрын
Glad you found it useful! They're incredibly useful, and this video only just scratches the surface, have fun!
@DanielOlawoye
@DanielOlawoye 21 күн бұрын
i tried copying what you're doing but it always says that there is an error
@BarneyCodes
@BarneyCodes 21 күн бұрын
What error are you getting?
@SmellGrow
@SmellGrow 22 күн бұрын
I don't know if this comment is going to be replied to. but if I can ask, where are you coding the glsl script. Because I tried downloading a IDE on VSC and it wasn't working as I intended it to
@BarneyCodes
@BarneyCodes 21 күн бұрын
I used the online p5js editor (linked in the description) for it, but I think you can get it working in VS Code if you install certain plugins, it's not something I've done though so I can't give you specific advice sorry!
@drendelous
@drendelous 22 күн бұрын
too many things left unexplained
@mitchellrcohen
@mitchellrcohen Ай бұрын
Swizzling is my new favorite word. Thanks for the video!!! Color coding the vectors helped! I come from unreal blueprints.
@BarneyCodes
@BarneyCodes 29 күн бұрын
Glad you found it useful, swizzling is a great word haha
@plerok231
@plerok231 Ай бұрын
Very good Video thank you
@BarneyCodes
@BarneyCodes Ай бұрын
No worries, glad you enjoyed it!
@awkov
@awkov Ай бұрын
I have a great drill idea. I used to love playing Sonic Colors because of the Drill Wisp (look up gameplay for reference). It would be great to have a drill modifyier that when X amount of a certain material is drilled in a row (like a drill combo), it would give you an ultra efficient drilling mode for a few seconds, or it makes you drill faster for as long as you keep the combo. This would make drilling faster, but rewarding. It would also be great to have a high mobility drill. You sacrifice drilling area (by drilling a fine line) by being able to move quickly underground. This could open up to more gameplay focused on looking for free space underground, maybe running away from obstacles like flowing lava
@BarneyCodes
@BarneyCodes Ай бұрын
@@awkov I'll have to check out sonic colours, I love the idea of the material combo! Thanks for the suggestions!
@jlfreund
@jlfreund Ай бұрын
Exactly what I needed and beautifully demonstrated.
@BarneyCodes
@BarneyCodes Ай бұрын
Thanks so much! Glad it was helpful :)
@MrKiraBR
@MrKiraBR Ай бұрын
Awesome tutorial, thank you!
@BarneyCodes
@BarneyCodes Ай бұрын
Thanks, glad you found it useful!
@Mosesree
@Mosesree Ай бұрын
This is absolutely gorgeous. I wrote a relatively inefficient GOL app that runs off the cpu using Unity, stores its values in hashmaps etc. Despite some reasonably efficient code, I was still maxing out at 15 fps when I got to about 2 million cells on screen at a time. Since I wanted to run something at least 15 times that size, I figured I'd have to learn how to write shaders. It seemed too daunting and I put it on hold. Seeing this absolutely cemented that in my mind. Not only is it way more effective, its elegant and easy to implement- I find this very encouraging. Great job!
@BarneyCodes
@BarneyCodes Ай бұрын
Thanks so much! Your project sounds like a lot of fun, I hope this helps in some way. Feel free to ask any questions :)
@bboyhusky
@bboyhusky Ай бұрын
Just what I was looking for! Thanks
@BarneyCodes
@BarneyCodes Ай бұрын
No worries, glad you found it helpful!
@JordanManfrey
@JordanManfrey Ай бұрын
“I’m not gonna explain these matrices” this is every graphics programming tutorial ever because graphics programming revels in avoiding helpful abstractions for some weird reason
@BarneyCodes
@BarneyCodes Ай бұрын
For me personally, I wanted to keep this video mostly about the fragment shader, so the vertex shader, where those transformations are happening, is out of scope. I mentioned it so that people would be aware that it's there and can have a place to start from if they want to find out more!
@JordanManfrey
@JordanManfrey Ай бұрын
good video, however I still am kind of baffled that people in the past were apparently cool with just overloading an existing drawing term like “shading” to describe these sorts of data transforms…. That sort of layman-inscrutable or misleading stuff doesn’t really help anyone
@BarneyCodes
@BarneyCodes Ай бұрын
Thanks! I think originally shaders were intended to be for just that, adding lighting calculations to 3D scenes, thus shading the rendered image. Overtime though they became a lot more versatile and used for so many various things to the point that, like you say, "shading" really no longer fits what shaders are capable of doing!
@dion9781
@dion9781 Ай бұрын
okay i literally have a project due midnight and i wanna ask if i can do this class drop with a function? i have a function that spawns this shape i made and i wanna do this with that shape
@BarneyCodes
@BarneyCodes Ай бұрын
You can! Instead of having an array of the drop objects, you can have a few arrays that store information, like position and velocity. They all need to be the same length, and that way you can get all the information for a drop by looking at your arrays in the same location (eg the first drops position would be positions[0] and it's velocity would be velocities[0], etc). That way you can have 1 function to update, which iterates over all the drop information, and another to draw which goes over all the positions and uses your function to draw the shape at the location of every drop! Hope that helps!
@wata1991
@wata1991 2 ай бұрын
born too late to be a cave man, born too early to explore space, born just in the right time to learn about cool shader stuff
@bigfin20
@bigfin20 2 ай бұрын
it's insane just how much stuff inigo has done for shader community. You can't read about them for five minutes without running into a reference to him
@BarneyCodes
@BarneyCodes 2 ай бұрын
He's truly a gem, so grateful that he's shared so much of his knowledge with us!
@PollyWantsACrack3r
@PollyWantsACrack3r 2 ай бұрын
hi i wonder whay you use older verison of GLSL if im not miestaken now code is diffrent than that
@MeganWilliams-v8r
@MeganWilliams-v8r 2 ай бұрын
would love to see some more complex division detection with triangles and custom shapes
@felfar197
@felfar197 2 ай бұрын
thank you soo much!!!!
@BarneyCodes
@BarneyCodes 2 ай бұрын
No worries!
@daarkon
@daarkon 2 ай бұрын
Really cool Barney!
@BarneyCodes
@BarneyCodes 2 ай бұрын
Thanks mate! It's a bit of fun haha
@Gabriel-jr4kj
@Gabriel-jr4kj 2 ай бұрын
zoom out
@BarneyCodes
@BarneyCodes 2 ай бұрын
😂😂 Thank you for the reminder hahaha
@adamrushford
@adamrushford 2 ай бұрын
yes, don't save yourself 14% of millions of dollars... 4 mil = 560,000... hand that over to the greedy bastards at unity and unreal... actually no, give it to wicked engine..... actually no I made you a game engine everyone can use for free I am god thank thank *kowtow*
@adamrushford
@adamrushford 2 ай бұрын
the way you draw it better is with a grid system so you can skip empty grid patterns and instead of searching pixel by pixel you're grouping lots of pixels and scanning faster.... cellular automata/ sand simulations
@BarneyCodes
@BarneyCodes 2 ай бұрын
Not sure I understand sorry 😅 The looping I'm doing is through the image that stores the particle information (not the entire screen!), so I can get the location of each particle, and then I just colour in the pixel on the screen that corresponds to that particle's location :) I think the ultimate way to do the drawing better would be with either a geometry shader or vertex shader that can read the texture with the particle information, might be something I look into in the future!
@2001herne
@2001herne 2 ай бұрын
Hey, it's the hellswarm! Good times
@DetectiveConan990v3
@DetectiveConan990v3 2 ай бұрын
watching this to hopefully understand how this stuff works for my graphics class
@BarneyCodes
@BarneyCodes 2 ай бұрын
Hope it's helpful! Let me know if you've got any questions :)
@mikecu2249
@mikecu2249 2 ай бұрын
Great Guide! Amazing video!
@BarneyCodes
@BarneyCodes 2 ай бұрын
Thanks so much, glad you found it useful! :)
@BetaMAAXX
@BetaMAAXX 2 ай бұрын
I learn't so much from this video, Thank you Barney :)
@BarneyCodes
@BarneyCodes 2 ай бұрын
No worries at all, glad you found it useful!
@marcorademan8433
@marcorademan8433 2 ай бұрын
Hey Barney, why not have the components do things that mimic their real life application? For example, the capacitor will execute twice, a MOSFET will multiply, a diode will act as a minimum (or maximum), an inductor also do some sort of boost. Some other components - fuse; JFET; BJT; varactor diode; IGBT; LDR; LED; relay; triode tube
@BarneyCodes
@BarneyCodes 2 ай бұрын
Probably a good idea 😅 I was loosely basing it off that, but not very accurately (ie capacitor doubles since it stores power, resistor halves because it reduces current, the lo/hi pass filter icons are somewhat based on diodes). I'm sure I'll tweak them in the future, but to start with I wanted to make them visually distinct from the other components which look like ICs Your list of components is very helpful :) I think some of those might make an appearance! Thanks so much for the comment!
@Yahya-871
@Yahya-871 2 ай бұрын
can i make a minecraft shader with rhis tutorial?
@BarneyCodes
@BarneyCodes 2 ай бұрын
There'll be a bit more involved with getting Minecraft shaders set up I would imagine, but this should be a good starting point for the information you'll need! I'm planning on making some Minecraft shaders in the future though, which should be fun :)
@Cookieukw
@Cookieukw 2 ай бұрын
The most incredible thing about this video is the guy's sincerity. He looks at the code and says "oh, wow. I don't know how I'm going to fix this"
@timur.shhhhh
@timur.shhhhh 2 ай бұрын
First 34 minutes: I don't understand anything Last 49 seconds: I understand, but I don't know how to use it
@Veptis
@Veptis 3 ай бұрын
Here is a question: how to sample seamless gradient noise on the surface of a sphere? Do we have 2 or 3 values for the location? I tried to come up with something but it's quite difficult. I intentionally didn't look at references and solutions - so maybe that helps to think creatively
@BarneyCodes
@BarneyCodes 3 ай бұрын
I've not actually tried to do this myself, but I believe there are methods of "unwrapping" the surface of a sphere into 2D coordinates. You can either map it to the full rectangle (like a how a map is a rectangular version of the surface of the earth), which will have some distortion to it, or you can probably do a more accurate version, that would have gaps, which might make it difficult to do seamlessly. If you've got a noise generation function you could probably do it seamlessly by using the 3D point on the surface to sample 3D noise and guarantee that it's seamless? Might be worth playing around with a few different solutions and seeing what they look like!
@cocolasticot9027
@cocolasticot9027 3 ай бұрын
Alright, here we are : Witchcraft 101
@braydonfisher9273
@braydonfisher9273 3 ай бұрын
You forget factorio, the most polished game since snake. Built on a custom engine for 10+ years to massive success
@BarneyCodes
@BarneyCodes 3 ай бұрын
I think factorio is basically the perfect example of NEEDING to make your own engine because it's doing something super unique (just like the example I gave in the video of Noita etc)
@MiguelRodriguez-gs3pi
@MiguelRodriguez-gs3pi 3 ай бұрын
this video is pure gold. Thank you so much
@BarneyCodes
@BarneyCodes 3 ай бұрын
No worries at all, glad you found it useful!
@brentgreeff1115
@brentgreeff1115 3 ай бұрын
Very cool - but bg music is major distraction.
@BarneyCodes
@BarneyCodes 3 ай бұрын
Thanks, yeah haha I've learnt my lesson about the music! Thanks for the feedback :)
@JStar4000YT
@JStar4000YT 3 ай бұрын
how do you make it stop being able to move if you click a mouse?
@BarneyCodes
@BarneyCodes 3 ай бұрын
In the update function on the player, you can check the mouseIsPressed variable. If it's true you can set the mvmt vector to 0 before it's added to the x and y position of the player!
@JUN-dl7pi
@JUN-dl7pi 3 ай бұрын
is there a way to make the ink slowly disappear when mouse release?
@johnwayne8059
@johnwayne8059 3 ай бұрын
Sure, you just overlay a new rect with a color like 'rgba(255, 255, 255, 0.2)'! The opacity causes a slowly fading out! Enjoy and much fun!😉😁 EDIT: Of course fired by the mouse event 'mouseup', and this for some animation frame iterations...
@tiagomoraismorgado
@tiagomoraismorgado 3 ай бұрын
cool. perlin noise
@ColinPaddock
@ColinPaddock 3 ай бұрын
One thing you can do to vary the flow pattern is to use a Perlin noise with one more dimension than your display(3d on a flat screen, 4d on a 3d space), and vary that value(z for the 2d case, t for 3d) over time. That should create a smooth change in the flow pattern…
@BarneyCodes
@BarneyCodes 3 ай бұрын
I love this technique, thanks for the comment!