Hi! My name's Barney and I really enjoy making visual, interactive experiences with code. On this channel I'll share cool things I've learned and the projects I'm working on.
You can expect to see videos on data structures, algorithms, graphics programming, game development and more!
My videos are a mix of tutorials, that teach you how to create your own creative coding projects, and devlogs, that keep you up to date with my personal projects!
Пікірлер
Colors can be stored directly as a range of 0-1 per channel.
This style of devlog is extremely watchable and I want more... Hopefully the views catch up to the quality and makes it worth doing more like this.
Thanks so much, that's very kind! At the moment I'm focusing more on development than filming but I definitely plan on doing more like this in the future! Thanks again for the comment :)
Awesome video Ty!
link in the description for the data types is broken, its missing the closing ")". It appears to be text after the link
Thanks for catching that! I've hopefully fixed that up now :)
that was great!
Voronoi looks nice. But maybe if can you make it move? Like shift slightly up, center and slightly down. It can be a vertex shader I think, sine function may work.
Where the water depth is nearing 0, it should have waves cresting.
If you could scale up the map it would definitely be a pretty good ground work for a naval strategy game
amazing work, looks drastically better!
idk how it would look, but perhaps terrain smoothing based on altitude would look nice? the beaches would look less bumpy and the mountains could be made to look sharper
I am familiar with java, but not Processing. Do you have any videos on getting it set up? I love your projects.
If you're just getting started with it, you really can't beat Dan Shiffman's videos here on KZread (the channel is called 'The Coding Train'), he's got heaps of videos on using Processing so it's an excellent place to start. Otherwise, the documentation is decent enough that you can probably just download Processing and start messing around and figure a lot of it out!
Hi Barney, is there a way to do this for moving particles being repelled by the mouse?
I think my first ever video on this channel did something similar to this. The general idea is the same, where the proximity to the mouse influences a particle, but instead of having a "home" position that the particle is trying to reach, they just have a velocity that they use to move around. The velocity can then just be pushed in a direction away from the mouse if the particle gets too close. Hope that helps!
Exploration game with procedural structures and base building, maybe some elements of tower defence where you are being attacked at night?
Not sure if you can simulate it but I thought it was worth mentioning that the cove that gives the impression of a smaller island being eaten by your main island would be surprisingly smooth most of the time. I live in a cove with a similar make up and it's often as smooth as a lake when there aren't any boats on the water.
You can start with the cozy fishing village and then gradually deal with OilCo buying up rights to the island, and the villagers having to fight back (with wind/solar/malicious interference)
I love this. Lots of information and no wasted time. Very well done.
Thanks so much, glad you found it useful!
Question about the example shown at 30:18 : One natural optimization to me is to break the for loop if d is 0, as you don't have to check any more circles if you know it is inside one of them. But I've also heard that having conditionals in shader code could be non-optimal. Or have you done it like this here just to keep it simple? EDIT: Oh you mentioned this a bit later. Still though, how does this downside weight up against potentially not having to check 80-90 circles if you landed inside one in the first iteration?
This is a really great question! I think I forgot to include this in the video, but shaders are only as fast as the slowest case, which is probably a bit different from how you're used to things working on the CPU! On the CPU, since things are happening one after the other, if you can move on quickly to the next iteration you can save time overall. However on the GPU, because all the pixels are being calculated at the same time, the shader has to wait for all the pixels to finish before it can finalise the result, meaning that even if 99% of the cases break early, the shader still has to wait for the pixels that are in that final 1% that are taking their time! I don't think the optimisation you've suggested would hurt the performance at all, but it's better to focus on speeding up the worst case, rather than speeding up the most cases (which can take a bit of getting used to!) Hope that helps clear things up a bit, let me know if you have any more questions :)
@@BarneyCodes Thanks for the answer, and thanks for the video! I still have one more question if you don't mind: You say "All the pixels are being calculated at the same time", so I'm trying to get a grasp of how gpu's do this. Say the gpu has 1000 cores. If a scene has a million pixels, each core would still have to do multiple pixels each. Can these calculations be parallel within one core, or does each core calculate "sequentially"? Because if they at some point have to do sequential calculations, then I feel like there should be a benefit to optimizing by breaking, as that core could then process more pixels. So I guess the question is if each core utilizes some internal parallelization technique, or if one core can only handle one calculation at a time?
You know what, I don't actually know! I've read that they're all done at the same time before, but hadn't stopped to actually think how that would work in practice. I just did a bit of googling and it looks like each core can run multiple threads at once (each thread calculating a single pixel), but it's still not enough to actually do "all the pixels at the same time"! From what I've read the GPU executes a block of pixels at the same time, and only moves to the next block only if EVERY pixel in the first block has finished, so it's kind of a mix of what we were both saying! With my example code though, it's pretty likely that a lot of the blocks would be able to finish early, so your optimisation would definitely have an impact. I think it depends a lot on what you're actually doing in the shader and it wouldn't be quite as significant as the same optimisation on the CPU. Thanks again for the great question, I learned some new stuff, and hopefully that helps you as well!
@@BarneyCodes I see, thanks again for the reply!
❤
this is bar none the BEST video explaining shaders I have watched in YT. Very very very well done!
Thank you so much! Glad you found it helpful!
I would make distance blur detection with taking 2 additional shadows (+ and - angles, gives additional parameter of blur) and getting inverse intersections and blur those. Good video!
I definitely think this is the way to do it but, unfortunately, I don't think my current implementation is fast enough to handle multiple rays per pixel. I think the mip-map optimisation I covered in my last video would probably allow me to do that though so I'll look into it again when I make the move over to Godot Thanks for the comment!
since height is a core element to this game-to-be I was thinking of a Worms style shooter. You bomb each other which rips craters into the landscapes and transforms what the island looks like and where shadows land. You could have an additional 2D view, a vertical plane that you rotate around your currently active unit and align it with your target unit.
That could be a lot of fun and probably not too difficult to get working! Cheers for the comment :)
could you get a slow sine curve that triggers tides and moves the water level up and down?
the one thing I would change is the intensity of the sunset effect. I feel like the island becomes way too dark too soon. In your example everything is red when the shadows hardly leave the island. In reality you need a really shallow sun to get into deep reds.
You're definitely right! At the moment it's just a linear interpolation based on the angle of the sun so not very accurate at all! Thanks for the suggestion!
This effect would look really nice combined with a voxel space engine (a 2.5d 3D engine that uses a heightmap to generate 3D voxel terrain)
I haven't heard of voxel space engines before but they sound cool, I'll have to check them out. Thanks for the comment :)
Your game iddea is great. And since you have the code for sun and shadows and other stuff, the way you place the solar panels or the way panels recieves sunlight may matter. And maybe you can add wind mechanics and wind turbines may have a role also.
I was thinking along the same lines, it would be great to actually use the sunlight/shadow system as part of the gameplay and I think solar panels would be a great way to do that! I'll have to see about simulating wind as well, might be a bit more complex to figure out how wind would flow around the island! Thanks for the comment!
I really wasn't expecting this video to be this difficult to adapt for Java Processing, but it's proving to be incredibly hard to make this example code work there.
What issues are you running into? There are definitely some differences in getting the environment set up, but the actual shader code should be usable between both (you might just need to check what uniforms/attributes are available by default in Processing vs P5js) If you're getting any error in particular I can try to give you a hand to get it sorted out!
@@BarneyCodes That's what I thought as well. When I first copied everything down the shaders just refused to compile, so I figured the names of the attributes must just be different. It took me a while to find any documentation about what attributes were available in the Processing environment (the official site has pretty much nothing that I could find about implementing shader functionality despite this being a feature for years at this point) vs P5, but eventually I found examples in an old backup of a blog that went pretty in depth about how this stuff worked for Processing. After replacing all of the attributes with their correct counterparts the shaders were finally able to compile and run, but specifically the vertex shader just doesn't have the expected behaviour. It refuses to shade anything in 2d that isn't a square that fills the whole screen. I've been tinkering with it off and on for a while trying to figure out what in the implementation is different enough to make this not work, but I don't have enough experience or documentation support to really know what's up here
I've only used shaders in Processing for full screen effects, so unfortunately can't be too much help there sorry! A few of the example Processing shaders I've seen have different defines at the top, eg: #define PROCESSING_TEXTURE_SHADER or #define PROCESSING_COLOR_SHADER maybe something like that helps? I know Processing also lets you either supply a vertex shader or just use their default one, not sure which route you've been going down (maybe both already!) but it could be good to try them both out to see if that helps at all. As a last resort, the Processing source code is all available on GitHub so you can also dive into that (if you're feeling brave enough!) to try and figure out what's going on and why it might be behaving strangely! Sorry I don't have a more concrete bit of advice for you, but hopefully there's something in there that's helpful? Good luck!
Idea for the game. The water level is really high to begin with. The goal is to reach balance with water and force it to recede to an acceptable level you get it to recede by building carbon capture devices. The carbon capture device is dependent on electricity. The last solar generator on earth powers the first carbon capture device that keeps the water from taking over the top of the mountain. As the water recedes the biomes change. The mountain top becomes frigid and has more cloud cover making the electricity generation drop which then makes the carbon capture output drop.
Interesting idea, I like it! I really like the idea of using solar power because it would work nicely with the sun/shadow system and I could somewhat accurately simulate the efficiency of the panels changing throughout the day, taking into account shadows and what not. Thanks for the comment!
Too many complicated bs
Here's a proper spaceship (_)_):::::::::::::::::::::D~~~~ (It's a Internet Comment Etiquette reference, I don't want to insult you)
Hahahaha thanks for clarifying 😂
Great video! One suggestion is that it's a little odd that the spaceship is on a fixed x,y coordinate while the asteroid is rotating. It should follow that desired coordinate with an ease in and an ease out function, so it takes a little while to accelerate to follow the camera when you start rotating, and it should slow down to stop where the camera stopped.
Thanks for the feedback! This actually an improvement I've made since filming this devlog, you're quite right, it helps a lot! You can see it in action in the playtest on steam if you want :)
the best shader tutorial ive watched so far!!!! THANK YOU!!!!!!!!!
No worries, glad you found it helpful!
What about some game about triggering underwater volcanos to make islands. I realize thats harder than modifying the water level, but playing with the texture map could be an interesting exercise. Say you control the elements - fire builds up to trigger eruptions and clear grass/trees, water adjusts water level and causes rain for errosion, wind also does a different kind of errosion and blows seeds into new areas. Goal is to terraform certain characteristics of into the island to attract different kinds of wild life or create different resources
That sounds amazing! Could be a good challenge, thanks for the suggestion!
i love this layout of the video it makes it more personal in some way i did see that someone didn't like the keyboard sounds i actually liked it but if you could find a way to make it nicer for others that would be nice love this game
Thanks you so much! I had a ton of fun making it to be honest, felt a lot more "me" if that makes sense? I can definitely see both sides on the keyboard noises, and it was irking me a bit too that the sounds didn't line up with the visuals, but the original audio was too janky to use hahaha Hopefully for the next one I'll have the audio and visuals synced and I'll probably just turn them down a bit so they aren't so intrusive Thanks again!
I loooove this thank you ❤
Thanks so much! So glad you like it :)
Thanks for the shoutout! Love the way you implemented the idea! Even better having to get back to the beacon! Could the rescue fee cost more depending on how close to the centre of the asteroid you are? Just practically if you’re in the core it’s harder to rescue you than the surface. Also helps with balance as a beginner won’t go as deep and won’t have as much money etc. Also what about a fog of war type situation where you can only see into the rock so far from both the surface and from the miner. Could be a good way of adding uncertainty, and as the drill powder progresses it goes less from being about the fog of war to optimal planning. Also might help with the learning curve as to not over whelm a new player with too much information. Keep up the great work!!
No worries, thanks so much for the idea in the first place!! I definitely need to re-work the rescue fee a bit to get it feeling just right, I was originally thinking to use the distance to the beacon, but I think distance to the centre is a better idea! Definitely helps out at the start The most recent version actually has fog in it! This video is a little way behind what's currently up on the play test on Steam (the screen shots over there show the fog if you want to see!) I still need to tweak the fog to make it look good, but the concept definitely helps a lot. I'm planning on adding some things into the asteroids that you'll want to avoid so the fog should help with the suspense as well! Thanks for the support, really appreciate it!
What task manager were you using at the beginning?
I use Notion at the moment to keep track of everything I've set it up to basically be a kanban board but I like it because I can have different views that sort and filter it differently (helps me stay organised) and I can also have pages for just notes and stuff that aren't part of the board, so everything's in one spot
Hey, I love your videos but I find the keyboard typing quite annoying, it's a bit too loud and it bothers me that it isn't synched with the video😅. I'd love to see this game ported to godot too!
Very helpful feedback, thank you! I'll either get rid of it or use the actual audio in the future, and just make it quieter (I got a new keyboard after this video, but the one in the video has blue switches which are just obnoxiously loud hahah)
first :)
Damn, you're fast! Hahaha
@@BarneyCodes Im just in the discord and really like your content :)
I appreciate it! :)
This is a very different idea, but I'd want to see this becoming either a minesweeper-like (where you would want to either not reveal or not shadow-cast some area), or some puzzle game, with elements revealed by changing Light direction (something as "find the appropriate angle to shadow-draw the pattern", but with a cooler approach).
I like this idea a lot, leaning into the shadows makes a lot of sense, rather than leading into the current terrain/scene, since the terrain generation is pretty generic. Thanks for reframing the whole thing, and thanks for the comment!
Textures don't have to be RGBA 8-bit/channel. For a height map you should use a single-channel texture (e.g. depth map). It can be a single float even, or a 32-bit integer if you want.
Thanks for the comment, very helpful! When I move this over to Godot I'll be sure to look into it :)
For the bit packing of the colour channels, multiply the float by 255 while rounding to int. then you can store the entire int4 as your colour 0-1 values. bear with me, I dont use GLSL anywhere close to as much as I do HLSL: vec4 color = texture(tex, uv); //Your texture RGBA uvec4 parts = uvec4( color * 255.0 ); //RGBA [0 | 1] -> [0 -> 255] parts <<= uvec4(0, 8, 16, 24); //Shift all components to their positons return uint(parts.x + parts.y + parts.z + parts.w); //combine terms, could be or as well Typically though, you can tell the sampler in shader to read the values of your texture as specific types but meh.
Oh that makes a lot of sense! For some reason it didn't occur to me to just make the floats into the 255 range and make them ints, thanks for the comment!
This introduction explains al ot about shaders even tho its just an intro it is really worth watching oh also i wanted to ask is it possible to learn GLSL and opengl at the same time?
Glad you found it helpful! I definitely think it's possible to learn both at the same time, in fact it's probably necessary to learn a little bit of GLSL to do anything with OpenGL, but I think it's probably best to just do the basics of one, enough to let you explore the other, and then you can come back and learn the first one properly, just so you're not too overwhelmed!
I needed a hightmap for a project but could not use the same method. The method i used was store value 0-255 in one channel. -255-0 in a other. 256-767 in the 3 rd channel and 768-1791 in one channel. Of cause this is pretty inefficent as well. but at least i could store the full range from -255 to 1791 in one pixel. The reason i did it that way was because i needed pixel to pixel conversions that could not becaluate din the other colors. no way nice, but it worked.
Interesting, thanks for sharing! I might end up doing something similar here
Make it a Wallpaper Engine background!!!
That would be sick, great idea!
Hi BarneyCode, I really like these videos. It's great to see the iterative improvements and your openness to feedback and critique; you're setting a good example. I think there is a nice, single pass solution to your blurred shadows, called penumbra, from Inigo Quilez's website (/articles/Soft Shadows). If I understand your method correctly, you're effectively ray marching your terrain to calculate the shadows so this method should be applicable. You should be able to calculate the "closest miss", h, the minimum distance between a ray and the terrain along the path of the ray, and the "distance to the closest miss", t, for almost free. BTW, Inigo Quilez's website is a treasure trove of knowledge; well worth reading through it. However, I also think that the penumbra effect might not be realistic for rendering terrain from this perspective. The penumbra shadow happens when an extended light source is partially obscured by an object. The sun covers roughly 0.5 deg of the sky, so it is an extended light source, although very small. Doing some trig, you can work out that for a mountain of height 1km and the sun at a declination of 25 deg from the horizon, the penumbra effect would only cover ~50m, or 3% of the total shadow length (~2km). This of course increase when the sun is low and the shadows are very long. You could set a physical scale for your height map and pixel terrain to work out if this is even resolved. The physical seize of the penumbra effect should be h * (1/tan(theta) - 1/tan(theta-0.5)), where h is the height of the mountain and theta the declination of the sun in degrees, assuming a flat ground at sea level.
I absolutely love IQs website, like you say it's so packed with info, such an amazing resource! I think the way I've got the raycasting set up would make this a little strange looking because at the moment I'm only considering the vertical distance to the terrain when taking steps, so I think the shadows would only be blurred along the direction away from the light (if that makes sense? Only the "tops" of the shadows would be effected, since the ray is not checking sideways distance to terrain). Definitely something I should look into though, I think some better soft shadows would look way better than what I've got at the moment, even if in reality they wouldn't really be visible at this scale. Thanks so much for the comment!
why doesnt "backgroundImage = loadImage('dog.jpeg');" work on your example
Hmm, I just tried the link in the description for the Image Example and it was running without a problem. I have run into some issues recently though with the loadImage function not liking some images. Not sure exactly what the cause is, but could you try going to the index.html and changing the version of P5js it's using to see if you still get the issue? The other thing to look for is, if you've downloaded the files to use locally, I think you have to use a local server because browsers don't like it when you try to load files directly. Hopefully that helps!
@@BarneyCodes thanks for the answer. I fixed it by creating a folder and putting the image in it.
Would be cool if you added fresnel/PBR shading and texture maps to your terrain shading model which would significantly boost realism and allow you to better define different materials and represent them realistically!
Thanks for the suggestion, seems like I've got some more reading to do!
This is unbelievable. Someone else is also aware of Hugo Elias' articles.
I would suggest looking at graphics rendering whitepapers when you get the chance. You can learn about a lot of novel techniques this way. Also, regarding environmental stuff for that game concept... Nuclear is the way to go. It may not seem like it depending on the particular propaganda of certain countries, but... The science is in favor of it.
For reference: a properly designed and properly functioning nuclear plant puts *no* radiation into the surrounding environment. Meanwhile, coal dust has radiological contaminants in it naturally. And nuclear waste? It's stored in cement casks. And unlike chemical waste, *it stops being dangerous* after enough time has passed.
I've had a look at some papers in the past but they always seem to be written in extremely inaccessible language. Maybe I'd have a better chance now that I know a bit more about this stuff? Are there any papers you'd recommend in particular? Re nuclear, I am the furthest thing from an expert, but from what I've read it seems like a great solution but I understand it takes a while to get a plant up and running and no one seems to want to invest that time and money.
@@BarneyCodes Hmm... Try "Line Integral Textures", just as a random example off the top of my head
@@BarneyCodes honestly, I've read so many papers that I kind of just got a feel for it over time.
I'll check it out, thank you!
2:50 It might be possible to create a blur by creating multiple, more transparent shadows then offsetting the angle of each shadow slightly. That way, the shadows would be more solid near the origin of the shadow (since the shadows would overlap more), and more blurred near the end of it.
I should really try this out, I just assumed that this would be too slow and would no longer run in real time, but I won't actually know that til I give it a go! Thanks for the suggestion!