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.
Thank you terkelg & contributors
View Topic on GitHub:
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.
Practical guide using Processing.
Visualize, Program, and Create 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.
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.
Book in french, which covers OpenGL, OpenGL ES and WebGL.
Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
Community-written book/guide on openFrameworks.
Site dedicated to tutorials for OpenGL 3.3 and later.
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.
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.
EDX course to learn programming with ProcessingJS.
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.
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](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.
Frameworks • Libraries • Ecosystems
Godot Engine – Multi-platform 2D and 3D game engine
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.
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.
Visual Programming Languages
👾~ music, eternal ~ 👾
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.
Cross-platform] - Open source visual programming language for multimedia.
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.
Realtime visual coding tool, easy to understand and aimed at beginners.
Sound Programming Languages
a programming language for real time audio synthesis and algorithmic composition.
Strongly-timed, concurrent, and on-the-fly music programming language.
Web Programming • Libraries
👑 Functional WebGL
A lightweight WebGL library
A minimal WebGL 2 rendering library
A WebGL tool set.
A Tiny WebGL helper Library
High-performance Toolkit for WebGL-based Data Visualization
Minimal WebGL Library
Library for creating 2D vector drawings for CNC and laser cutter machines.
Let's you get straight to the fun parts of creative coding, without ever having to worry about shims or boilerplate code.
Projection Mapping • VJing
A realtime preview tool for projection mapping
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.
Central repository of user submitted code concepts/snippets. Great for experiments.
Create and experiment with algorithmic design, Processing and P5.js.
Run-as-you-type tool for VJs, musicians, teachers, students, kids.
Arduino MKR WAN 1300, Arduino MKR Zero, Arduino Zero, Arduino Nano 33 BLE, Arduino Nano 33 IoT.
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.
Live Code Graphics via GLSL Fragment Shaders
Creative coding library for Unity
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.
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.
Live-coding console tool that renders GLSL Shaders.
Mac] - Education oriented 2d graphics programming environment based on python.
Daniel Shiffman makes videos about creative coding.
YouTube playlist about fragment shaders.
YouTube channel about shaders case studies.
YouTube series to learning openFrameworks
YouTube playlist about openFrameworks - not updated .
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 diving into three.js.
YouTube playlist teaching you how to make shaders, starting with zero knowledge using shadertoy.
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.
Shaders • OpenGL • WebGL
LibGDX/LWJGL tutorials and examples
A brief introduction to fragment shaders.
Using custom vertex and fragment shaders in ThreeJS
a tutorial on ThreeJS post processing
phong shading tutorial with glslify
a simple example of ThreeJS with glslify
WebGL - Beyond the DOM
Code to accompany a series of OpenGL articles on tomdalling.com
Part 1 of an introduction to shaders using threejs.
Introduction to three.js from a creative coder perspective.
Introduction to custom mesh shader materials.
The second part to the previous.
Introduction to ray tracing.
A simple method for creating 3D images.
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.
The title says it all. Introduction by Adok.
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.
How to create GPGPU particles with regl.
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 programing.
Perlin noise flow field tutorial.
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.
Slides from the SIGGRAPH 2017 WebGL workshop.
Advice and thoughts on how to get started by Eric Arnebäck.
Profound introduction to the canvas API.
Tutorials designed for learning the C# scripting side of Unity.
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.
Tiny guide to shepherding random numbers.
Tips to make your art look better.
A workshopper for GLSL shaders and graphics programming
The sequel to shader-school: Learn the WebGL API
Shadertoy tutorial on raytracing.
Interactive Shader-Toy on writing a ray marcher.
Quick References • Cheatsheets
WebGL 1.0 API Quick Reference Card for printing.
Glossary of terms relating computer graphics.
OpenGL Shading Language quick reference guide.
Math cheatsheet by Anton Gerdelan, from his OpenGL book.
Quick reference card of OpenGL 4.3 commands and syntax.
Short and sweet visual overview on PBR.
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.
Sharing and discussing the use of computer programming as a creative discipline.
Subreddit on graphics programming.
Subreddit on procedural generation.
about programming for visual and creative applications.
Great collection of shader and math related resources.
A community of front-end developers who build collaborative creative coding projects on CodePen.
a cheat-sheet for mathematical notation in code form
Math snippets with graphic programming in mind.
learning maths again
a grab-bag of modular easing equations
L-system generators and visualizers
Teaches you the math you need to understand as a programmer.
The principles of painting with maths.
Visualization of different motion equations.
J. Ström, K. Åström, and T. Akenine-Möller
Interactive and visual introduction to image kernels.
Tutorial on vector algebra and matrix algebra from the viewpoint of computer graphics.
Graph functions, plot data, evaluate equations, explore transformations, and much more.
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.
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 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
Explore how machine learning works, live in the browser. No coding required.
Run Keras models (tensorflow backend) in the browser, with GPU support.
TensorFlow is an Open Source Software Library for Machine Intelligence
Toolkit that adds artificial intelligence capabilities to design and creative platforms.
Build, train, and ship custom deep learning models using a simple visual interface.
People You Should Follow on CodePen
Create and experiment with algorithmic design, Processing and P5.js.
Showcase of web experiments written by the creative coding community.
Flickr group about generative strategies in art & design.
Open source micro blog about inspiring and creative works published online.
Celebration of art made with code by artists that push the possibilities of creativity.
Festical in Belgrade about cutting edge music, visual arts and digital culture.
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)
3 day event offering conferences, workshops, digital showcases & installations.
Hand-picked design, code, art, fashion and maker events.
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.
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.
Blogs • Websites
Home of Íñigo Quílez, specialised in GLSL and math snippets.
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.
Home of Song Ho Ahn, with a good collection of tutorials on OpenGL and math.
Blog about generative art algorithms and techniques, by Manohar Vanga.
A curated list of awesome OpenGL libraries, debuggers and resources.
A curated list of awesome WebGL libraries, resources and much more
A curated list of awesome HTML5 Canvas with examples, related articles and posts.
A curated list about Audio Visualization.
A curated list of awesome computer vision resources
A list of recommended research papers and other readings on data visualization
All things livecoding
Curated list of computer graphics tutorials and resources
a list of graphic programming resources
A list of Game Development resources to make magic happen.
A topic-centric list of HQ open datasets.
A resource repository for 3D machine learning