Creative Coding with Canvas & WebGL

Shaders Example: Additional Thoughts

Creative Coding with Canvas & WebGL

Check out a free preview of the full Creative Coding with Canvas & WebGL course

The "Shaders Example: Additional Thoughts" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:

Matt introduces other aspects that can be augmented in the example that may yield interesting results, including gradient.


Transcript from the "Shaders Example: Additional Thoughts" Lesson

>> Mathew DesLauriers: And so now we have this circle. And we're getting there. We can try a few other things, we can start to add random numbers here and there. You can start to maybe just randomly start to throw things around. So maybe instead of color A, we do color A assign + Vec three or something like that.

Sometimes it will be black or white. And this is where we can just start to have some fun with the values. Another this is maybe instead of using x we can use y, or we could even use something like vuv.x plus vuv.y. And all of a sudden we're gonna start to get this gradient that's no longer just horizontal or vertical.

If you really want to get advanced with this you can do one direction. So vuv.y plus another direction x multiplied by sine of time. And that's gonna mean that instead of doing a vertical or horizontal gradient or instead of doing a diagonal gradient, this gradient's gonna be sort of moving and rotating and shifting and turning around in a sort of weird way.

And this is sort of one of the things to keep in mind when we're dealing with shaders and when we're dealing with generative code or just any type of creative coding. Is you have to really open to just tweaking values and sometimes hitting errors, and if there's an error that's okay, it'll just pop up in your browser and your console.

Usually the line number will be pointed out to you. But yeah, just be really open to tweaking numbers and playing with these things. Sometimes instead of sine you can use cos, this is another thing to just play with. This is kind of of the beauty of working with this code is even if you aren't a math expert, you can still use these functions just to create different interesting sort of results.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now