My top 8 gifs in 2017

For those who don’t know me, I “code”many gifs per week for fun. Most of my gifs are made using glsl shaders, which are simple programs that run in a GPU for real time rendering. Sometimes, my gifs start from raw math made on actual paper. Most of the time, I just go ahead and type code to experiment with different parameters and algorithms. As a retrospective, I tried to find 8 gifs that summarize the coolest things I did in 2017.

8- Mandelbrot lake

In August, I decided to render the Mandelbrot set using reflection to make it look like a weird landscape with a lake. I made a high quality video of this.

7- Waves with post processing

In July, I was experimenting with feedback loops and multi-pass rendering. I made some interesting gifs, including this one:

sin wave with special effects and dithering

6- Roads

Here, I was trying to find a way to efficiently render roads (looking from the top). All the tiny cars are made out of sin waves. This allows repeating cars without additional logic for each one of them. To bend the roads, I modified the coordinates in a way that is equivalent to bending the screen (distortion).

5 -Sunset

Actually, this one is not a gif, it’s a png. Unfortunately, I could not encode it properly asa gif while keeping all the gradients and details. With this one, I created something “realistic” with only a few lines of code. I learned that exponents can be used to create nice glows.

There is also a video available on the original post.

4- Rocket (game)

This gif is not really hot. The fun part is that I created a small open source game with this rocket shader.

3- Raymarched planet

In July 2017, I experimented a lot with a technique called “Raymarching”. This technique allows the iterative rendering of 3D scenes on a 2D plane using distance fields instead of conventional modelling. You can read more about raymarching on iq’s website.

I used diffuse and specular lighting to create this tiny planet. As you can see, the water has more specular lighting (bright spots). I had to use a lot of dithering to reduce the final gif size to 128kb, which is why you can see a checkerboard pattern.

2- Raymarched city

I really like to create cities using code. For this gif, I used raymarching and simple procedural texturing methods (windows & street). The height of the buildings is pseudo randomly generated using sin waves.

1- Raymarched clementines

With raymarching, it is very easy to repeat objects and distort the environment in which they are rendered.

I did not receive any money from a juice company for doing this.

Conclusion

This year, I learned a lot of new techniques and tools. I hope I’ll find new ways to use my GLSL skills in 2018. I will probably be making more videos and small games. If you want to see more, you can follow me on tumblr. Many of my fragment shaders can be found on gist.github.com.

Most of these gifs were rendered using shadergif, which is another project I worked on this year. If you want to start making gifs using GLSL, this is the way to go. You can also start with shadertoy. You’ll see that coding shaders feels epic (Try not to get addicted to GLSL though).