Nov 7, 2013

Creative Code: CSS, JavaScript, WebGL and Three.js Experiments

Creative Code: CSS, JavaScript, WebGL and Three.js Experiments

What is a Creative Coder? A Creative Coder can be described as an explosive combination of designer-programmer whose main focus is on animation, interactivity, and visual effects. Creative Coders have a strong affinity to generative art and a strong understanding about the application of mathematical concepts and algorithms like Lorenz Attractors, recursive patterns, particle systems, fluid simulations, perlin noise, cell division, fractals, physics, trigonometry, Brownian motion, 3D shaders, Bézier curves… Not to mention a strong grasp of infinite techniques, equations, and algorithms which weren’t even originally designed to be applied to visual art.

In this field, there are many languages, frameworks, and IDEs like AS3, Processing or Open Frameworks, but today we are going to talk about experiments carried out using HTML5, CSS, JavaScript, WebGL and libraries like Three.js.

For a few years now, all these interesting mathematical applications have been adapting to JavaScript; we imaging some of you will have already implemented them in some script, game, app, visual effect or other. The team here at Awwwards recommends work by Keith Peters who has had a great career so far. We would also suggest you take a look at Seb Lee-Delisle’s work and his Creative JS Training workshops. MrDoob should definitely be on the radar of those who wish to call themselves Creative Coders.  With this material you can understand and apply physics concepts like acceleration, velocity, collision detection, conservation of momentum, forward and inverse kinematics, boundaries and friction, trigonometry for animation, etc.

Interesting experiments using HTML5, CSS, JavaScript and WebGL

Today we have brought together a selection of interesting experiments such as CSS generated images known as "Pure CSS Images", 3D environments, camera effects, particles and forces, fractals, etc. This is just the tip of the iceberg. There are many, many more experiments to be found on places like the Three.js official website, Chrome experiments, and What’s more, each of the sites mentioned use code which you yourself can consult and manipulate to gain a better understanding of these peculiar techniques.