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.

 

  • 404 No signal


    404 No signal

  • “Obsidian” by xplsv


    "Obsidian" by xplsv

  • Optical Flow Effects


    Optical Flow Effects

  • Shadertoy: Jelly thing


    Shadertoy: Jelly thing

  • Shadertoy: Monster


    Shadertoy: Monster

  • Fizzy Cam


    Fizzy Cam

  • Pixi.js WebGL Filters


    Pixi.js WebGL Filters

  • Flat Surface Shader


    Flat Surface Shader

  • Buffer Geometry


    Buffer Geometry

  • Fluid simulation with Turing patterns


    Fluid simulation with Turing patterns

  • Fractal Lab. Interactive WebGL fractal explorer


    Fractal Lab. Interactive WebGL fractal explorer

  • DFCO logo


    DFCO logo

  • CSS Fine Art


    CSS Fine Art

  • 30,000 Particles


    30,000 Particles

    XX

  • Plasmatic Isosurface


    Plasmatic Isosurface

    XX

  • 1,048,576 Particles


    1,048,576 Particles

  • Tear-able Cloth


    Tear-able Cloth

  • Bacteria


    Bacteria

  • Simple Audio Visualisation


    Simple Audio Visualisation



Source link