Creative Coding

Practical guide using Processing.

Visualize, Program, and Create with Processing.

Simulating natural systems with Processing.

Practical introduction to the new foundations of graphic design.

Series of tutorials on using OpenGL to do graphical rendering.

Designer's Guide to Processing, Arduino, and openFrameworks.

openFrameworks beginner Guide for programmer, visual artist, or designer.

Advanced in depth guide to openFrameworks.

Experiment with design problems to create 3D animations, GUIs, and more.

Everything you need to know to create animation using the HTML5 canvas.

Programming Fractals and Strange Attractors in JavaScript.

Mini book about Ray Tracing.

Guides you to explore the Processing environment using practical and useful recipes.

Creative Coding for Visual Communication.

Learn how to use modern techniques to generate synthetic three-dimensional images in a fraction of a second.

Introduction to shader programming in general, but focusing on the GLSL shading language.

Practical guide to starting 3d programming with OpenGL.

Teaches JavaScript programmers how to incorporate real physics into their HTML5 games, animations, and simulations.

Book teaches you to solve mathematical problems in code.

Book in french, which covers OpenGL, OpenGL ES and WebGL.

Explore the role of deep learning in music generation and assisted music composition.

Step-by-step guide through the abstract and complex universe of fragment shaders.

WebGL from the ground up. No magic.

WebGL2 from the ground up. No magic.

Extensive tutorial resource for learning Modern OpenGL.

Learn Computer Graphics From Scratch.

Community-written book/guide on openFrameworks.

Collection of modern OpenGL tutorials by Etay Meiri.

Site dedicated to tutorials for OpenGL 3.3 and later.

Guide that teach you the basics of using OpenGL.

Interactive Introduction to Graphics Programming.

Free OpenGL programming tutorial in online book format.

Book about 3D computational graphics by Morgan McGuire.

Notes about generating various organic patterns, with examples and Python code, by Anders Hoff.

A raytracing and rasterization textbook that teaches you how OpenGL and DirectX works.

A free book for when you really need to know how to do Bézier things.

Step-by-step guide to real-time shading techniques.

Step-by-step guide to WebGL.

An authorial set of fundamental Python recipes on Creative Coding and Computer Art, by Diego Inácio.

Learn WebGL and 3D algorithmic in a progressive and interactive way.

Get started creating content with WebGL without any frameworks.

Introduction to the canvas 2D drawing API.

Udacity course that teach you the principles of 3D computer graphics.

Computer graphics course from Coursera.

Selection of Kadenze courses covering p5.js, TensorFlow, Max/Jitter, and ChucK.

Coursera course on creative coding with processing.

Learn how to create gorgeous interactive graphics.

Use computer programming as a creative discipline to generate sounds, images, animations and more.

Use JavaScript and the ProcessingJS library to create drawings and animations.

Combine JS, ProcessingJS, and mathematical concepts to simulate nature in your programs

Learn how to read, map, and illustrate data with Processing.

Join information designer Nicholas Felton in the world of Processing.

Join Nicholas Felton for a smart, comprehensive, and inspiring intro to data visualization.

, 2, 3 - Learn generative art and Processing with art with Joshua Davis.

Workshop by Matt DesLauriers. that teaches you about generative art, interactive animations, 3D graphics, and shaders.

Workshop by Matt DesLauriers that go deeper into graphics programming, math and shaders.

This course by Bruno Simon will teach you the secrets to create the coolest WebGL websites with Three.js whether you are a beginner or an advanced developer.

Learn all the theory and the math behind 3D graphics while creating a software renderer from scratch using the C programming language

[Cross-platform] - Computer programming language and IDE for visual arts.

[Cross-platform] - A library that integrates Processing into the Python 3 ecosystem.

[Cross-platform] - Open source library for professional-quality creative coding in C++.

[Cross-platform] - Open source C++ toolkit for creative coding.

[Cross-platform] - Open source data-driven real-time control & visualization platform suited for professional installations in C++, incl. Vulkan renderer.

[iOS] - Open-source creative coding framework for iOS.

[Mac, Win] - Game engine, but useful for creative coding and installations.

[Cross-platform] - Open source game engine, that can also be used for all sorts of things.

[Cross-platform] - Open source, realtime collaborative WebGL engine.

[Cross-platform] - GLSL library for building signed distance functions.

[Cross-platform] - Open-source creative coding framework for the Rust language.

[Cross-platform] - Open source collection of computational design tools for JavaScript, TypeScript, Clojure and ClojureScript languages.

[iOS, Mac] - Open source, live graphics, Swift framework, powered by Metal.

[Cross-platform] - Open source library for creative coding written in Kotlin.

[Cross-platform] - HTML5 framework for building games, uses both a Canvas and WebGL renderer.

[Cross-platform] - HTML5 framework for making generative artwork in JavaScript and the browser.

[iOS, macOS] - Open source, live graphics, async / await, Swift package, powered by Metal.

[Cross-platform] - Granular and multi-language (GLSL, HLSL, WGSL, MSL and CUDA) shader library designed for performance and flexibility.

[Cross-platform] - A web development environment for creative coding.

[Win] - Hybrid visual/textual live-programming environment for easy prototyping and development.

[Mac, Win] - Cross-platform, node-based GUI for efficient data visualizations and generative design.

[Mac, Win] - Visual development platform to create realtime projects.

[Mac] - Development tool for processing and rendering graphical data.

[Mac] - Live interactive-media programming environment.

[Mac, Win] - Visual programming language for media.

[Cross-platform] - Open source visual programming language for multimedia.

[Cross-platform] - Interactive, intermedia audio-visual sequencer.

[Win] - Open source tool for creating interactive 3d content and animations.

[Cross-platform] - Open source visual programming language and environment for microcontroller-based projects.

[Cross-platform] - Scene based media control software with integrated projection mapper.

[Cross-platform/Web] - Your model kit for creating beautiful interactive content. Currently in private beta, invites can be requested.

[Web] - Programs as graphs and graphs as compositional tools for creation

[Win] - Node-based authoring tool with a strong focus on real-time graphics. Currently in beta.

Realtime visual coding tool, easy to understand and aimed at beginners.

[iPhone, iPad, Mac] - Live graphics node editor, powered by AsyncGraphics.

Make pixel art style games and art on a 240*136 pixel screen.

[Multi-platform] - Platform for audio synthesis and algorithmic composition.

Strongly-timed, concurrent, and on-the-fly music programming language.

Domain specific language for live coding of pattern.

The live coding music synth for everyone.

A sound and music computing system.

Live coding environment to quickly create procedural sequencers.

A small procedural programming language for writing songs in browser.

An open source audio environment designed to explore new musical ideas from synthesis and instrument building to live-coding.

A MIDI producing environment for creating (live) music.

Graph-oriented live coding language and music/audio DSP library written in Rust.

JavaScript 3D library.

Functional WebGL.

Open software ecosystem for WebGL, built on top of browserify and npm.

The swiss army knife of vector graphics scripting.

HTML 5 2D rendering engine that uses webGL with canvas fallback.

JavaScript library that starts with the original goal of Processing.

JavaScript library for visualization and creative-coding.

JavaScript canvas library, SVG-to-canvas parser.

Parametric line drawing for SVG, CNC & laser cutters.

Programmatic 3D modeling in JavaScript.

Minimal JavaScript creative coding framework.

Two-dimensional drawing api geared towards modern web browsers.

A lightweight WebGL library.

A minimal WebGL 2 rendering library.

A WebGL tool set.

complete JavaScript framework for building 3D games with HTML 5 and WebGL.

A Tiny WebGL helper Library.

WebGL2 Components for Data Visualization.

A web component for drawing patterns with CSS.

JavaScript 3D library (WebGL).

A pseudo-3D engine for canvas & SVG.

Lightweight 3d physics engine for javascript

Direct port of the Bullet physics engine to JavaScript using Emscripten.

Motion design library with visual tools

[Mac] - Video mapping projections and Light mapping.

[Mac] - Realtime multimedia performance application.

[Mac] - Real time video mixing and compositing.

[Mac, Win] - Mixing of digital video and effects in a realtime.

[Mac] - VJ software designed for realtime HD video mixing and compositing with a modular user interface.

Realtime preview tool for projection mapping.

[Mac] - A software to create and perform interactive audiovisual shows.

[Win] - A real-time 2D/3D creation, compositing and video-mapping engine.

[Linux] - A live performance tool featuring simple non-linear editing and mixing from multiple sources (files, devices, streams...)

Build and share shaders with the world and get inspired.

A JavaScript library for creating interactive procedural 2D and 3D shaders.

Online shader editor and gallery.

Online shader editor.

Show case of advanced techniques with editable source code.

Interface for programming GPU shaders.

Online shader editor and gallery.

Online shader editor.

Simple WebGL Fragment Shader Editor.

Algorithmic Designs Created with Processing, p5js and processingjs.

Online web editor for P5.js.

Run-as-you-type tool for VJs, musicians, teachers, students, kids.

Minimalistic API and online showcase for generative code. (JavaScript)

Open source home for art made with code (WebGL1/2, JavaScript Canvas & P5.js).

p5.js live-coding environment.

Digital art platform for creative coders (Fragment Shader, JavaScript Canvas).

Learn programming by issuing instructions to a turtle.

The most minimalist creative coding environment is alive.

Run your tweet on an 8-bit computer emulator.

Live code-able video synth and coding environment.

Open source microcontroller kits for building digital devices and interactive objects.

Small single-board computers.

Open source JavaScript microcontroller you can program wirelessly.

Low-power open source single-board computers.

Turn everyday objects into touchpads and combine them with the internet.

Sensor device that supports hand and finger motions as input.

Simple, modern, and precise pen plotter.

Sensors, input devices and controllers for computers.

USB-based microcontroller development system.

AR projection mapping with built-in depth sensor.

[Cross-platform] - Application for generating 3D structures by specifying a design grammar.

[Mac] - Powerful 3D design app that enables you to live code 3D form.

[Mac]- App to live code GLSL graphics.

[Win] - Modern shader IDE for programmers and FX artists.

[Mac] - Allows applications to share frames with one another in realtime.

Real-time GPU shader editor, live-code performance tool and graphics prototyping sketchpad.

GLSL shaders for use in interactive applications.

Live-coding console tool that renders GLSL Shaders.

[Cross-platform] - Shoebot is a creative coding environment designed for making vector graphics and animations with Python.

[Mac] - Education oriented 2d graphics programming environment based on Python.

A collection of scripts for creative coding with Unity.

Scripting (JS) in InDesign for designers and artists in the spirit of Processing.

[Cross-platform] - A commandline tool to generate different scalable patterns as SVGs.

Daniel Shiffman makes videos about creative coding.

YouTube playlist about fragment shaders.

YouTube channel about shaders.

YouTube channel about shaders case studies.

YouTube series to learning openFrameworks

YouTube playlist about openFrameworks - not updated [2015].

YouTube playlist about Shaders, using Visual Studio Code.

YouTube playlist about the Kha framework, built in Haxe.

YouTube playlist about WebGL 2.0.

YouTube playlist about modern OpenGL.

YouTube playlist about vertex shaders.

YouTube playlist diving into three.js.

YouTube playlist teaching you how to make shaders, starting with zero knowledge using shadertoy.

Introduction to WebGL lighting with Greg Tatum.

Collection of live coding videos by Íñigo Quílez.

Bruno Imbrizi go through the use of canvas for creative coding at WebExpo 2016. Interactive slides here.

Beginners tutorial series about creating 3D games OpenG.

Talk on how tech-based artists do this financially.

How I Learnt to Stop Worrying and Love Linear Algebra.

Talk about WebGL, GPUs and Math by Steven Wittens.

Inspiring talk by Zach Lieberman.

FITC talk by Matt DesLauriers about his passion for generative art.

Part 1 of an introduction to shaders using threejs.

Introduction to three.js from a creative coder perspective.

Shader tutorial in the context of lwjgl-basics.

A primer on shaders.

The second part to the previous.

A brief introduction to fragment shaders.

Using custom vertex and fragment shaders in ThreeJS.

example of post-processing effects in ThreeJS.

Introduction to ray tracing.

A simple method for creating 3D images.

Phong shading tutorial with glslify.

Example on how to use three.js with glslify.

Greg Tatum explains the basics of WebGL using Regl.

Article about FBO/GPGPU particles by @nicoptere.

Article about ray marching with three.js by @nicoptere.

Introduction to custom shaders, uniforms, textures and lighting in three.js.

First part of an introduction to modern OpenGL.

Good introduction to some of the OpenGL terms.

Article about the smooth based primitive union.

Collection of distance functions in one centralized place.

Explains how to create complex 3D shapes inside volumetric shaders.

Book, blog and collection of resources regarding real-time rendering.

Short and sweet introduction to OpenGL shaders by Anton Gerdelan.

The title says it all. Introduction by Adok.

Really good introduction to how basic software rendering works.

Website with a really good collection of WebGL tutorials.

, 2, 3 - Beginner introduction on how to create geometry object.

Series of tutorials about WebGL, Three.js, and Three.bas.

Brief overview over the different coordinate systems throughout the 3D graphics pipeline.

Short and sweet online introduction to WebGL.

Fluffy predator with three.js and instanced geometry.

How to create a particle effects with billboarding and WebGL.

How to create GPGPU particles with regl.

Introduction to the concepts behind real time directional light shadow mapping.

A tutorial and a list of useful resources to use WebGL raymarching and distance functions easily.

Introduction to different bump mapping techniques.

Deck on OpenGL/GLSL shader programming.

Perlin noise flow field tutorial.

Introduction to flow fields also known as vector fields.

Introduction to flow fields also known as vector fields.

Introduction to 3D graphics programming including shaders, math post-processing etc. from Newcastle University.

Introduction to Three.js by Eric Haines.

Slides from the SIGGRAPH 2017 WebGL workshop.

Advice and thoughts on how to get started by Eric Arnebäck.

Deep dive into the importance of gamma.

Profound introduction to the canvas API.

Collection of canvas tutorials by Seb Lee-Delisle.

, 2 - How to use the AxiDraw pen plotter with JavaScript.

In-depth blog post about noise as an indispensable tool for creative coding.

In depth tutorials on math, algorithms and Unity.

Learn creative coding writing simple programs.

Introduction to C4 published on Creative Applications.

An end-to-end tutorial on the design, programming and launch of an app using C4.

Particle physics explained.

Looks at the use of visualization to understand, explain and debug algorithms.

Easy to understand collection of articles on game development, but relevant to creative coding as well.

Collection of resources on stuff like path-finding, Ai, math etc.

Tips to make your art look better.

Tips on how to get color right.

Workshop for GLSL shaders and graphics programming.

The sequel to shader-school: Learn the WebGL API.

Interactive fragment shader tutorial.

Shadertoy tutorial on raytracing.

Shadertoy tutorial on Ray Marching.

Shadertoy raymarch tutorial.

Shadertoy GLSL 2D Tutorial.

Shader breakdown by Perlin.

Interactive Shader-Toy on writing a ray marcher.

Interactive Shader-Toy raymarching tutorial.

OpenGL ES shading language reference.

Shader glossary by theme.

, 2, 3, 4, 5, 6, 7, 8 - OpenGL 3D progra…

Quick and visual canvas cheatsheet.

WebGL 1.0 API reference card.

Glossary of terms relating computer graphics.

OpenGL Shading Language quick reference guide.

Math cheatsheet by Anton Gerdelan, from his OpenGL book.

Improvement of the official OpenGL documentation.

Khronos Group GLSL wiki.

PDF Reference Card for the OpenGL 4.3 API.

Interactive easing functions cheatsheet.

GLSL library on the back of tarot cards, for learning and reference.

Collection of procedural patterns and procedural noises.

Visualize noise algorithms in 1D and 2D.

Simple trigonometry visualisation.

Exploration of how shapes, forms, and patterns emerge in nature.

Sharing and discussing the use of computer programming as a creative discipline.

Subreddit on raytracing.

News and discussion about OpenGL on all platforms.

Subreddit on graphics programming.

Subreddit on Processing.

Subreddit on shaders.

Subreddit on procedural generation.

Subreddit on machine learning.

Subreddit on generative art and music.

Creative Coding Club Slack.

Iain and Seb discuss the ins and outs of creative coding.

Real Time VFX Community.

Podcast on data visualization.

Great collection of shader and math related resources.

A community of front-end developers who build collaborative creative coding projects on CodePen.

A weekly newsletter of resources around creative technology.

Cheat-sheet for mathematical notation in code form.

Teaches you the math you need to understand as a programmer.

Math snippets with graphic programming in mind.

The principles of painting with maths.

Collection of JS and GLSL math snippets.

Grab-bag of modular easing equations.

Visualization of different motion equations.

Matrix multiplication visualized.

The most useful rules of basic algebra.

Fully interactive linear algebra.

Interactive and visual introduction to image kernels.

Interactive explanation of sine and cosine.

Perlin noise explained in detail.

Tutorial on vector algebra and matrix algebra from the viewpoint of computer graphics.

Graph functions, plot data, evaluate equations, explore transformations, and much more.

Math for game developers YouTube playlist.

Essence of linear algebra YouTube playlist.

Slides about the mathematics of animation (repo).

Beautiful and visual introduction to math and quasi physics.

introduction to 2D and 3D perlin noise.

High level introduction to matrices.

List of all mathematical symbols and signs.

Interactive tool to better understand transformation matrices.

JavaScript math snippets for movement.

Maths cheat-sheet for 2D and 3D game-makers.

Introduction to matrices by Greg Tatum.

Talk by Steven Wittens about bezier curves, procedural generation, physics engines and fractals.

Interactive real-time physics simulations, with formulas and code.

Explanations of fields like Linear Algebra and Geometry designed to help you develop a visual intuition for what is going on.

A Haskell package for L-systems.

Introduction to linear interpolation (also known as mix/lerp).

In-depth article on vectors for game math.

Tiny guide to shepherding random numbers.

Tiny guide to shepherding random grids.

Tiny guide to shepherding random growth.

Machine learning for artists.

Run Keras models (tensorflow backend) in the browser, with GPU support.

Pure JavaScript Multilingual OCR.

Cloud machine learning by Google.

Open source software library for machine intelligence.

Deep Learning in your browser.

Allows anyone to use machine learning.

Coding Train repo with links to machine learning resources.

Space to share creative Ai projects.

Ai microsite intended to help newcomers get started.

Explore how machine learning works, live in the browser.

JavaScript library for training and deploying ML models in the browser and on Node.js.

Fully commented TensorFlow.js demo.

Friendly machine learning for the web.

Discover open source deep learning code and pretrained models.

Toolkit that adds artificial intelligence capabilities to design and creative platforms.

Build, train, and ship custom deep learning models using a simple visual interface.

Platform for discovering, sharing, and discussing easy to use and pre-trained machine learning models.

Algorithmic Designs Created with Processing, p5js and processingjs.

Social network for short JavaScript demos.

Showcase of web experiments written by the creative coding community.

Projects and tutorials about Processing.

Code sketches by Keith Peters.

Flickr group about generative strategies in art & design.

Flickr group about generative art.

List of interesting people worth following.

Tumblr by visual artist Raven Kwok.

Really good collection of experiments in Processing.

Tumblr with visual inspiration.

Tumblr with gifs by Dave.

Tumblr with curves, surfaces, scalar and vector fields.

Digital design festival (Online Flash Film Festival).

Creative coding, art and technology festival.

Showcase of light art and emerging technologies in Prague, the Czech Republic.

Bring together creative coders, data designers and creators working at the intersection of data, art and technology.

Organization dedicated to digital creativity in sound, music, and audio-visual art.

An open platform for the exchange on culture, arts and technology.

3 day event offering conferences, workshops, digital showcases & installations.

Projects and nonprofit events, to inspire through experience.

Inspiring people through creative uses of tech.

ZKM organizes exhibitions and events on the effects of media, digitization, and globalization.

Museum of the Future — a place where diverse blends of artistic genres, scientific domains and technological directions are displayed and processed.

Technorama allows hands-on experiences of hundreds of natural phenomena and technology.

Contemporary art gallery presenting works by international established, mid-career, and emerging artists focusing on photography and new technologies.

Digital Art Museum is an online resource for the history and practice of digital fine art.

The first museum in the Netherlands dedicated to new media art.

Graduate program in London which develops your arts practice through the expressive world of creative computation

school in London working at the intersection of creativity and computational technologies

School in New York that explore the intersections of code, design, hardware and theory.

Hosts a range of educational initiatives, most notably, the Interaction Design Programme and the CIID Summer School.

Huge list of residencies, fellowships and summer schools around the world (Navigate with the bottom left tabs).

Famous digital art blog.

Home of Íñigo Quílez, specialised in GLSL and math snippets.

Blog by Keith Peters, specialised in creative coding.

Explore the math behind shaders.

Blog of software engineer Adrian Courrèges. Articles about game graphics studies etc.

Home of Jaume Sanchez Elias, with demos, talks, articles on WebGL and WebVR.

Blog about generative art and systems, by Mikael Hvidtfeldt Christensen.

WebGL experiments and articles by Evan Wallace.

Home of Song Ho Ahn, with a good collection of tutorials on OpenGL and math.

Game art tricks, design tricks by Simon Schreibt.

Blog about generative art algorithms and techniques, by Manohar Vanga.

Compilation of WebGL experiments including comparisons on WebGL frameworks and physics engine (oimo.js, cannon.js, ammo.js)

Newsletter to know everything about the WebAudio API

Curated list of awesome OpenGL libraries, debuggers and resources.

Curated list of awesome WebGL libraries, resources and much more.

Curated list of awesome HTML5 canvas with examples, related articles and posts.

Curated list about Audio Visualization.

Curated list of awesome computer vision resources.

Curated list of recommended research papers and other readings on data visualization.

Curated list of livecoding languages and tools.

Curated list of computer graphics tutorials and resources.

Curated list of graphic programming resources.

Curated list of game development resources to make magic happen.

Curated list of public available datasets, mostly free resources.

Curated list from 2013.

A resource repository for 3D machine learning.

Curated list of Creative Technology groups, companies, studios, collectives and more.