{"id":18304,"date":"2017-01-23T20:55:25","date_gmt":"2017-01-24T01:55:25","guid":{"rendered":"http:\/\/blog.kenperlin.com\/?p=18304"},"modified":"2017-01-24T04:22:05","modified_gmt":"2017-01-24T09:22:05","slug":"making-a-bubble","status":"publish","type":"post","link":"http:\/\/blog.kenperlin.com\/?p=18304","title":{"rendered":"Making a bubble"},"content":{"rendered":"

Procedural shading languages are very powerful. With a relatively small program you can create extremely beautiful and subtle animated textures.<\/p>\n

But that very power comes with a price: Because the resulting code is so compact, it can be difficult for somebody else to understand what you have written.<\/p>\n

I’m thinking it would be useful to “unpack” such programs, so that people can understand how they really work. For example, the bubble below can be described in just a few dozen lines of shader code (plus another few dozen lines for my standard noise and turbulence functions).<\/p>\n

If you click on the image, you can see the bubble as a real time procedural animation, together with the editable shader program that makes it work. That program is very short, but it’s also really difficult to understand.<\/p>\n

I’m thinking that I might try to create a step-by-step version of the process of creation. As you click through the steps, the shader program, and the corresponding result, will progress from very simple (just a few lines of code at first) to the final result.<\/p>\n

At each step, the result will get a little more interesting. And at each step I can annotate exactly what has changed in the program to cause the visual improvement from the previous step.<\/p>\n

Hopefully, if I design these steps carefully, every piece of the shader program will end up making sense. Then maybe some people will start to create their own animated bubbles!<\/p>\n

<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Procedural shading languages are very powerful. With a relatively small program you can create extremely beautiful and subtle animated textures. But that very power comes with a price: Because the resulting code is so compact, it can be difficult for somebody else to understand what you have written. I’m thinking it would be useful to … Continue reading “Making a bubble”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts\/18304"}],"collection":[{"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18304"}],"version-history":[{"count":3,"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts\/18304\/revisions"}],"predecessor-version":[{"id":18308,"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts\/18304\/revisions\/18308"}],"wp:attachment":[{"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18304"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}