Awesome Creative Coding

A curated list of beginner-friendly tools, resources and shiny things to get you started with creative coding.

_{This is primarly material and resources for beginners, if you're a rock-start check out: Graphics resources by @mattdesl and Awesome OpenGL by @eug.}

Work in progess, needs better organization

Table of Contents

[Coming]

Books

• Generative Art: A Practical Guide - A practical guide using Processing.
• Generative Design - Visualize, Program, and Create with Processing.
• The Nature of Code - Simulating natrual systems with Processing.
• The Book of Shaders - Step-by-step guide through the abstract and complex universe of fragment shaders.
• Programming Design Systems - A practical introduction to the new foundations of graphic design.
• Pixel Shaders - An Interactive Introduction to Graphics Programming.
• Learning Modern 3D Graphics Programming - A series of tutorials on using OpenGL to do graphical rendering.
• Scratchapixel 2.0 - Learn Computer Graphics From Scratch.
• Programming Interactivity - A Designer's Guide to Processing, Arduino, and openFrameworks.
• Algorithms for Visual Design Using the Processing Language - Experiment with design problems to create 3D animations, GUIs, and more.
• Data-driven Graphic Design - Creative Coding for Visual Communication.
• Foundation HTML5 Animation with JavaScript - Everything you need to know to create animation using the HTML5 canvas.
• Playing with chaos - Programming Fractals and Strange Attractors in JavaScript.
• Ray Tracing in One Weekend - Mini book about Ray Tracing.

Subreddits

• r/creativecoding - Sharing and discussing the use of computer programming as a creative discipline.
• r/rraytraycing - Subreddit on raytracing.
• r/opengl - News and discussion about OpenGL on all platforms.
• r/graphicsprogramming - Subreddit on graphics programming.
• r/processing - Subreddit on Processing.
• r/shaders - Subreddit on shaders.
• r/proceduralgeneration - Subreddit on procedural generation.

Communities

• realtimevfx.com - Real Time VFX Community.
• creative-dev - Creative Developement Slack.
• The Creative Coding Podcast - Iain and Seb discuss the ins and outs of creative coding.

Ecosystems / Frameworks

Desktop

• Processing- Computer programming language and IDE for visual arts.
• Cinder - Open source library for professional-quality creative coding in C++.
• openFrameworks - Open source C++ toolkit for creative coding.
• vvvv - Hybrid visual/textual live-programming environment for easy prototyping and development.
• NodeBox - Cross-platform, node-based GUI for efficient data visualizations and generative design.
• Structure Synth - Cross-platform application for generating 3D structures by specifying a design grammar.

Web

• three.js - JavaScript 3D library.
• regl - Functional WebGL.
• Stackgl - Open software ecosystem for WebGL, built on top of browserify and npm.
• Paper.js - The swiss army knife of vector graphics scripting.
• Pixi.js - HTML 5 2D rendering engine that uses webGL with canvas fallback.
• p5.js - JavaScript library that starts with the original goal of Processing.
• Fabric.js - Javascript canvas library, SVG-to-canvas parser.
• Sketch.js - Minimal JavaScript creative coding framework.
• Two.js - Two-dimensional drawing api geared towards modern web browsers.

Learning material

• Coding Rainbow - Daniel Shiffman makes videos about creative coding.
• Shaders - Shader tutorial in the context of lwjgl-basics.
• Create 3D Graphics in JS Using WebGL - Get started creating content with WebGL without any frameworks.
• Learn HTML5 Graphics and Animation - Introduction to the canvas 2D drawing API.
• WebGL 2 Fundamentals - WebGL2 from the ground up. No magic.
• Shaders: A primer - A primer on shaders.
• Shaders: Second stage - The second part to the previous.
• WebGL Lessons — Fragment Shaders - A brief introduction to fragment shaders.
• WebGL Lessons — ThreeJS Shaders - Using custom vertex and fragment shaders in ThreeJS.
• Ray Marching and Signed Distance Functions - Introduction to ray tracing.
• Introduction to Ray Tracing - A simple method for creating 3D images.
• GLSL lighting walkthrough - Phong shading tutorial with glslify.
• Interactive 3D Graphics - Udacity course that teach you the principles of 3D computer graphics.
• Interactive Computer Graphics - Computer graphics course from Coursera.
• MFGD - Fragment Shaders - YouTube playlist about fragment shaders.

Interactive tutorials

• Shader-school - A workshopper for GLSL shaders and graphics programming.
• Webgl-workshop - The sequel to shader-school: Learn the WebGL API.
• Fragment-oundry - Interactive fragment shader tutorial.
• SDF Tutorial 1: box & balloon - Shadertoy tutorial on raytracing.
• HOWTO: Ray Marching - Shadertoy tutorial on Ray Marching.
• Raymarch Tutorial2 - Shadertoy raymarch tutorial.
• GLSL 2D Tutorials - Shadertoy GLSL 2D Tutorial.

Articles

• Shepherding random numbers - Tiny guide to shepherding random numbers.
• FBO particles - Article about FBO/GPGPU particles by @nicoptere.
• Ray marching (with THREE.js) - Article about ray marching with three.js by @nicoptere.
• Visualizing Algorithms - A look at the use of visualization to understand, explain and debug algorithms.
• Custom shaders with Three.JS - Introduction to custom shaders, uniforms, textures and lighting in three.js.
• Modern OpenGL Series - Good introduction to some of the OpenGL terms.
• An intro to modern OpenGL - First part of an introduction to modern OpenGL.
• Experimenting with Three.js shaders and the ShaderMaterial - Introduction to custom mesh shader materials.

Math

• Math as code - A cheat-sheet for mathematical notation in code form.
• Coding Math - Teaches you the math you need to understand as a programmer.
• Math snippets - Math snippets with graphic programming in mind.
• Formul Animations - The principles of painting with maths.

Inspiration

• Shadertoy - Build and share shaders with the world and get inspired.
• GLSLbin - Fragment shader sandbox with support for glslify.
• GLSL Sandbox - Online shader editor and gallery.
• CodePen - Show case of advanced techniques with editable source code.
• OpenProcessing - Algorithmic Designs Created with Processing, p5js and processingjs.
• Dwitter - Social network for short JavaScript demos.
• Chrome Experiments - Showcase of web experiments written by the creative coding community.
• Codedoodl.es - A showcase of curated creative coding sketches.
• For your Processing - Projects and tutorials about Processing.
• 31 days of Canvas tutorials - Collection of canvas tutorials by Seb Lee-Delisle.
• Art From Code - Code sketches by Keith Peters.
• Generator.x - Flickr group about generative strategies in art & design.
• Generative Art - Flickr group about generative art.

Machine Learning / A.I.

• ml4a - Machine learning for artists.
• Keras.js - Run Keras models (tensorflow backend) in the browser, with GPU support.
• Tesseract.js - Pure Javascript Multilingual OCR.
• Google ML - Cloud machine learning by Google.
• TensorFlow - Open source software library for machine intelligence.
• ConvNetJS - Deep Learning in your browser.
• Wekinator - Allows anyone to use machine learning.

Shader References & Articles

• The Book of Shaders Glossary - Shader glossary by theme.
• GLSL - OpenGL ES shading language reference.
• gltut - 3D programming glossary.
• Smooth minimum - Article about the smooth based primitive union.
• Modeling with distance functions - Collection of distance functions in one centralized place.

Tools

• F3 - Powerful 3D design app that enables you to live code 3D form.
• Fragment - Mac app to live code GLSL graphics.
• Chrome Shader Editor - Live editing shaders in the browser.
• ShaderTool - Modern shader IDE for programmers and FX artists.
• Shadershop - Interface for programming GPU shaders.
• hg_sdf - A glsl library for building signed distance functions.

Talks / Presentations / Videos

• Intro to WebGL - Intro to WebGL with three.js.
• Inigo Quilez Live - Collection of live coding videos by Íñigo Quílez.
• There is also canvas - Bruno Imbrizi go through the use of canvas for creative coding at WebExpo 2016. Interactive slides here.
• Draw. Move. Fail. Repeat. - Slides by @williamapan from his Creative developer workshop at Gobelins.

Websites / Blogs

• abandonedart.org - Generative art ideas by Matt Pearson.
• iquilezles.org - Home of Íñigo Quílez.
• bit-101.com - Blog by Keith Peters.
• IBreakDownShaders - Explore the math behind shaders.

Related:

• Awesome opengl - A curated list of awesome OpenGL libraries, debuggers and resources.
• Graphics resources - A list of graphic programming resources.
• Awesome canvas - A curated list of awesome HTML5 canvas with examples, related articles and posts.
• Awesome audio visualization - A curated list about Audio Visualization.
• Awesome computer vision - A curated list of awesome computer vision resources.
• Magic Tools - A list of game development resources to make magic happen.
• Hanecci’s link collection - Link collection of ray marching on the GPU.

License

To the extent possible under law, Terkel Gjervig has waived all copyright and related or neighboring rights to this work.