In this tutorial, we are going to look at how we can use WebGL and Javascript to create an art generator effect similar to that of Van Gogh’s starry night.
Join the DZone community and get the full member experience. Modern web design often makes use of large introduction images. These large images frame a product or service at the top of the website. This got me thinking of how we could use WebGL to make an art effect similar to The Starry Night by Van Gogh. What I created was something similar, which nicely transforms into liquid if you want it to. Three.js is a Javascript library that allows you to create WebGL 3d objects with ease. To accomplish our effect we will be following a few key steps: So with that in mind, let’s take a look at a snippet of our Javascript, which covers the first 3 points. I haven’t included all the details, but here are some of the key points: If you are unfamiliar with what shaders are, they essentially allow you to manipulate the color of geometry and the position of a geometry.
