Since I started to code, I was interested by using computers to make creative and artistic things. This is a page where I share resources (articles, videos, tutorials etc.) that helped me.
You can find a section on how it works at the bottom of this page.
- Notes
- Augmented Reality
- Cellular automata
- Connected things
- Creative coding
- Demoscene
- Generative art
- Git
- Javascript
- Machine learning - Neural network
- Maths and physics
- Network
- ORCΛ
- Plotter
- Raymarching
- Rust
- Shaders - GLSL
- Shell - CLI
- Unity
- WebGL
- 3D printing
- Others
- What is this and how it works?
A quick note on the difference between Creative coding section and Generative art section and why I splited things in two parts. I make a distinction between those two terms as I wanted to have a section more dedicated to the coding tricks and another one more oriented on the thinking behing doing art. So you might find some articles titled "Doing this with generative art" in Creative coding because it's a technical breakdown of a process or an effect. So this part might be view as "Doing creative and artistic things with code" and the other one like "Thoughts about (generative) art".
Jonathan Blanchet and Cyril Diane - Link
Capture and transfer anything around you. Android, iOS, macOS and Windows.
Dim - Code Golf Stack Exchange - Link
Recreational programming competition to build a digital clock in Conway's Game of Life.
Nicolas Loizeau - Personal website - Link
The purpose of this page is to describe the functioning of a computer built in Conway’s game of life.
Daniel Shiffman - YouTube channel of The Coding Train - Link
Visualize a Reaction Diffusion simulation using the Gray Scott model in JavaScript (with the p5.js library).
Alan Zucconi - YouTube channel of Alan Zucconi - Link
A short documentary on Conway's Game of Life, to celebrate the 50th anniversary of its original publication on the October 1970 issue of Scientific American.
Karl Sims - Personal website - Link
A simulation of two virtual chemicals reacting and diffusing on a 2D grid using the Gray-Scott model.
Link
Arduino is an open-source electronics platform based on easy-to-use hardware and software. It's intended for anyone making interactive projects.
Link
The ground-breaking bluetooth beacon. An Open Source JavaScript microcontroller you can program and debug wirelessly.
Link
Your tiny, dual-display, desktop computer.
Pine & Anthony - Personals websites - Pine's Link & Anthony's Link
An exploration of Computational Form.
Tyler Hobbs - Personal website - Link
Explanation of the technique behind the "watercolor" generative artwork of Tyler Hobbs.
Pine & Anthony - Personal website - Link
Codecember is an invitation to learn and create compform (computation form), one sketch a day, throughout December, 2020.
WBlut - Personal website - Link
Build a generative system in Processing to explore the of cracking.
Keith Peters - Medium article - Link to part 1, Link to part 2
What a flow field is, show how to create one, and give a few examples of experimenting with them.
Tim Holman and Ruth John - Link
A range of interactive tutorials, exploring ideas and techniques used in generative art. Progressively learn the steps used to create generative art.
inconvergent - Personal website - Link
A guide to a simple method of generating impossible architecture.
Nicoptere - YouTube channel of Publicis Sapient Engineering - Link
Le code créatif est injustement méconnu, il s'agira donc dans un premier temps de savoir de quoi on parle. Nous nous intéresserons ensuite à la branche web du code créatif au travers de retours d'expérience richement illustrés qui mettront en lumière la variété des sujets et la diversité des outils.
WBlut - Personal website - Link
Create a bunch of random line segments and draw circles on every intersection.
Varun Vachhar - Personal website - Link
Breakdown of Walter Leblanc’s print Torsions animated.
Inigo Quilez - Personal website - Link
This article is about one posible way to compute procedural palettes for modulation or visualization in a cheap way with a simple formula.
Tyler Hobbs - Personal website - Link
This post describes some of the common distributions that are useful for artwork.
kchapelier - Github - Link
A mostly javascript-centric resource / links list on procedural content generation (PCG).
Catlike Coding - Personal website - Link
A series about creating and using pseudorandom noise.
Tyler Hobbs - Personal website - Link
Some advice to help improve your generative artwork.
xem - Personal website - Link
Making-of the js13k entry Track not Found?!.
Tyler Hobbs - Personal website - Link
Description of some of the common techniques and patterns that Hobbs uses when working with colors in generative artwork.
Excess - YouTube channel of gloom303 - Link
Real-time graphics demoscene production by Excess. First presented at Revision 2018 demoparty in Germany, April 1st, 2018.
Alcatraz - YouTube channel of Demoscene TV - Link
1st place in the PC 4K Intro compo at the Evoke 2019 demoparty.
Ümlaüt Design - YouTube channel of w0lf Universe - Link
median by Ümlaüt Design, QB Party 2016, demo competition.
mercury - YouTube channel of Demoscene High-Quality Videos (Annikras) - Link
2nd place in pc 64k compo at Revision 2015.
NuSan and Valden - YouTube channel of NuSan - Link
4th in the revision online 2020 PC 4k intro competition.
Altair - YouTube channel of ratz - Link
1st place in combined demo/intro compo at rsync 2020 demoparty in Brussels.
Prismbeings - YouTube channel of Cursed demos - Link
4kb intro, released at Simulaatio 2016, placed 1st in the newschool intro competition.
Prismbeings - YouTube channel of Demoscene in 23.976 Hertz - Link
4k intro released at Revision 2018 demoparty.
Benjamin Kovach - Link
Iteration of the piece "Blotch".
Tyler Hobbs - Personal website - Link
Talk gave at Clojure/conj 2018, and focuses on some of the interesting questions around practicing generative art.
Yuan Chuan - Personal website - Link, Link to Slides
A talk about generating art with CSS, especially css-doodle.
Golan Levin - Github - Link
This page compiles examples of large-run printed books with generative cover designs.
Tyler Hobbs - Personal website - Link
An essay about the link between clever algorithms and generative art.
Sukanya Aneja - Link, Link to thesis video
in:verse is a programming language and environment for exploring the conflux of poetry, visuals, mathematics and code.
Kate Compton - Personal website - Link
This is a beginner-level advice essay for people just getting started with building generators. It’s also for practiced experts who want a way to organize their knowledge. The advice is meant for any kind of generators: humorous twitterbots, fanciful art-making bots, level generators, planet builders, makers of music, architecture, poetry, and cocktails.
Nicole He - Link
The Best Art is an artistic collaboration between the computer and the human.
Vera Molnár - studio international Vimeo channel - Link
The pioneer of computer-assisted art recounts her love affair with lines, the balancing of order and chaos, and preparing to be surprised.
Vera Molnár - MuDA Vimeo channel - Link
Kids, if anyone ever questions your "computer art" please point them to what 95 year old digital arts pioneer Vera Molnar has to say about that.
Kate Hudson (+109 contributors) - Github - Link
A guide for programmers using Git about what to do when things go wrong.
Github - Link
This Oh My Zsh git plugin provides many aliases and a few useful functions.
Link, Link to Github
A library for performing Bezier curve computation. Works both client side and server side.
Matt DesLauriers - Github - Link
A framework for making generative artwork in JavaScript and the browser.
Link
Dwitter.net is a challenge to see what awesomeness you can create when limited to only 140 characters of javascript and a canvas.
Marcel Duin - Q42 Engineering website - Link
A journey of taking the Micrio client to the next level.
Link
Here you will find the best tutorials and resources to learn Canvas and other HTML5 aspects.
Link
Johnny-Five is the JavaScript Robotics & IoT Platform.
Link
Friendly Machine Learning for the Web. A neighborly approach to creating and exploring artificial intelligence in the browser.
Nathan Gordon - Github - Link
Minimal WebGL Library.
velipso - Github - Link
Boolean operations on polygons (union, intersection, difference, xor).
Link
The JavaScript playground for your desktop.
Github - Link
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images.
Mr Doob (+1360 contributors) - Github - Link
JavaScript 3D library.
3Blue1Brown - YouTube channel of 3Blue1Brown
- Link to chapter 1: but what is a Neural Network?
- Link to chapter 2: gradient descent, how neural networks learn
- Link to chapter 3: what is backpropagation really doing?
- Link to chapter 4: backpropagation calculus
Link
ml4a is a collection of free educational resources devoted to machine learning for artists.
Emil Wallner - Link
Creativity x Machine Learning, collection of Machine Learning experiments.
cube drone - Personal website - Link
"Don’t try to procedurally generate something that you can’t already create, dummy."
Michael Nielsen - Online book - Link
Teaching about neural networks, a beautiful biologically-inspired programming paradigm which enables a computer to learn from observational data, and deep learning, a powerful set of techniques for learning in neural networks.
Daniel Shiffman - YouTube channel of The Coding Train - Link
In this playlist, Daniel Shiffman explains word embeddings and the machine learning model word2vec with an eye towards creating JavaScript examples with p5.js.
lisyarus - Twitter thread from lisyarus - Link
A (mostly) beginner-friendly thread on how to code simple physical simulations.
Nicholas Rougeux (reproduction of Oliver Byrne book) - Online book - Link
The first six books of the elements of Euclid with coloured diagrams and symbols. A reproduction of Oliver Byrne’s celebrated work from 1847 plus interactive diagrams, cross references and posters.
Bartosz Ciechanowski - Personal website - Link
Cameras and the lenses inside them may seem a little mystifying. This blog post is an attempt to explain not only how they work, but also how adjusting a few tunable parameters can produce fairly different results.
Jeff Thompson - Link
This book explains the algorithms behind collisions using basic shapes like circles, rectangles, and lines so you can implement them into your own projects.
Kynd - Flickr - Link
Curves.
Paul Bourke - Personal website - Link
Supershape equation.
kynd - Link
Steve Schoger - Poster - Link
MAKIO135 - Link
A companion app for ORCΛ using its UDP operator to send UDP messages or complex OSC message to multiple hosts.
hundredrabbits - Link
Orca is an esoteric programming language designed to quickly create procedural sequencers, in which every letter of the alphabet is an operation. This application is a flexible livecoding environment capable of sending MIDI, OSC & UDP to your audio/visual interfaces, like Ableton, Renoise, VCV Rack or SuperCollider.
hundredrabbits - Link
Pilot is a UDP synthesizer designed to be controlled externally. It was created as a companion application to the livecoding environment ORCA.
Felix Gnass - Link
This playground lets you use Orca and its companion app Pilot directly in the browser and allows you to publish your creations by sharing their URL.
Link
The Internet Connected Drawing Robot
makio135 - Observable - Link
ln.js is a vector-based 3D renderer ported in JavaScript. It is used to produce 2D vector graphics (think SVGs) depicting 3D scenes.
colormoter - Tweet from colormotor - Link
Mapping video with an axidraw plotting.
Inigo Quilez - Link
Here you will find the distance functions for basic primitives, plus the formulas for combining them together for building more complex shapes, as well as some distortion functions that you can use to shape your objects. Hopefully this will be useful for those rendering scenes with raymarching.
clem - Personal website - Link
In this article, we will be writing a simple ray tracer using the ray marching technique combined with distance field functions.
TekF - Shadertoy - Link
A guide to writing a ray marcher. Aimed at people who have done a little programming, and want to learn how to draw 3D scenes in Shadertoy.
Jamie Wong - Personal website - Link
Ray marching used in combination with a special kind of function called “signed distance functions”, can create some pretty damn cool things in real time.
Alan Zucconi - Personal website
- Link to part 1
- Link to part 2: Raymarching
- Link to part 3: Surface shading
- Link to part 4: Signed distance functions
- Link to part 5: Ambient occlusion
A Unity tutorial dedicated to Volumetric Rendering, raymarching and signed distance fields. These techniques allow us to overcome the biggest limitation of modern 3D engines, which only let us render the outer shell of an object. Volumetric rendering enables the creation of realistic materials that interact with light in a complex way, such as fog, smoke, water and glass.
Link
An open-source creative-coding framework for Rust.
Link
A language empowering everyone to build reliable and efficient software.
Aerotwist - Personal website - Link to part 1, Link to part 2
yuanchuan - Personal website - Link
Implementation of shaders inside css-doodle.
Cyanilux - Personal website - Link
Shader effect using noise and step functions to discard pixels (and for colouring edges) to create a dissolve effect.
tdhooper - Twitter thread from tdhoooper - Link, Link to Shadertoy
Documented code to create seamless zooms.
Cyanilux - Personal website - Link
Portal shader based on manipulating polar coordinates to create a spiralling effect.
Patricio Gonzalez Vivo and Jen Lowe - Link
This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
echo hello Ro{ch,bert,drigo}
# > hello Roch Robert Rodrigo
touch Button.{html,css,js}
# > Button.html Button.css Button.js
npm i -D eslint-config-{prettier,react-app,airbnb}
mv index.js{,.save}
# > index.js.save
cp index.js{,.save}
# > index.js index.js.saveKeith Peters - Personal website - Link
Github - Link
A delightful community-driven framework for managing your zsh configuration. Includes 200+ optional plugins (rails, git, OSX, hub, capistrano, brew, ant, php, python, etc), over 140 themes to spice up your morning, and an auto-update tool so that makes it easy to keep up with the latest updates from the community.
Catlike Coding - Personal website - Link
These tutorials teach you about C# and shader programming for Unity. They build on one another, introducing new programming concepts, math, algorithms, and Unity features. They're useful to both novice and experienced developers.
Keijiro Takahashi - Github - Link
MIDI input plugin for Unity.
hecomi - Github - Link
Raymarching Shader Generator in Unity.
Takayosi Amagi - Medium article - Link
How Takayosi Amagi built his VJ system with Unity and performed.
Link, Link to WebGL2
WebGL from the ground up. No magic.
Billie Ruben - YouTube channel of Billie Ruben - Link
Terkel (+56 contributors) - Github - Link
Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
Link
Create and share beautiful images of your source code.
David Aerne - Link
FarbVélo (Swiss-German for color bicycle) is a playful color picking tool. It follows simple rules and uses lots of gerates random numbers to help you come up with pleasing color combinations or just chill while cycling through color harmonies.
pkh - Personal website - Link
Improve the support of the GIF encoding in FFmpeg to make it decent, notably led to the addition of the transparency mechanism in the GIF encoder.
Link
The scalable code generator that saves you time.
Thomas Beduneau and Julien Dubedout - Link
Générateur de Lorraine Hipseaume.
Jamin Warren - Killscreen website - Link
Interview of Nicole He, creative technologist whose work lives in the space between video games, physical computing, and witty conceptual art.
makio135 - Observable notebook - Link
A review of tools created during one year using Observable.
Omar Shehata Parametric press - Link
JPEG images are everywhere in our digital lives, but behind the veil of familiarity lie algorithms that remove details that are imperceptible to the human eye. This produces the highest visual quality with the smallest file size—but what does that look like? Let's see what our eyes can't see!
LingDong- - Github - Link
wax is a tiny language designed to transpile to other languages easily. Currently supported backends: C, Java, TypeScript, Python and C#.
This page is a list of links that helped me or that I find interesting.
There is a lot of resources that exist and that are not there because I didn't find them interesting or I simply didn't read them. So there might be things that seems intential to you that are "missing" here.
This is not planned to be exhaustive.
As creative developer or generative artist we are dealing with code and everything that comes with. Including the most technical part like languages or versionning. So on this page you might find some links that are not direclty relatable to creative things but that you might need one day or another.
It is split into different parts that are sorted alphabetically, into each parts the links are also sorted alphabetically.
The list is updated every months. There is no need to suggest me things to add.