Coding a fireworks effect

[@Haykke]

The Creativity using maths on this guy are out of this world

[@JochemKuijpers]

There's a minor 'error' if you want to call it that: vec2 offs = Hash12(i+1.+ft)-.5; should be: vec2 offs = Hash12(i+1.+ft*NUM_EXPLOSIONS)-.5; So every explosion changes offset after they fade out instead of just one. Some intuition for that: right now you have a 'sliding window' over your hash function the width of which is NUM_EXPLOSIONS and it shifts by 1 every second. With this change, the sliding window over the hash function jumps an entire window-length, making sure you don't see explosions on the same hashed offset twice. EDIT: another change you could make is to give every explosion an unique color, right now all explosions in the same 'second' use the same color, you can add i multiplied by some arbitrary large value inside the sine function of the color for that. EDIT2: I should note: very good explanation, I enjoyed watching this video :)

[@TheArtofCodeIsCool]

Yeah i noticed afterwards that the explosions still happen in the sample place. Oww well, at least there's a helpful comment now that explains how to fix that!. Thanks for the comment and thanks for watching!

[@fanourismoraitis7464]

Is there a chance that ahyone can explain what is the effect of the iTime+i/NUM_EXPLOSIONS; because from what i understand the integer part of the iTime ft=(floor(iTime)) is driving the seed of the Hash12 and stays the same for 1 sec which is the time that the fract(iTime) "oscillates" from 0.0001 to 0.9999 but now when i add some number eg i/NUM_EXPLOSIONS; we change the fractional part of iTime for each iteration so that means that the floor( iTime+i/NUM_EXPLOSIONS) will not stay the same for a 1 sec (at least for all the iterations that i is not zero). Please some help .Thank you!!!!!

[@aj35lightning]

So beautiful, would very much love to see an optimization video on this

[@TheArtofCodeIsCool]

Noted!

[@CraftBasti]

I'm just amazed at how your brain translates the desired change to math you need to apply. Incredible

[@jeffcummings3842]

Dude, your tutorials are awesome, you are a natural teacher! I've watched two so far, and they really give me a great sense of how the shader works! I mean, on another level.... thanks so much for sharing!

[@CompositeNation]

2 days ago I was looking for something like this, and then you came with this. You are the Messiah!!

[@SgtOkiDoki]

In case if anyone wonders where 1.77 comes from = aspect ratio -> 800(Width) / 450(Height) -> 1.77777777777... Nice tutorial one more time

[@milanstevic8424]

1.77 is also known as 16:9, which is a typical aspect ratio on contemporary screens. there is also 16:10, which is the same as -- who would've guessed -- 1.6. the old 4:3 ratio, such as 800x600 or 1024x768 is 1.33.

[@DivinityIsPurity]

I bet he coded the infinite timeless quantum DMT realm, either in the past or the future from now.

[@rlf1989]

I love this channel!

[@mariandev]

Awesome video! Keep up the good work.

[@2211-f5r]

Really enjoy what you're doing. I hope one day all your efforts will be rewarded.

[@randomcuriosities6205]

thiis is pretty cool, thanks for the work you put on, I would love to see a candle flame tutorial

[@TheArtofCodeIsCool]

Noted!

[@yamski5381]

you are the coolest man ive ever seen.

[@Veptis]

Never wrote a shader myself. But it's a really great explanation go watch it grow from nearly nothing. I think I came across some of your shaders on Shadertoy as I am currently trying to build a language model on all shadertoy shaders, which might not be enough to generate shader codes from nothing.

[@TheArtofCodeIsCool]

You mean you are trying to build an AI that can build shaders? That would be very cool.

[@Veptis]

@@TheArtofCodeIsCool In the longshot, yes. However I do not expect any good results. My first task is to do MLM. Masked language modelling. Where the model will predict a single masked token of a longer string of input tokens. If that works out alright, you can turn it into a language model that predicts the next token and feeds that back into itself. Since shaders have a very strickt syntax, I hope to get some good results for being syntactically sound - but I do expect go end up with a lot of shaders that don't output anything interesting. I will work on this during March and probably have it done by the beginning of April. There will be some results - but I don't expect there to me anything great.

[@TheArtofCodeIsCool]

@@Veptis Well I wish you good luck and keep me in the loop if you find something interesting.

[@geoffpedder]

nice technique for the random colours

[@realcygnus]

Priceless !

[@williswei]

Great tutorial! I have a question, what will happen when length(uv) get 0.? it still can be divided?

[@milanstevic8424]

I think the specification is undefined, and that implementations most typically give either 0 (edit: I meant to say infinity) or NaN (not a number) value. I'm a C# programmer and not an expert with shader languages, but if I'm not mistaken, that's still a good question. a good coder should be wary of what happens exactly, because the result could differ between devices or compiling environments.

[@milanstevic8424]

btw, before you ask, an infinity passed to a color is most likely interpreted as full saturation. you can see that the color values are always clipped to fit the range. however, I've seen examples where iPad would completely omit such a value from rendering (yielding black).

[@TheArtofCodeIsCool]

That's a great question. As Milan mentioned, it will display as white so it'll be fine. Inside this shader effect I didn't bother handling a divide by zero, but in any more serious application, you gotta handle that.

[@williswei]

@@TheArtofCodeIsCool Thanks for answering. So it will not be a problem in any shader language? Can I understand it as: Shader will deal with the problem of dividing by zero?

[@TheArtofCodeIsCool]

@@williswei if you want to use that value as an input to subsequent lines of code then you need to handle it for sure. If the output is going directly to the screen, I haven't noticed any issues.

[@McFreezer85]

Beautiful!! Question: constants vs define, which one is more performant? In my understanding "define" is a code placeholder that evaluates the given value at runtime. Constants would just point to a value kept in memory. What is your opinion to what to use when? I know you like to "define" your constant values or use it to shorten terms as "smoothstep". Maybe constants would be more efficiant for shader parameters in shadertoy, or am i mistaken?

[@TheArtofCodeIsCool]

Hmm never thought about it. Defines perform a search&replace at compile time, in practical terms, I don't think they'll be different performance wise.

[@McFreezer85]

@@TheArtofCodeIsCool OK, so i think it depends on the usage. For example if i would use a macrofied value in a loop, the memory is allocated in each iteration. A constant would be better in this instance. Will shaders be compilabled or interpreted?

[@TheArtofCodeIsCool]

@@McFreezer85 For things like that I always assume the compiler knows its a constant and will optimize for that. But yeah, for values like MAX_STEPS etc in ray marching i suppose a const int would be cleaner.

[@McFreezer85]

@@TheArtofCodeIsCool Thank you for your opinion :-) Have a good day, sir!

[@odomobo]

Defines work like this. If you write the following: #define PI 3.14 x = sin(PI); Then the compiler sees this: x = sin(3.14); You even can have bizarre cases like this: #define FOO 1+2 x = 2*FOO; So the compiler sees: x = 2*1+2; Which is probably not what we wanted at all. Defines have 0 overhead vs using a literal value, but you can run into the above issue, and similarly the compiler will sometimes give you confusing error messages. Consts almost never have an overhead over using a literal (with a good compiler), and they can't cause the bug I showed above.

[@nivbehar]

great! as always

[@martinfinch5011]

awesome

[@mourirsilfaut6769]

Awesome channel

[@maurizioorlando97531]

Thank you for this wonderful tutorial! I have a question. How can i trigger one firework each time by clicking the mouse? i know that the uniform mouse is not declared in the shader but I am just wondering which could be the best espression to trigger this in the shader.

[@brediger1]

WTF this channel is a mine gold!!!

[@fanourismoraitis7464]

Great tutorials!!!! I have a question and may be anyone of you guys and/or gals can help me:) if i have undestood corectly a shader program is running for every single picrure in the screen and the gl_FragColor is like a "draw" function for a single specific pixel each time so I dont get the part with that the col+=brightness/d; which is inside the for loop and cumulates values and then outside of the for loop we just put it in gl_FragColor=vec4(col,1.); I mean shouldn't be the gl_FragColor inside the for loop? :( I am confused :( may I have misandertood something fundamental here :( So my problem start from 12:38 minute . Thanks in advance

[@TheArtofCodeIsCool]

A shader is a program that gets run for every pixel. The for loop just accumulates the contribution from each light that the current pixel receives.

[@fanourismoraitis7464]

@@TheArtofCodeIsCool ok thanks!!Not quite get it but i will run through again the tutorial.You are awsome btw!!!

[@srikarb54]

optimization guide please

[@clearwavepro100]

awesome!

[@黄胖虎-m9c]

Awesome！

[@sksahil4374]

Great.. tutorial

[@dmitrykolesnikovich]

Is there any strict definition to differentiate noise from hash, random and fbm? Sorry for stupid question

[@milanstevic8424]

in shader context, noise should be a continuous wave function, and fbm is one possible implementation of it (by layering multiple finely parametrized sinewaves). strictly speaking, a hash is just a mapping function that maps a key to a value, in a consistent one to one correlation. implementation-wise, it can be whatever, depending on its use. in practice, it'll always generate an overlap (or collision) given a large enough set of keys, until it starts hitting the so-called pigeonhole principle, where a collision is basically guaranteed. if a set is smaller than its value space, then it's highly sensitive on the exact algorithm, but we typically want its values to be representative of the keys. all of this is random, that's a catch-all term when you want to obtain unpredictable patterns, not a particular technique in itself. there are many kinds of random. noise, fbm, hash, whathaveyou, the whole point of these techniques is to get something as random as possible, however not every implementation needs to be continuous, or wave-based. in cryptography and general CPU programming, hashes are bitwise and not floating point, for example. also many pRNGs are bitwise (and quite similar to hash functions), with their implementations varying greatly between performance and the value-space distribution. serious hash functions that are intended for finances, data security/redundancy, or, I don't know, launching rockets, go for the latter property, while games normally tend to be on the performance side of things, preferring simpler and faster CPU operations over theory and mathematical robustness. needless to say, with shaders speed is of the essence, so every "hash" you see isn't actually that well distributed (or as random), it's just 'good enough'. definitely not a true hash function, but more of a convenient name for the general intention.

[@dmitrykolesnikovich]

​@@milanstevic8424 For function to be labeled as "wave function" is it required to use sin/cos in its algorithm or to produce sin/cos-like output? Why someone needs non-continuous function as random function, is it practical thing or just academic definition of randomness?

[@milanstevic8424]

@@dmitrykolesnikovich well, for your first question, I'd guess there has to be some sort of trigonometry involved, because it captures the mathematical essence of all waves, by definition. but there are other continuous functions out there as well. for your other question, yes, it is both practical, but also because randomness isn't bound to continuities, this is just important with graphical noises because reduces artifacts, and well, resembles nature more closely. check out LCG, for example, it is by definition a discontinuous piecewise linear equation pRNG en.wikipedia.org/wiki/Linear_congruential_generator it has a simple integer-based algorithm, yet many wildly different implementations, some of which are crazy fast and decently robust for generating seeded, well-distributed sequences without exhibiting biases, and it is widely used in game development. the simplest form, as shown on wikipedia, is somewhat naive and not to be used seriously, but it does work. rolling a die is, for example, a discontinuous random sequence. disturbed water surface is continuous. analog TV noise or so-called auditory white noise is also continuous, even though it might appear harsh or discontinuous, this is only because it is perceived through finite apertures.

[@milanstevic8424]

@@dmitrykolesnikovich in a nutshell, a general purpose pseudorandom number generator is capable of producing arbitrary sequences of seemingly disconnected (unpredictable) values, starting from any one particular value (also known as seed). thus, prngs are effectively more useful as discontinuous, you don't want any value to affect any other nearby value, however in graphics this is not useful at all, because you want to be able to interpolate between the random values for free, essentially. most of the graphic noises are thus based on fractals or waves, or both. for example en.wikipedia.org/wiki/Simplex_noise

[@EliederSousa]

I know it's off topic, but I wonder if Riemann Zeta Function could make a better pseudo-random number generator.

[@leftofzen]

Why do you need a polar hash function, just normalise the vec2 you return from the regular hash function.

[@milanstevic8424]

that doesn't work 100%. you still get a visible rectangular bias toward the corners (because this is where you trim the most of the area that is potentially sampled). the most pure solution is to do polar. I'm also not sure about the details of how much normalization is optimized on the GPU, because the math behind it is actually much more expensive than you think. for random numbers x, y: polar is just x = d * cos(x), y = d * sin(y) while normalization is m = sqrt(x * x + y * y) x /= m y /= m normalization would probably be an equally-performing solution in 3D (as opposed to 2 angles, aka spherical coords), though there is still a corner bias I mentioned before. normally things like finding a random point on a sphere do actually compute spherical coordinates to eliminate bias (in Unity for example). spherical would be x = d * sin(theta) * cos(phi) y = d * sin(theta) * sin(phi) z = d * cos(theta) it can be immensely fast with a look up table in place of doing actual trig, and still visually better than normalizing. now, of course, it depends on how many particles you intend to have.

[@AndyGreen336]

I thought the same, but appreciated seeing how you'd do it a different way

[@TheArtofCodeIsCool]

Good question. If you normalize it all lights would fall on a unit circle, you would still have to multiply by another random value to get the scattered. Also, as Milan mentions, the distribution would be off.

[@icaroamorim3123]

This would look good on a Quad particle system.

[@TheArtofCodeIsCool]

Yes! If you ever try it, be sure to share! ;)

[@timpong2393]

crazy!

[@antoinedevldn]

Oh yeah!

[@icaroamorim3123]

instant like

[@GEOMATH]

what program is?

[@TheArtofCodeIsCool]

This is made in a website called ShaderToy and the language is GLSL.

[@GEOMATH]

@@TheArtofCodeIsCool thanks

[@russelp9666]

Thanksuthankuthanku!

[@kingdavidjapan]

The final code including Jochem's fix, if someone is interested: #define NUM_EXPLOSIONS 5. #define NUM_PARTICLES 75. vec2 Hash12(float t) { float x = fract(sin(t*674.3)*453.2); float y = fract(sin((t+x)*714.3)*263.2); return vec2(x, y); } vec2 Hash12_Polar(float t) { float a = fract(sin(t*674.3)*453.2)*6.2832; float d = fract(sin((t+a)*714.3)*263.2); return vec2(sin(a), cos(a))*d; } float Explosion(vec2 uv, float t) { float sparks = 0.; for(float i=0.; i

[@niblet8308]

this is broken