User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Creative Coding

Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Nov. 26, 2020, 12:05 p.m.

Thank you terkelg & contributors
View Topic on GitHub:
terkelg/awesome-creative-coding

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Books

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.

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.

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 in french, which covers OpenGL, OpenGL ES and WebGL.

Design and use machine learning models for music generation using Magenta and make them interact with existing music creation tools

Online Books

Gentle 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.

Simplified online IDE with automatic indentation, syntax highlighting for HTML, Javascript, GLSL and Python. You can run your code and download your projects.

Courses

Get started creating content with WebGL without any frameworks.

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

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

EDX course to learn programming with ProcessingJS.

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 Nicholas Felton for a smart, comprehensive, and inspiring intro to data visualization.

2](https://www.skillshare.com/classes/Programming-Graphics-II-Generative-Art-Animation/388564917), 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.

Frameworks • Libraries • Ecosystems

Godot Engine – Multi-platform 2D and 3D game engine

34.87K
6.58K
2d
n/a

[beta] A framework for making generative artwork in JavaScript and the browser.

2.48K
167
79d
MIT

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

A community-developed, free and open source library for professional-quality creative coding. [BSD]

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

C4

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

Free game engine. Easy to pick up and use with a number of tutorials.

Game engine platform to build interactive experiences.

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

Collection of Processing classes that performs heavy lifting tasks while using a minimal amount of code writing.

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

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

Open source HTML5 2D game framework for Canvas and WebGL, supports mobile web browsers.

Visual Programming Languages

👾~ music, eternal ~ 👾

297
15
8m
MIT

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

[Cross-platform] - Visual coding language in the Godot game engine.

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.

Vuo

Mac] - Live interactive-media programming environment.

Max

Mac, Win] - Visual programming language for media.

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

a software for interactive music notation, with DAW features.

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

XOD

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.

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

A suite of open source software for computational cinematography.

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

iPad] - Live graphics node editor, powered by PixelKit.

Sound Programming Languages

a programming language for real time audio synthesis and algorithmic composition.

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

Domain specific language for live coding of pattern.

a live coding synth with an emphasis on educational use.

A sound and music computing system.

Live coding environment to quickly create procedural sequencers.

Web Programming • Libraries

JavaScript 3D library.

65K
25.7K
3d
MIT

👑 Functional WebGL

3.84K
245
69d
MIT

Javascript particle animation library

1.78K
235
35d
MIT

A lightweight WebGL library

1.26K
138
4y 5m
MIT

A minimal WebGL 2 rendering library

620
51
26d
MIT

A WebGL tool set.

208
12
4m
MIT

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

12.85K
2.28K
3d
Apache-2.0

A Tiny WebGL helper Library

1.53K
184
75d
MIT

High-performance Toolkit for WebGL-based Data Visualization

1.74K
165
45d
n/a

Minimal WebGL Library

1.76K
81
49d
MIT

Lightweight 3d physics engine for javascript

2.21K
232
1y 10m
MIT

Direct port of the Bullet physics engine to JavaScript using Emscripten

2.43K
345
71d
n/a

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

powerful 2D Javascript renderer based on WebGL.

JavaScript library that starts with the original goal of Processing.

JavaScript library for visualization and creative-coding.

Javascript canvas library, SVG-to-canvas parser.

Library for creating 2D vector drawings for CNC and laser cutter machines.

Programmatic 3D modeling in JavaScript.

Let's you get straight to the fun parts of creative coding, without ever having to worry about shims or boilerplate code.

Two-dimensional drawing api geared towards modern web browsers.

WebGL graphic Library for building scalable Web3D applications.

A web component for drawing patterns with CSS.

A pseudo-3D engine for canvas & SVG

Projection Mapping • VJing

A realtime preview tool for projection mapping

188
23
3y 81d
MIT

Mac] - Video mapping projections and Light mapping.

Mac] - Realtime multimedia performance application.

Mac] - Real time video mixing and compositing.

Arena has everything Avenue has, plus advanced options for projection mapping and blending projectors. Control it from a lighting desk and sync to the DJ via SMPTE timecode. ⚠ not free.

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

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...)

Online

Build and share shaders with the world and get inspired.

Fragment shader sandbox with support for glslify.

Online shader editor and gallery.

Online shader editor.

Central repository of user submitted code concepts/snippets. Great for experiments.

Interface for programming GPU shaders.

Online shader editor and gallery.

Online shader editor.

Simple WebGL Fragment Shader Editor.

Create and experiment with algorithmic design, Processing and P5.js.

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.

Hardware

Arduino MKR WAN 1300, Arduino MKR Zero, Arduino Zero, Arduino Nano 33 BLE, Arduino Nano 33 IoT.

Open source JavaScript microcontroller you can program wirelessly.

The BeagleBoard is a low-power open-source hardware single-board computer produced by Texas Instruments in association with Digi-Key and Newark element14.

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

Simple, modern, and precise pen plotter.

Sensors, input devices and controllers for computers.

USB-based microcontroller development system.

AR-enabled projection beamers. ⚠ not free.

Other

Live Code Graphics via GLSL Fragment Shaders

166
10
1y 22d
MIT

Creative coding library for Unity

1.3K
167
2y 19d
MIT

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

F3

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

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.

ISF

GLSL shaders for use in interactive applications.

Live-coding console tool that renders GLSL Shaders.

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

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

Videos

Daniel Shiffman makes videos about creative coding.

YouTube channel about shaders case studies.

YouTube playlist about openFrameworks - not updated [2015].

YouTube playlist about Shaders, using Visual Studio Code.

YouTube playlist about the Kha framework, built in Haxe.

Learn about the new and modern OpenGL 3.0+.

YouTube playlist about vertex shaders.

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

Introduction to WebGL lightning with Greg Tatum.

Talks

Video](https://www.youtube.com/watch?v=6eLl8yQnxHQ) - Intro to WebGL with three.js.

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.

Slides by @williamapan from his Creative developer workshop at Gobelins.

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.

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

Shaders • OpenGL • WebGL

LibGDX/LWJGL tutorials and examples

1.57K
183
1y 6m
n/a

A brief introduction to fragment shaders.

287
15
4y 65d
MIT

Using custom vertex and fragment shaders in ThreeJS

297
13
4y 65d
MIT

a tutorial on ThreeJS post processing

25
2
4y 9m
MIT

phong shading tutorial with glslify

393
29
5y 6m
n/a

a simple example of ThreeJS with glslify

63
3
3y 10m
MIT

WebGL - Beyond the DOM

14
2
3y 9m
n/a

Code to accompany a series of OpenGL articles on tomdalling.com

753
214
4y 5m
n/a

Part 1 of an introduction to shaders using threejs.

Introduction to three.js from a creative coder perspective.

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.

by Joe Groff - Brief introduction to the building blocks of OpenGL.

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.

Short and sweet introduction to OpenGL shaders by Anton Gerdelan.

Articles on shaders and other computer graphics related topics.

Really good introduction to how basic software rendering works.

Website with a really good collection of WebGL tutorials.

2](http://codepen.io/mcdorli/post/generating-geometry-part-2-going-3d), 3 - Beginner introduction on how to create geometry object.

Learn how to add sine waves to a circle with three.js. (oF version)

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

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

Interactive workshop to get you up and running with WebGL.

Fluffy predator with three.js and instanced geometry.

How to create a particle effects with billboarding and WebGL.

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

Introduction to different bump mapping techniques.

Part 2](https://www.bit-101.com/blog/2017/10/28/flow-fields-part-ii/) - 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.

Canvas

Hardware

A two-part intro to creating generative graphics for plotting.

Other

Tutorials designed for learning the C# scripting side of 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.

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

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

Interactive

A workshopper for GLSL shaders and graphics programming

2.76K
212
4y 10m
n/a

The sequel to shader-school: Learn the WebGL API

1.24K
114
4y 8m
n/a

Interactive fragment shader tutorial.

Shadertoy tutorial on Ray Marching.

Interactive Shader-Toy on writing a ray marcher.

Interactive Shader-Toy raymarching tutorial.

Quick References • Cheatsheets

OpenGL ES shading language reference.

2](https://paroj.github.io/gltut/Basics/Tut01%20Glossary.html), 3, 4, 5, 6, 7, 8 - OpenGL 3D programming glossary.

WebGL 1.0 API Quick Reference Card for printing.

OpenGL Shading Language quick reference guide.

Math cheatsheet by Anton Gerdelan, from his OpenGL book.

Improvement of the official OpenGL documentation.

Quick reference card of OpenGL 4.3 commands and syntax.

Easing functions cheat sheet.

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

Collection of procedural patterns and procedural noises.

Reference from the Udacity Interactive 3D Graphics course.

Visualize noise algorithms in 1D and 2D.

Simple trigonometry visualisation.

Subreddits

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

News and discussion about OpenGL on all platforms.

Slack

Other

about programming for visual and creative applications.

Real Time VFX Community.

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.

Math

a cheat-sheet for mathematical notation in code form

11.23K
783
1y 5m
MIT

Math snippets with graphic programming in mind.

78
7
4y 10d
n/a

learning maths again

154
8
1y 14d
n/a

a grab-bag of modular easing equations

341
30
5y 52d
MIT

L-system generators and visualizers

12
2
1y 11m
MIT

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

The principles of painting with maths.

Visualization of different motion equations.

Matrix multiplication visualized.

The most useful rules of basic algebra.

J. Ström, K. Åström, and T. Akenine-Möller

Interactive and visual introduction to image kernels.

Interactive explination of sine and cosine.

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.

Beautiful and visual introduction to math and quasi physics.

List of all mathematical symbols and signs.

Interactive tool to better understand transformation matrices.

The smallest possible perspective engine on a 2D canvas.

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

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

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

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

Machine learning • Computer Vision • Ai

Examples and experiments around ML for upcoming Coding Train videos

885
202
10m
n/a

Explore how machine learning works, live in the browser. No coding required.

3.62K
537
2y 8d
Apache-2.0

Machine learning for artists.

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

Pure Javascript Multilingual OCR.

Cloud machine learning by Google.

TensorFlow is an Open Source Software Library for Machine Intelligence

Allows anyone to use machine learning.

Space to share creative Ai projects.

Ai microsite intended to help newcomers get started.

A WebGL accelerated, browser based JavaScript library for training and deploying ML models.

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.

Inspiration

People You Should Follow on CodePen

502
59
27d
n/a

Create and experiment with algorithmic design, Processing and P5.js.

Social network for short JavaScript demos.

Showcase of web experiments written by the creative coding community.

Showcase of curated creative coding sketches.

Projects and tutorials about Processing.

Code sketches by Keith Peters.

Flickr group about generative strategies in art & design.

Open source micro blog about inspiring and creative works published online.

Tumblr by visual artist Raven Kwok.

Really good collection of experiments in Processing.

Tumblr with visual inspiration.

Celebration of art made with code by artists that push the possibilities of creativity.

Tumblr with curves, surfaces, scalar and vector fields.

Collection of gifs, links and images by W:Blut.

Events

Digital design festival (Online Flash Film Festival).

Festical in Belgrade about cutting edge music, visual arts and digital culture.

Creative coding, art and technology festival.

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

Festival for Artists, data designers, creative coders, AI explorers, storytellers, tool & platform developers, and researchers all. (June)

Electronic music and the digital arts festival. (March)

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.

Hand-picked design, code, art, fashion and maker events.

Inspiring people through creative uses of tech.

The first parisian event dedicated to advanced creative coding. (November)

Museums • Galleries

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.

Schools • Workshops

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).

Blogs • Websites

jsdo.it archives

5
1
27d
n/a

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

Blog by Keith Peters, specialised in creative coding.

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.

A weekly newsletter for people are interested in the Web Audio API, the Web MIDI API, or sound on the web in general.

Related

A curated list of awesome OpenGL libraries, debuggers and resources.

1.36K
132
34d
n/a

A curated list of awesome WebGL libraries, resources and much more

775
61
60d
CC0-1.0

A curated list of awesome HTML5 Canvas with examples, related articles and posts.

888
112
35d
MIT

A curated list about Audio Visualization.

3.42K
274
102d
n/a

A curated list of awesome computer vision resources

13.06K
3.29K
1y 8m
n/a

A list of recommended research papers and other readings on data visualization

763
87
10m
MIT

All things livecoding

1.24K
109
109d
n/a

Curated list of computer graphics tutorials and resources

769
76
4y 10m
CC0-1.0

a list of graphic programming resources

1.5K
112
5y 37d
MIT

A list of Game Development resources to make magic happen.

7.7K
753
5d
GPL-3.0

A topic-centric list of HQ open datasets.

42K
7.42K
31d
MIT

A resource repository for 3D machine learning

5.82K
1.26K
40d
n/a

Link collection of ray marching on the GPU.