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

Early access

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

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.

Step-by-step guide to WebGL.

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

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.

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](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.

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.

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.

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.

Mac] - Live interactive-media programming environment.

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.

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.

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.

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

js`)

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

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

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.

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.

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.

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.

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.

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.

Introduction to WebGL lightning with Greg Tatum.

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.

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.

Introduction to custom mesh shader materials.

A primer on shaders.

The second part to the previous.

Introduction to ray tracing.

A simple method for creating 3D images.

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.

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.

Deep dive into the importance of gamma.

Profound introduction to the canvas API.

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

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.

Particle physics explained.

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.

Tips on how to get color right.

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](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.

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.

Quick reference card of OpenGL 4.3 commands and syntax.

Easing functions cheat sheet.

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.

Visualize noise algorithms in 1D and 2D.

Simple trigonometry visualisation.

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.

Creative Development Slack.

Generative Art Slack.

Creative Coding Club Slack.

Creative Coding Slack.

openFrameworks Slack.

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.

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.

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.

The smallest possible perspective engine on a 2D canvas.

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

In-depth article on vectors for game math.

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

Deep Learning in your browser.

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.

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.

Flickr group about generative art.

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.

Tumblr with gifs by Dave.

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.

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.

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)

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.

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

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.

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

Link collection of ray marching on the GPU.