Completely overhauling my game
5:50
Simulating Water Colour Paint in P5js
12:06
Пікірлер
@dion9781
@dion9781 3 күн бұрын
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 2 күн бұрын
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 3 күн бұрын
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 6 күн бұрын
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 5 күн бұрын
He's truly a gem, so grateful that he's shared so much of his knowledge with us!
@PollyWantsACrack3r
@PollyWantsACrack3r 7 күн бұрын
hi i wonder whay you use older verison of GLSL if im not miestaken now code is diffrent than that
@MeganWilliams-v8r
@MeganWilliams-v8r 9 күн бұрын
would love to see some more complex division detection with triangles and custom shapes
@felfar197
@felfar197 12 күн бұрын
thank you soo much!!!!
@BarneyCodes
@BarneyCodes 12 күн бұрын
No worries!
@daarkon
@daarkon 13 күн бұрын
Really cool Barney!
@BarneyCodes
@BarneyCodes 13 күн бұрын
Thanks mate! It's a bit of fun haha
@Gabriel-jr4kj
@Gabriel-jr4kj 13 күн бұрын
zoom out
@BarneyCodes
@BarneyCodes 13 күн бұрын
😂😂 Thank you for the reminder hahaha
@adamrushford
@adamrushford 13 күн бұрын
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 13 күн бұрын
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 13 күн бұрын
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 13 күн бұрын
Hey, it's the hellswarm! Good times
@DetectiveConan990v3
@DetectiveConan990v3 14 күн бұрын
watching this to hopefully understand how this stuff works for my graphics class
@BarneyCodes
@BarneyCodes 14 күн бұрын
Hope it's helpful! Let me know if you've got any questions :)
@mikecu2249
@mikecu2249 20 күн бұрын
Great Guide! Amazing video!
@BarneyCodes
@BarneyCodes 19 күн бұрын
Thanks so much, glad you found it useful! :)
@4z4z37
@4z4z37 20 күн бұрын
I learn't so much from this video, Thank you Barney :)
@BarneyCodes
@BarneyCodes 20 күн бұрын
No worries at all, glad you found it useful!
@marcorademan8433
@marcorademan8433 23 күн бұрын
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 22 күн бұрын
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 26 күн бұрын
can i make a minecraft shader with rhis tutorial?
@BarneyCodes
@BarneyCodes 25 күн бұрын
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 26 күн бұрын
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 Ай бұрын
First 34 minutes: I don't understand anything Last 49 seconds: I understand, but I don't know how to use it
@Veptis
@Veptis Ай бұрын
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 Ай бұрын
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 Ай бұрын
Alright, here we are : Witchcraft 101
@braydonfisher9273
@braydonfisher9273 Ай бұрын
You forget factorio, the most polished game since snake. Built on a custom engine for 10+ years to massive success
@BarneyCodes
@BarneyCodes Ай бұрын
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 Ай бұрын
this video is pure gold. Thank you so much
@BarneyCodes
@BarneyCodes Ай бұрын
No worries at all, glad you found it useful!
@brentgreeff1115
@brentgreeff1115 Ай бұрын
Very cool - but bg music is major distraction.
@BarneyCodes
@BarneyCodes Ай бұрын
Thanks, yeah haha I've learnt my lesson about the music! Thanks for the feedback :)
@JStar4000YT
@JStar4000YT Ай бұрын
how do you make it stop being able to move if you click a mouse?
@BarneyCodes
@BarneyCodes Ай бұрын
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 2 ай бұрын
is there a way to make the ink slowly disappear when mouse release?
@johnwayne8059
@johnwayne8059 2 ай бұрын
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...
@tmm88muziek
@tmm88muziek 2 ай бұрын
cool. perlin noise
@ColinPaddock
@ColinPaddock 2 ай бұрын
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 2 ай бұрын
I love this technique, thanks for the comment!
@BarneyCodes
@BarneyCodes 2 ай бұрын
Didn't realise there was an audio delay, or that the game sound was SO loud sorry! Hopefully will get that fixed up for the next one!
@_devilfish303
@_devilfish303 2 ай бұрын
ive always subscribed to the idea that you code the game in mind and an “engine” is the end result of that. It is not a general purpose engine though, but a highly specialized one only designed to run the game you set out to make, no more no less
@BarneyCodes
@BarneyCodes 2 ай бұрын
That's sort of what I've been doing with my current game, it's definitely not a general purpose engine! The issue with that is you've basically got to re-start any time you want to do a different style of game, which can eat up a lot of time! I totally get the appeal of doing things from scratch, but from a practicality stand point, if you're trying to get things done, I think it makes sense to use an off-the-shelf engine or at least a framework, so that the heavy lifting is already done for you!
@_devilfish303
@_devilfish303 2 ай бұрын
@@BarneyCodes there's a set of programming paradigms that i recommend you look into: SOLID When you understand SOLID you will not only become a better programmer, but code that you write, no matter how specialized, will tend to be modularized in a way that can be reused for other projects. That said, i totally get where you're coming from. I started out writing a game from scratch myself only to stop and think if what im doing is even fun. In my case i do require a custom renderer, as it is meant to be a voxel ray traced game and in such a case i need to squeeze out as much performance as possible out of the hardware. Godot is a non-starter for me unless i modified the engine code and stripped out absolutely everything i don't need... HOWEVER! i am planning on prototyping it first, in Godot, to see if it would even be worth making. Is my game idea fun? is the question i want to answer before i dig myself in too deep with a custom "engine"
@Niktmnieniechciej
@Niktmnieniechciej 2 ай бұрын
One of the best on youtube.
@BarneyCodes
@BarneyCodes 2 ай бұрын
Thanks so much!
@sasho_b.
@sasho_b. 2 ай бұрын
Just cuz i searched for conway one too many times and now, 2 weeks later, my youtube is just conway's game of life: I made a c++ implementation that can run thousands of generations in a few seconds, but more important: it works on an infinite grid. So, take that Barney Codes! I mean, it doesnt really matter but that doesnt stop me. cool vid
@BarneyCodes
@BarneyCodes 2 ай бұрын
😂
@samdavepollard
@samdavepollard 2 ай бұрын
Only half way through but this is gold. I've dabbled a little with real basic shaders in opengl using c++ but all that VAO, VBO stuff gets pretty old very quickly. I've also dabbled in p5.js a fair bit but never used shaders (didn't even know until recently that shaders in p5.js were possible). Pretty excited to see what I can create with p5.js shaders. Many thanks for getting me started, much appreciated.
@BarneyCodes
@BarneyCodes 2 ай бұрын
Haha yea setting all that up can be a bit of a chore, P5 is great for just messing about and getting something on the screen quickly! Have fun!
@samdavepollard
@samdavepollard 2 ай бұрын
fascinating stuff really nice done many thanks for sharing your knowledge subbed
@BarneyCodes
@BarneyCodes 2 ай бұрын
Thanks so much, glad you found it useful!
@Lycanthronaut
@Lycanthronaut 2 ай бұрын
As a software engineer that uses the standard python and java / C# dabbles, this is like a wizard learning a different school of magic lol, so interesting
@usernameusernameusername12
@usernameusernameusername12 2 ай бұрын
Wich framework are you using? Great video
@BarneyCodes
@BarneyCodes 2 ай бұрын
In this video I'm using P5js which is a creative coding library for JavaScript. It uses WebGL, but the concepts in this video should be translatable to whatever framework or shader language you're using!
@pressureswitch
@pressureswitch 3 ай бұрын
As an og space engineers player I love this concept.
@Wkaelx
@Wkaelx 3 ай бұрын
Oh no! I have recivied the power to create an alternate reality in javascript, i shall use this power to conquest the world.
@rrutter81
@rrutter81 3 ай бұрын
perfect no-nonsense introduction to shaders. The pacing was perfect from start to finish. well done.
@BarneyCodes
@BarneyCodes 3 ай бұрын
Thanks, glad you liked it!
@revenevan11
@revenevan11 3 ай бұрын
This video is the best one I've found so far. The pro tip around 32:00 makes a ton of sense but I hadn't thought of it yet, glad you caught me writing my if statements lol. For context I've been working on my very first shader today! Coincidentally also in P5js like your examples. I came here because of confusing syntax errors I've been getting and although I'll have to troubleshoot those some more (or maybe explicitly define the webGL version the syntax I've learned is correct for? 😅) I think this is helpful. The project I'm writing a shader for is rendering the mandelbrot set, moving the load to the GPU as an upgrade to my current p5 sketch for it. The current version I already built has scrolling to zoom in and mouse-drag panning support, as well as using arrowkeys to change the canvas resolution on the fly... but especially at higher resolutions it's taking minutes to render, so it's far from responsive lmao. I failed to make the rendering function render asyncronously to a graphics object *and* have p5 move or zoom in on the last rendered frame while the next one loaded though, I guess because it's not waiting for 1 long operation or fetch and only for a bunch of small calculations, so doesn't ever hand control back while awaiting, so p5 just shows the preview change for a split second after the next image finally renders and then immediately slaps the new one it's been waiting for over it lol. So I'm skipping that idea since I don't feel like learning web workers for it and instead going straight to shaders for the real performance gains! Before watching this video I'd already ported over (from JS to GLSL) my functions for complex number multiplication, mandelbrot iteration, checking if points are inside the set (need to change to using step function now 😆😅), and for coloring points based on the number of iterations each complex number takes to escape... I was trying to pass some uniforms into it for things like the number of iterations and user input for zooming, but I haven't gotten it to load once without getting syntax errors 😒. I mean I also haven't finished some of the basic features like properly mapping between the fragcoords to mandelbrot space *while* taking the zoom input into account, but I made a map function for it that I was about to test when I got weird syntax errors while trying to load my shader for the first time. Previously in the non-shader cpu version I was mapping from pixelcoords to the complex plane (within a range depending on the zooming and panning) so it'll be a bit different and I'll need to make sure I don't stretch the image by the aspect ratio again like I initially did in the cpu bound pixel version, but it's a work in progress and the whole point of this project was for fun and learning!!! 😁
@BarneyCodes
@BarneyCodes 3 ай бұрын
Rendering fractals with shaders is a lot of fun and a really great project to get familiar with shaders! If you get stuck, I've got a video on my channel about making a mandelbrot shader ;)
@animaze86
@animaze86 3 ай бұрын
i still have the opengl programming guide like 8th edition?? opengl 4.3* i think - GLSL shader programming is really fun - and very rewarding.
@Cranky-12
@Cranky-12 3 ай бұрын
Really cool, I have never seen this done with a SDF. Usually this is done with a regular normal map where you use the normal vectors as offsets. That has the added benefit of not only being able to change the shape of the shockwave, but also give it a texture/roughness. You can generate the normal map from a shockwave mesh in blender for instance. You can then also rotate it etc. It can be really versatile, and be used for instance for heat distortion from a flame. But the SDF approach has the benefit of not becoming blocky/revealing the resolution of the texture if scaled up a lot.
@BarneyCodes
@BarneyCodes 3 ай бұрын
It's certainly a more resource intensive than using a texture, but you can calculate the normal from the SDF. The thing I quite like about this approach is being able to change the shapes, it might not be very practical in a game but I think it's pretty cool hahaha Thanks for the comment!
@CSMHD
@CSMHD 3 ай бұрын
you can do this waaaay faster i mean like 1000x
@CSMHD
@CSMHD 3 ай бұрын
you wanna know how ? think parallel ... draw all distortion on canvas with rgb then distort hole screen at once :D
@BarneyCodes
@BarneyCodes 3 ай бұрын
This method is distorting the whole screen at once using the parallel power of the GPU!
@CSMHD
@CSMHD 3 ай бұрын
I guess i misunderstood the first sentence of the video. You said its in many games. Not like infinite many shokwaves at the same time. I used a similar shader in my game. The limit was 10 fullscreen shockwaves at the same time. B.c. if you want to add a second wave you need to rerun the hole shader on the already distorted image from the 1st shokwave-image. Right? Thats not parallel at all. With my idea you can run 10000 shockwaves as big or as little at the same time all at once.
@CSMHD
@CSMHD 3 ай бұрын
Nevertheless. Damn good tutorial !!
@BarneyCodes
@BarneyCodes 3 ай бұрын
Oh I see! I was wondering about this, and I think with this method you'd be able to do them all in a single pass and accumulate the offsets for each wave before sampling the background image. Interested to hear your idea though for sure!
@alexandrewatrin8293
@alexandrewatrin8293 3 ай бұрын
Really really well made video thanks
@BarneyCodes
@BarneyCodes 3 ай бұрын
No worries, glad you enjoyed it!
@SombreroMan716
@SombreroMan716 3 ай бұрын
awesome video!
@critical_always
@critical_always 3 ай бұрын
Thank you, that was extremely useful.
@murrrr8288
@murrrr8288 3 ай бұрын
w0w!
@4Bakers
@4Bakers 3 ай бұрын
6:34 wouldn't that be a Signed Distance *Function?* I thought Signed Distance Fields used textures instead of mathematical models
@BarneyCodes
@BarneyCodes 3 ай бұрын
I could definitely be wrong on this, but I thought they could be used interchangeably. Your definition makes a lot of sense though!
@deltapi8859
@deltapi8859 3 ай бұрын
this is an exceptionally well made video. the pace and detail is awesome to reason about the content. Also like the display of "new image" vs "old image". Very well done.
@BarneyCodes
@BarneyCodes 3 ай бұрын
Thank you so much, glad you liked it!
@lachee3055
@lachee3055 3 ай бұрын
finally, a guide using colour
@motbus3
@motbus3 3 ай бұрын
Thanks again for one more vid. ❤ In codecrafters as, it is written +new lanGAUges
@BarneyCodes
@BarneyCodes 3 ай бұрын
Whoops! Good pick up hahaha
@motbus3
@motbus3 3 ай бұрын
@@BarneyCodes my eyes are trained for this specific mistake because someone configured an important variable with this mistake and unfortunately it has been replicated across the boundaries of an API. So everybody is writing lanGAUges because no one wants to update dozen of different repos