Wat is Creative Coding?

[English](../README.md) | [Français](./translations/README_FR.md) | [日本語](./translations/README_JA.md) | [Polski](./translations/README_PL.md) | [Nederlands](./translations/README_NL.md) > Een startpunt voor jouw creative coding ontdekkingsreis # Wat is Creative Coding? Creative Coding is een term die wordt gebruikt om een breed palet van artistieke praktijken te beschrijven die computercode als medium gebruiken. Creatief coden onderscheidt zich typisch van normaal coden door het feit dat het geen voorgedefinieerde specificaties volgt om problemen op te lossen voor een gebruiker, maar eerder gericht is op het uitdrukken van ideeën en concepten. # Waar komt het vandaan? Er is een rijke geschiedenis van kunstenaarts die computers als hun ... gebruiken, There is a rich history of artists using computers as a tool, going back all the way to the early 1960s. People like [Vera Molnar](https://vimeo.com/372579247), [Frieder Nake](http://dada.compart-bremen.de/item/agent/68), [Lillian Schwartz](https://vimeo.com/98960229), and [Manfred Mohr](http://www.emohr.com/), some of them still active today. They used computer code to generate complex visuals, drawings, animations, or music. To learn more about the history of computer art you can read [*When the Machine Made Art*](https://www.bloomsbury.com/us/when-the-machine-made-art-9781623562724/) by Grant D. Taylor. # Waarom dit document? Getting started in any new field can feel overwhelming. This page is the opposite of the "awesome" curated lists that are popular on Github. Rather than an exhaustive compilation of every resource on the internet, it is deliberately incomplete. For each of the categories below, we hand picked one tool, one artist, one book, and one website to get your started on your journey. Let's get going!   **Table of Contents** - [I want to make music!](#i-want-to-make-music) - [I want to use my existing coding skills to make art](#i-want-to-use-my-existing-coding-skills-to-make-art) - [I want to make visuals](#i-want-to-make-visuals) - [I'm dancer / choreographer and want to make a show with videos!](#im-dancer--choreographer-and-want-to-make-a-show-with-videos) - [I want to make games!](#i-want-to-make-games) - [No! I want to make even stranger games!](#no-i-want-to-make-even-stranger-games) - [I want to make art on the internet](#i-want-to-make-art-on-the-internet) - [I'm a student](#im-a-student) - [I'm a parent / kid](#im-a-parent--kid) - [I'm an architect](#im-an-architect) - [I'm an artist](#im-an-artist) - [I'm a poet](#im-a-poet) - [I'm a designer](#im-a-designer) - [I want a drawing robot](#i-want-a-drawing-robot) - [I want to build a robot!](#i-want-to-build-a-robot) - [Now I know how to draw lines and circles, what's next?](#now-i-know-how-to-draw-lines-and-circles-whats-next) - [Thanks!](#thanks)   ## I want to make music! #### One tool: [TidalCycles](https://tidalcycles.org/) > TidalCycles is a programming environment to generate sound with code, but just like playing a DJ set. The code is very simple - `sound "bd"` will play the bass drum as a loop, and `sound "hh" # cutoff 1000` plays the hi-hat with cutoff (low-pass) filter at 1000 Hz. You can ask questions on the [Discord server](https://discord.gg/xCbbhBf7YU).  #### One artist: [Malitzin Cortes](http://malitzincortes.net/) > Malitzin Cortes a.k.a. CNDSD's work involves live coding, live cinema, installation, Virtual Reality, generative art, sound design, experimental music and sound art. Read Malitzin's [interview on the TidalCycles blog](https://blog.tidalcycles.org/cndsd/). #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [TidalCycles Tutorial](https://tidalcycles.org/index.php/Tutorial) > This guide will help you get started with simple patterns and walk you through all the way to complex compositions. ## I want to use my existing coding skills to make art #### One tool: [Processing](https://processing.org/) > Processing is a great tool to start making visuals; if you are already familiar with Java or C-like programming language, the [bundled examples](https://processing.org/examples/) will give you a good idea where to start. There is also a Python version. You will find that other tools such as openFrameworks and OPENRNDR have similar philosophy. #### One artist: [Anna Carreras](https://www.annacarreras.com/) > Anna Carreras (Barcelona, 1979) is a creative coder and digital artist interested in experimentation on interactive communication focusing her work on the use of generative algorithms, creative code and interactive technology as a means of communication and an experience generator. #### One book: [Code as Creative Medium](https://mitpress.mit.edu/books/code-creative-medium) > This book is an essential resource for arts educators and practitioners who want to explore code as a creative medium, and serves as a guide for computer scientists transitioning from STEM to STEAM in their syllabi or practice. #### One website: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* ## I want to make visuals #### One tool: [Hydra](https://hydra.ojack.xyz/) > Hydra is a programming environment to rapidly create visuals in the browser using only a small amount of code. `osc().out()` generates a sine wave pattern, and `osc().color(1,0,0).out()` changes the color to red. You can ask questions on [Hydra's Discord server](https://discord.gg/b44SDAyJmf) and see some examples of [visuals created in Hydra](https://twitter.com/hydra_patterns). #### One artist: [Flor de Fuego](https://twitter.com/flordefuego4) > [Flor de Fuego](https://twitter.com/flordefuego4) investigates digital image and media, producing images and sounds related to live coding, animation, video and the Internet." #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [Hydra examples](https://ccfest-2021-glitchme.glitch.me/) > A short collection of Hydra sketches built for a workshop at the CC Fest 2021 Creative Coding Festival. You can edit the examples in your browser to teach yourself the basics. If you are interested in further reading, please check out the online [Hydra Book](https://hydra-book.naotohieda.com/)! ## I'm dancer / choreographer and want to make a show with videos! #### One tool: [Isadora](https://troikatronix.com/) > Isadora is used by a lot of dancers and choreographers for media performances - generating geometric patterns, mixing with video feed and using cameras for interactivity. You don't need to code - you can create visuals and logic simply by connecting boxes.But at the end of the day, anything on a computer can be used as material. What about [dancing with a hacked webpage](https://vimeo.com/175534187)? #### One artist: [Joana Chicau](https://joanachicau.com/) > Joana Chicau is a graphic designer, researcher and coder, with a background in choreography and performance. Her methodology explores how design and coding practices interfere deeper with interface design and information displays — when considering choreographic thinking, embodiment and new movement perception possibilities. #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [Motion Bank](http://motionbank.org/) > Motion Bank is a spin-off of the Forsythes Company focused on novel ways to record choreography via the digital medium. On the website, there is an archive of past projects including a research project with [Deborah Hay](http://scores.motionbank.org/dh/#/set/sets). ## I want to make games! #### One tool: [Bitsy](https://ledoux.itch.io/bitsy) > Bitsy is a little editor for little games or worlds. The goal is to make it easy to make games where you can walk around and talk to people and be somewhere. Here's a list of [games made with Bitsy](https://itch.io/games/made-with-bitsy).  #### One artist: [Pippin Barr](https://www.pippinbarr.com/category/games/) > Pippin Barr makes games. #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* ## No! I want to make even stranger games! #### One tool: [Wekinator](http://www.wekinator.org/) > The Wekinator is free, open source software originally created in 2009 by Rebecca Fiebrink. It allows anyone to use machine learning to build new musical instruments, gestural game controllers, computer vision or computer listening systems, and more. #### One artist: [Marie Claire LeBlanc Flanagan](https://marieflanagan.com/) > "I design and build things for people. I build play experiences, installations, experimental video games, stories, communities, spaces, and events." #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [Babycastles](https://twitter.com/Babycastles/) > "Babycastles is a non-profit fostering and amplifying diverse voices in videogame culture." Join their [Discord server](https://discordapp.com/invite/sEPRX5Z) or follow them on [Twitch](https://www.twitch.tv/babycastles)! ## I want to make art on the internet #### One tool: [Glitch](https://glitch.com) > Glitch is a great platform to rapidly create a small web project. You need to know how to write HTML, CSS and JavaScript (front end and [node.js](https://nodejs.org)). #### One artist: [Max Bittker](https://maxbittker.com/projects/) > Max Bittker is an "Artist building tools for play, creativity, & communication." One recent example of his work, [orb.farm](https://orb.farm/) is a virtual aquarium and ecosystem simulation. #### One book: [I Was Raised on the Internet](https://prestelpublishing.randomhouse.de/paperback/I-was-raised-on-the-Internet/Omar-Kholeif/Prestel-com/e546180.rhd) > "Coinciding with a major exhibition at the Museum of Contemporary Art Chicago, this anthology of essays and reflections casts a discursive and critical light on the work of artists engaging with the internet and digital technologies today." #### One website: [Rhizome](https://rhizome.org/art/artbase/) > "The Rhizome ArtBase was founded in 1999 to preserve works of net art that were deemed to be "of potential historical significance." Encompassing a vast range of projects from artists all over the world, the ArtBase provides a home for works that employ materials such as software, code, websites, moving images, games, and browsers." See also: [One Terabyte of Kilobyte age](https://anthology.rhizome.org/one-terabyte-of-kilobyte-age) ## I'm a student #### One tool: [p5.js](https://p5js.org/) > p5.js is a tool for drawing shapes and painting colors in the browser. You can start coding right now in the [web editor](https://editor.p5js.org/) and find [tutorials on the p5.js website](https://p5js.org/learn/). #### One artist: [Aren Davey](https://twitter.com/aah_dee_) > Aren runs [Cozy Coding](https://www.twitch.tv/cozycoding), "a series of cozy weekly Twitch streams that hosts interactive p5.js tutorials and lessons to its viewers." #### One book: [Learning Processing](http://learningprocessing.com/) > "This book tells a story. It’s a story of liberation, of taking the first steps towards understanding the foundations of computing, writing your own code, and creating your own media without the bonds of existing software tools. This story is not reserved for computer scientists and engineers. This story is for you." > > *Note: the book is based on Processing but you can find [p5.js versions of all the examples](https://github.com/shiffman/LearningProcessing-p5.js) on Github.* #### One website: [The Coding Train](https://thecodingtrain.com/) > The Coding Train is "a YouTube channel dedicated to beginner-friendly creative coding tutorials and challenges." It was created by Daniel Schiffman. You can ask questions on the [Coding Train Discord server](https://discord.gg/bzJQUyxPY5)! ## I'm a parent / kid #### One tool: [Scratch](https://scratch.mit.edu/) > With Scratch, you can program your own interactive stories, games, and animations and share your creations with others in the online community. Scratch is designed especially for ages 8 to 16, but is used by people of all ages. #### One artist: [Stefania Druga](https://stefania11.github.io/projects/) > Stefania Druga's work focuses on AI Literacy and the design of new computing platforms for children and parents. She is the creator of Hackidemia, a global organization that enables people to learn by doing and playing. #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* ## I'm an architect #### One tool: [Sverchok]((http://nikitron.cc.ua/sverchok_en.html)) for [Blender](https://www.blender.org/) > Sverchok is a free addon for the Open Source 3D software Blender. In Sverchok, 3D shapes are created by dragging components (called "nodes") onto a canvas. You connect these nodes to build generative algorithms that produce more and more intricate 3D shapes. Here are a [Sverchok tutorial](https://www.youtube.com/watch?v=t56vQIaH7DI) and [Blender tutorial](https://www.youtube.com/watch?v=il_KNYaUfnY) to get you started. *Note: Blender is best used with a 3 button mouse and a full-size keyboard (with a numpad).* #### One artist: [Satoru Sugihara](http://atlv.org/) > Satoru Sugihara explores the frontier of computational design technology through design practice and research in contemporary architecture and spatial design. #### One book: [Morphing](https://www.laurencekingverlag.de/produkt/morphing/) > *Morphing, A Guide to Mathematical Transformations for Architects and Designers* is a beautifully designed book, full of examples of using simple mathematical formulas to generate intricate shapes and geometry. #### One website: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* ## I'm an artist #### One Tool: [TouchDesigner](https://derivative.ca/) > "TouchDesigner is a visual development platform that equips you with the tools you need to create stunning realtime projects and rich user experiences. Whether you're creating interactive media systems, architectural projections, live music visuals, or simply rapid-prototyping your latest creative impulse, TouchDesigner is the platform that can do it all." #### One artist: [Rosa Menkman](https://beyondresolution.info/) > "My work focuses on noise artifacts that result from accidents in both analogue and digital media (such as glitch and encoding and feedback artifacts). I think the resulting artifacts of these accidents can facilitate an important insight into the otherwise obscure alchemy of standardization via resolutions." #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [Creative Applications](https://www.creativeapplications.net/) > Creative Applications shares projects, tools and platforms relevant to the intersection of art, media and technology. It's a good place to be inspired and stay up to date with the media art scene. ## I'm a poet #### One tool: [Thonny a Python IDE for beginners](http://thonny.org) #### One artist: [Allison Parrish](https://www.decontextualize.com) > Allison Parrish is an American poet, software engineer, creative coder, and game designer, notable as one of the most prominent early makers of creative, literary Twitter bots. She was named "Best Maker of Poetry Bots" by The Village Voice in 2016. #### One book: [Exploratory Programming for the Arts and Humanities](https://mitpress.mit.edu/books/exploratory-programming-arts-and-humanities) > A book for anyone who wants to learn programming to explore and create, with exercises and projects to help the reader learn by doing. #### One website: [Code Poetry](http://code-poetry.com/) > “This website displays a collection of twelve code poems, each written in the source code of a different programming language. Every poem is also a valid program which produces a visual representation of itself when compiled and run.” ## I'm a designer #### One tool: [p5.js](https://p5js.org/) > "p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!" #### One artist: [Raven Kwok](https://ravenkwok.com/) > Raven Kwok (aka Guo, Ruiwen) is a visual artist and creative technologist. His artistic and research interest mainly focus on exploring generative visual aesthetic brought by computer algorithms and software processes. Watch [his talk at MuDA](https://www.youtube.com/watch?v=MJULayyg4sU) for more background on his work. #### One book: [Generative Design](http://www.generative-gestaltung.de/2/) > This book is a jump-start on coding strategies, with step-by-step tutorials for creating visual experiments that explore the possibilities of color, form, typography, and images. [Code examples](http://www.generative-gestaltung.de/2/) which can be viewed and edited in your browser are available for free on the book's website. #### One website:  *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* ## I want a drawing robot #### One Tool: [AxiDraw](https://axidraw.com/) > The AxiDraw is a plotter. You attach a pen or pencil to it, give it a line drawing (as a vector file), and it will produce a perfectly accurate copy on paper. A pen plotter can reproduce the aspect of a hand-made drawing, use various tools such as paint markers, and draw on print media that you could not fit into a traditional printer for use cases such as marking out parts directly onto metal sheets. #### One artist: [Sougwen Chung](https://sougwen.com/) > "Chung's work explores the mark-made-by-hand and the mark-made-by-machine as an approach to understanding the dynamics of humans and systems." #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [DrawingBots.net](https://drawingbots.net/) > "The mission of DrawingBots.net is to become the central place on the web to discover the world of drawing robots, get inspiration and talk to other drawing robot enthusiasts." ## I want to build a robot! #### One tool: [Arduino](https://www.arduino.cc/) > Making a robot that walks by itself is a huge research project! But you can start with a simple example. What about connecting a motor and a light sensor to an [Arduino](https://www.arduino.cc/) and move it when you cover the sensor? Arduino is a small electronics board that can sense the environment and affects its surroundings by controlling lights, motors, and other actuators. #### One artist: [So Kanno](http://kanno.so/) > So Kanno is an artist who's work is full of custom built robots, from laser mice to chaotic drawing machines. "He considers the essential change of things brought about by the evolution and change of technology, and creates works to bring a new perspective upon them."" #### One Book: [Arduino Workshop](https://nostarch.com/arduino) > *Arduino Workshop: A Hands-On Introduction with 65 Projects* is a beginner's guide to the world of Arduino. It starts with an overview of the system, electronics components, and concepts; then dives into practical uses such as a digital thermometer and a GPS logger, as well as various Arduino-based electronic toys and games. #### One website: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)*  ## Now I know how to draw lines and circles, what's next? #### One tool: Twitter/Instagram > Posting your work on Twitter/Instagram is a great way to get feedback. Feel free to tag [@CreativeCodeBLN](https://twitter.com/CreativeCodeBLN/) so we can share your work with the community! #### One artist: [Saskia Freeke](https://twitter.com/sasj_nl) > Saskia Freeke has been posting a daily artwork made in Processing every day since January 1st 2015. #### One book: *[suggest one](https://github.com/CreativeCodeBerlin/creative-coding-minilist/issues)* #### One website: [OpenProcessing](https://www.openprocessing.org/) > OpenProcessing is an online platform for Processing and p5.js creators. You can use their online editor to create sketches and share them with the community. # Thanks! This list is created and maintained by [Raphaël de Courville](https://twitter.com/sableRaph) and [Naoto Hieda](https://twitter.com/naoto_hieda) for [Creative Code Berlin](http://creativecode.berlin/) as resource for people coming to our bi-monthly meetups. We hope it can be helpful to others as well :) If you are looking for a more comprehensive list, check out this [curated list of awesome creative coding resources](https://github.com/terkelg/awesome-creative-coding). This document is licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.