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

Enjoy and learn through these code explorations

  • Share on Google
  • Share on Stumbleupon

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 Codepen.io. 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.

 

  • Fractal Lab. Interactive WebGL fractal explorer

    Fractal Lab. Interactive WebGL fractal explorer


  • Simple Audio Visualisation

    Simple Audio Visualisation


  • Bacteria

    Bacteria


  • Tear-able Cloth

    Tear-able Cloth


  • 1,048,576 Particles

    1,048,576 Particles


  • Plasmatic Isosurface

    Plasmatic Isosurface

    XX

  • 30,000 Particles

    30,000 Particles

    XX

  • CSS Fine Art

    CSS Fine Art


  • DFCO logo

    DFCO logo


  • 404 No signal

    404 No signal


  • Fluid simulation with Turing patterns

    Fluid simulation with Turing patterns


  • Buffer Geometry

    Buffer Geometry


  • Flat Surface Shader

    Flat Surface Shader


  • Pixi.js WebGL Filters

    Pixi.js WebGL Filters


  • Fizzy Cam

    Fizzy Cam


  • Shadertoy: Monster

    Shadertoy: Monster


  • Shadertoy: Jelly thing

    Shadertoy: Jelly thing


  • Optical Flow Effects

    Optical Flow Effects


  • "Obsidian" by xplsv

    "Obsidian" by xplsv


Awwwards

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

awwwards.com