Courses & TutorialsProgramming

Awesome Creative Coding – Massive Collection of Resources

Carefully curated list of awesome creative coding resources primarily for beginners/intermediates.

Creative coding is a different discipline than programming systems. The goal is to create something expressive instead of something functional. Interaction design, information visualization and generative art are all different types of creative coding – which has become a household term describing artworks articulated as code.

 


Don’t know where to start? Check out Creative Coding course on Frontend Masters. ⭐

🌟 Want to go deeper? Check out Advanced Creative Coding with WebGL & Shaders on Frontend Masters. 🌟


Contents

Books

Online Books

Courses

Tools

Frameworks • Libraries • Ecosystems

  • Processing [Cross-platform] – Computer programming language and IDE for visual arts.
  • Cinder [Cross-platform] – Open source library for professional-quality creative coding in C++.
  • openFrameworks [Cross-platform] – Open source C++ toolkit for creative coding.
  • C4 [iOS] – Open-source creative coding framework for iOS.
  • Unity [Mac, Win] – Game engine, but useful for creative coding and installations.
  • Godot [Cross-platform] – Open source game engine, that can also be used for all sorts of things.
  • PlayCanvas [Cross-platform] – Open source, realtime collaborative WebGL engine.
  • hg_sdf [Cross-platform] – GLSL library for building signed distance functions.
  • HYPE [Cross-platform] – HYPE_processing, is a collection of classes that performs heavy lifting tasks while using a minimal amount of code writing.
  • nannou
    [Cross-platform] – Open-source creative coding framework for the Rust language
  • thi.ng
    [Cross-platform] – Open source collection of computational design tools for the Clojure and ClojureScript languages
  • PixelKit [iOS, Mac] – Open source, live graphics, Swift framework, powered by Metal.
  • OPENRNDR [Cross-platform] – Open source library for creative coding written in Kotlin.
  • Phaser [Cross-platform] – HTML5 framework for building games, uses both a Canvas and WebGL renderer.
  • Canvas-sketch [Cross-platform] – HTML5 framework for making generative artwork in JavaScript and the browser.

Visual Programming Languages

  • vvvv [Win] – Hybrid visual/textual live-programming environment for easy prototyping and development.
  • VisualScript [Cross-platform] – Visual coding language in the Godot game engine.
  • NodeBox [Mac, Win] – Cross-platform, node-based GUI for efficient data visualizations and generative design.
  • TouchDesigner [Mac, Win] – Visual development platform to create realtime projects.
  • Quartz Composer [Mac] – Development tool for processing and rendering graphical data.
  • Vuo [Mac] – Live interactive-media programming environment.
  • Max [Mac, Win] – Visual programming language for media.
  • Pure Data [Cross-platform] – Open source visual programming language for multimedia.
  • i-score [Cross-platform] – Interactive sequencer to control creative coding libraries and toolkits.
  • tooll [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.
  • Isadora [Cross-platform] – Scene based media control software with integrated projection mapper.
  • cables [Cross-platform/Web] – Your model kit for creating beautiful interactive content. Currently in private beta, invites can be requested.
  • eternal [Web] – Programs as graphs and graphs as compositional tools for creation
  • Notch Builder [Win] – Node-based authoring tool with a strong focus on real-time graphics. Currently in beta.
  • Synopsis – A suite of open source software for computational cinematography.
  • JOY.JS – Realtime visual coding tool, easy to understand and aimed at beginners.
  • Pixel Nodes [iPad] – Live graphics node editor, powered by PixelKit.

Sound Programming Languages

  • SuperCollider [Multi-platform] – Platform for audio synthesis and algorithmic composition.
  • ChucK – Strongly-timed, concurrent, and on-the-fly music programming language.
  • TidalCycles – Domain specific language for live coding of pattern.
  • Sonic Pi – The live coding music synth for everyone.
  • Csound – A sound and music computing system.
  • Orca – Live coding environment to quickly create procedural sequencers.
  • handel – A small procedural programming language for writing songs in browser.

Web Programming • Libraries

  • 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.
  • Pts.js – JavaScript library for visualization and creative-coding.
  • Fabric.js – Javascript canvas library, SVG-to-canvas parser.
  • Maker.js – Parametric line drawing for SVG, CNC & laser cutters.
  • OpenJSCAD – Programmatic 3D modeling in JavaScript.
  • Sketch.js – Minimal JavaScript creative coding framework.
  • Two.js – Two-dimensional drawing api geared towards modern web browsers.
  • ClayGL – WebGL graphic library for building scalable Web3D applications.
  • Proton – A lightweight and powerful javascript particle engine.
  • lightgl.js – A lightweight WebGL library.
  • picogl.js – A minimal WebGL 2 rendering library.
  • Alfrid – A WebGL tool set.
  • Babylon.js – complete JavaScript framework for building 3D games with HTML 5 and WebGL.
  • twigl – A Tiny WebGL helper Library.
  • luma.gl – WebGL2 Components for Data Visualization.
  • css-doodle – A web component for drawing patterns with CSS.
  • OGL.js – JavaScript 3D library (WebGL)
  • Zdog – A pseudo-3D engine for canvas & SVG
  • Oimo.js – Lightweight 3d physics engine for javascript
  • Ammo.js – Direct port of the Bullet physics engine to JavaScript using Emscripten

Projection Mapping • VJing

  • MadMapper [Mac] – Video mapping projections and Light mapping.
  • VDMX [Mac] – Realtime multimedia performance application.
  • Modul8 [Mac] – Real time video mixing and compositing.
  • Resolume [Mac, Win] – Mixing of digital video and effects in a realtime.
  • CoGe VJ [Mac] – VJ software designed for realtime HD video mixing and compositing with a modular user interface.
  • VirtualMapper – Realtime preview tool for projection mapping.
  • Millumin [Mac] – A software to create and perform interactive audiovisual shows.
  • Smode [Win] – A real-time 2D/3D creation, compositing and video-mapping engine.
  • Veejay [Linux] – A live performance tool featuring simple non-linear editing and mixing from multiple sources (files, devices, streams…)

Online

  • 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.
  • Shdr Editor – Online shader editor.
  • CodePen – Show case of advanced techniques with editable source code.
  • Shadershop – Interface for programming GPU shaders.
  • Vertexshaderart – Online shader editor and gallery.
  • Cyos – Online shader editor.
  • GlslEditor – Simple WebGL Fragment Shader Editor.
  • OpenProcessing – Create and experiment with algorithmic design, Processing and P5.js.
  • P5.js Editor – Online web editor for P5.js.
  • LiveCodeLab – Run-as-you-type tool for VJs, musicians, teachers, students, kids.
  • Turtletoy – Minimalistic API and online showcase for generative code. (Javascript)
  • ShaderGif – Open source home for art made with code (WebGL1/2, JavaScript Canvas & P5.js).
  • P5LIVE – p5.js live-coding environment.
  • NEORT – Digital art platform for creative coders (Fragment Shader, Javascript Canvas).
  • Shelly – Learn programming by issuing instructions to a turtle.
  • tixy.land – The most minimalist creative coding environment is alive.

Hardware

  • Arduino – Open source microcontroller kits for building digital devices and interactive objects.
  • Raspberry Pi – Small single-board computers.
  • Puck.js – Open source JavaScript microcontroller you can program wirelessly.
  • BeagleBoard – Low-power open source single-board computers.
  • Makey Makey – Turn everyday objects into touchpads and combine them with the internet.
  • Tessel – Easy to use microcontroller that runs JavaScript.
  • Leap Motion – Sensor device that supports hand and finger motions as input.
  • AxiDraw – Simple, modern, and precise pen plotter.
  • Phidgets – Sensors, input devices and controllers for computers.
  • Teensy – USB-based microcontroller development system.
  • Lightform – AR projection mapping with built-in depth sensor.

Other

  • Structure Synth [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.
  • Fragment [Mac]- App to live code GLSL graphics.
  • ShaderTool [Win] – Modern shader IDE for programmers and FX artists.
  • Syphon [Mac] – Allows applications to share frames with one another in realtime.
  • KodeLife – Real-time GPU shader editor, live-code performance tool and graphics prototyping sketchpad.
  • ISF – GLSL shaders for use in interactive applications.
  • glslViewer – Live-coding console tool that renders GLSL Shaders.
  • DrawBot [Mac] – Education oriented 2d graphics programming environment based on python.
  • Klak – A collection of scripts for creative coding with Unity.
  • basil.js – Scripting (JS) in InDesign for designers and artists in the spirit of Processing.
  • Konstrukt [Cross-platform] – A commandline tool to generate different scaleable patterns as SVGs.

Learning Resources

Videos

Talks

Articles • Tutorials

Shaders • OpenGL • WebGL

Canvas

Hardware

Other

Interactive

Quick References • Cheatsheets

Communities

Subreddits

Slack

Other

Math

Machine learning • Computer Vision • Ai

  • 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.
  • Machine Learning – Coding Train repo with links to machine learning resources.
  • CreativeAi.net – Space to share creative Ai projects.
  • AI Playbook – Ai microsite intended to help newcomers get started.
  • Teachable Machine – Explore how machine learning works, live in the browser.
  • TensorFlow.js – JavaScript library for training and deploying ML models in the browser and on Node.js.
  • Hello TensorFlow – Fully commented TensorFlow.js demo.
  • ml5.js – Friendly machine learning for the web.
  • Model Zoo – Discover open source deep learning code and pretrained models.
  • Runway – Toolkit that adds artificial intelligence capabilities to design and creative platforms.
  • Lobe – Build, train, and ship custom deep learning models using a simple visual interface.
  • ModelDepot – Platform for discovering, sharing, and discussing easy to use and pre-trained machine learning models.

Inspiration

  • 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 – Showcase of curated creative coding sketches.
  • For your Processing – Projects and tutorials about Processing.
  • 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.
  • Inspiring Online – Open source micro blog about inspiring and creative works published online.
  • People You Should Follow on CodePen – List of interesting people worth following.
  • Raven Kwok – Tumblr by visual artist Raven Kwok.
  • P5Art – Really good collection of experiments in Processing.
  • Echophon – Tumblr with visual inspiration.
  • Bees & Bombs – Tumblr with gifs by Dave.
  • DevArt – Celebration of art made with code by artists that push the possibilities of creativity.
  • Folds2d – Tumblr with curves, surfaces, scalar and vector fields.
  • W:BLUT Inspiration – Collection of gifs, links and images by W:Blut.

Events

  • OFFF Festival – Digital design festival (Online Flash Film Festival).
  • Gray Area Festival – Creative coding, art and technology festival.
  • Signal Festival – Showcase of light art and emerging technologies in Prague, the Czech Republic.
  • Eyeo Festival – Bring together creative coders, data designers and creators working at the intersection of data, art and technology.
  • Mutek – Organization dedicated to digital creativity in sound, music, and audio-visual art.
  • Node – An open platform for the exchange on culture, arts and technology.
  • Digital Design Days – OFFF – 3 day event offering conferences, workshops, digital showcases & installations.
  • CODAME ART+TECH – Projects and nonprofit events, to inspire through experience.
  • Curated Creative Events – Hand-picked design, code, art, fashion and maker events.
  • NextArt Night – Inspiring people through creative uses of tech.
  • GROW – The Parisian rendez-vous for creative coders, GROW is about opening new possibilities in digital creation.

Museums • Galleries

Schools • Workshops

Blogs • Websites

  • CreativeApplications.Net [CAN] – Famous digital art blog.
  • iquilezles.org – Home of Íñigo Quílez, specialised in GLSL and math snippets.
  • bit-101.com – Blog by Keith Peters, specialised in creative coding.
  • ibreakdownshaders – Explore the math behind shaders.
  • adriancourrèges.com – Blog of software engineer Adrian Courrèges. Articles about game graphics studies etc.
  • clicktorelease.com – Home of Jaume Sanchez Elias, with demos, talks, articles on WebGL and WebVR.
  • syntopia – Blog about generative art and systems, by Mikael Hvidtfeldt Christensen.
  • madebyevan.com – WebGL experiments and articles by Evan Wallace.
  • songho.ca – Home of Song Ho Ahn, with a good collection of tutorials on OpenGL and math.
  • simonschreibt.de – Game art tricks, design tricks by Simon schreibt.
  • sighack.com – Blog about generative art algorithms and techniques, by Manohar Vanga.
  • jsdo.it-archives – Compilation of WebGL experiments including comparisons on WebGL frameworks and physics engine (oimo.js, cannon.js, ammo.js)
  • WebAudio Weekly – Newsletter to know everything about the WebAudio API

Related

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button