Making Cellular Automata Run MUCH Faster (Game of Life)
Vložit
- čas přidán 11. 07. 2024
- Code from video: editor.p5js.org/BarneyCodes/s...
Conway's Game of Life is a classic creative coding challenge and today we look at how to optimise it to run fast in P5js using shaders!
The method used is a sort of pseudo compute shader where the frame from the last generation of the game of life is fed into the shader as the basis for the next generation. The shader then outputs this new generation onto the screen where it is fed back into the shader, creating a loop that allows the game of life to run MUCH faster than if it was done on the CPU!
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
Chapters:
0:00 Intro
0:15 Shaders in P5js
0:30 Conway's Game of Life
0:57 CPU vs GPU
1:33 Loading a shader in P5js
2:09 Setup function
3:18 Draw function
3:45 Passing the screen into the shader
4:32 The vertex shader
4:46 The fragment shader
5:11 Uniform vs Varying
5:36 Current cell state
6:16 Number of alive neighbours
7:16 Implementing the GOL rules
8:22 Output from the shader
8:39 Final result
#creativecoding #p5js #gameoflife
!!!EDIT!!!: The method shown in the video were we use get() directly inside of setUniform() creates a memory leak on the GPU, the way to get around this is to use get() to draw the frame onto a seperate graphics instance, then use that instance inside setUniform(). I've updated the code in the link with this fix!
Thanks to @Andai for finding the issue!
~~~
It seems CZcams's compression has had a real go at some of these clips! I'll see if there's anything I can do in my recording/editing to hopefully make it better in the future.
I hope you found this technique interesting, there are a lot of different cellular automata that could be implemented using this method that could be fun to play around with!
If you'd like to see what else I'm working on, it would be great if you could wishlist my game Star Mining Co. on Steam! s.team/a/2584800/
That would make sense! I'll double check my recording settings as well though just to make sure because particles seem to be a common occurrence for me!
i dont know too much abt coding but thats insane how you can run so many cells so easly
Thanks! It amazes me as well to be honest! That's the power of using shaders for tasks like this, it makes them so much faster!
Greatly appreciated. This video helped me
That's great! Glad you found it useful!
I tried to do something similar today but couldn't get the previous state of the cells. this video really helped me out. thanks!
Glad it helped! I struggled on that bit for a little while but thankfully P5js makes it really easy in the end!
Thanks Barney ✌🏽
No worries!
i am the 1000th subscriber
congratualtion buddy 🎉
Wow, thanks so much!
Been having a blast with shaders, working on some raymarching :D
You're braver than me! One day I'll do raymarching, but today is not that day
This demo eats 500Mb of RAM per second, so there is little time to enjoy the shader graphics
@Andai was also running into this issue and after a little digging it looks like P5js isn't updating the "tex" texture correctly. Instead of replacing it in the GPU memory it looks like it's just uploading a new copy of the texture.
If you find out any information please let me know! In the meantime I'm still looking for a fix myself
Sorry, I forgot to update you when I figured it out!
Basically there seems to be some issue with using get() directly inside the setUniform() function.
My guess is that because get() returns a new image object each frame, new memory is allocated on the GPU even though we are setting it into the same uniform.
To get around this, I've created a "prevFrame" graphics object that I draw the current screen onto, and then use the "prevFrame" in the setUniform, which means we're using the same graphics object each time, which seems to get around the issue. I'd love to know if that works for you too!
I've updated the code in the link so if you go there you should see it in action :)
... yes
Indeed.
In the case of a GPU distributed/parallel computing shader approach, would the game of life simulation be deterministic or non deterministic?
For a single core CPU simulation, you would usually do a for loop over all the cells, so the order of computation of the cells is the same every time (usually top left to bottom right, or something like that).
In the Shader approach, is the order maintained, or are the cells computed as soon as possible, rather than in order of the cells position in the array? If the order isn't maintained, then running the same input multiple times would produce different outputs each time.
In conway's game of life, all cells are computed based on the last state of the world. So all changes must happen at the same time. This is why we need that texture of last frame's world state. It doesn't matter if it's single threaded or distributed. If you're changing the state of cells in-place then you're fundamentally changing the rules of the world and mutating the last state as you go - which would result in an inaccurate rendering of the game of life.
Great question @first name last name and great answer @TestSubject06!
Like they said, the game of life, and all cellular automata that I'm aware of get computed by looking at the previous generation when figuring out what to do for the next generation, meaning that the order cells are updated in shouldn't matter and therefore the output using shader code will be just as deterministic as CPU code!
I use P5 a lot for my art.
Have a question:
One algorithm I am using depends heavily on random pixel selection (per iteration) for it to work.
A routine is run for this pixel, then just loops.
Would using shaders speed up the process??
Am currently getting ~5 M/PS. Not sure if shaders would help as am only altering 1 pixel per iteration?
Would love some advice before spending time learning shaders.
Thanks in advance,
Irigima.
It's hard to say for sure without knowing the code you're running, but it sounds like that might not be the best application of a shader because, as you say, you're only changing one pixel per frame.
What are you actually doing to each pixel? Because it might be best to try and optimise that code for the best speed up!
I'm sorry that this isn't the most helpful answer, if you have any more questions or want to add any more detail then feel free!
Can the game of life emulate another game of life with other rules than the first?
Definitely! The rules are defined at the bottom of the "gol.frag" fragment shader file (in the if statements). You can modify them in order to change the rules that the simulation uses!
Let me know if you have any other questions!
i know im kinda late but is there a way to input singular cells from a list, my goal is to try to draw videos in the shader but im new. i have a list of booleans of true and false and i'll just force them to stay on if i find them in my list
If I understand correctly you want to use your video frames as the starting point for the cellular automata? That sounds really cool!
If you want your video to influence the automata, you'll have to draw the pixels in your list at the top of the draw function (like where I'm drawing the line from the mouse, before the "prevFrame.image(get(), 0, 0);" line).
But because of the way the cellular automata works, these pixels won't necessarily get drawn to the screen because they might have "died" according to the automata rules, so if you want all the pixels in your list to be white then you might have to redraw them at the bottom of the draw function (after the "rect(-width/2,-height/2,width,height);" line).
I hope that helps and I'd love to see what you come up with! Let me know if you have any more questions :)
@@BarneyCodes ive been having a weird issue where if i draw after the shader, it doesn't actually draw. do you know why this could be?
@@literallyaperson7125 You might need to use the resetShader() function, which returns the renderer to its default shader, but don't forget to set the shader back to your custom one! You can read more about resetShader here: p5js.org/reference/#/p5/resetShader
@@BarneyCodes thank you! definitely a sub. im not super familiar with p5js but everything else was a breeze so your support is greatly appreciated
Thank you! If you have any more questions, always feel free to ask
how rude of you was to delete my comment about this kind of stuff
Hey sorry, I don't think I've deleted any comments?