Creative coding blends programming with artistic expression. It allows you to generate visuals, animations, and interactive experiences. Benefits include developing problem-solving skills and fostering creativity. Begin by exploring free online tutorials for p5.js or Processing. Experiment with code examples and join online communities to learn and share your work.
Already an expert?
Creative Coding
as a hobby
AKA: Algorithmic Art • Code Art • Coding Art • Creative Computing • Generative Art • Processing Art
|
Helpful content to get started
We curated content to familiarize you with creative coding as a hobby and to inspire and help you get started.
We strive for accuracy, but errors may occur. Always use your judgment.
Refer to the listed resources for further research.
Short visual inspiration.
More videos
Play an episode while exploring the page.
More podcasts
Creative coding is used in diverse fields: Beyond art, it’s employed in data visualization, interactive installations, live performances, and even scientific simulations.
Basic lingo for orientation.
General Terms
- Creative Coding: A type of computer programming focused on creating expressive rather than functional outputs.
- Generative Art: Art created using algorithms and code, often resulting in unique, dynamic pieces.
- Interaction Design: The process of designing interactive digital products, focusing on user experience.
- Creative Computing: An interdisciplinary area combining computing with creative arts.
- Computer Art: Art created using computers, often involving creative coding techniques.
Programming Concepts
- Variables: Containers that hold data values, which can change during program execution.
- Functions: Blocks of code that perform specific tasks and can be reused.
- Conditional Statements: Instructions that execute different actions based on conditions (e.g., if/else statements).
- Loops: Code structures that repeat a set of instructions until a condition is met.
Dedicated Tools and Platforms
- Processing: A beginner-friendly programming environment for visual arts and design.
- OpenProcessing: An online platform that serves as a community and creative space for people interested in creative coding.
- p5.js: A JavaScript library for creative coding, ideal for web-based projects.
- openFrameworks: A C++ toolkit for creative coding, often used for complex installations.
- Code Editor/IDE: Essential tools for writing and executing code, similar to how a word processor is used for writing documents. They provide features like syntax highlighting, debugging tools, and project management, making them indispensable for creative coding projects.
Programming Languages
- Programming Language: A formal language comprising a set of instructions that produce various kinds of output. Programming languages are used in computer programming to implement algorithms.
- CSS (Cascading Style Sheets): A style sheet language used for describing the presentation of a document written in a markup language like HTML.
- Processing: A programming language and environment designed for visual arts and creative coding.
- JavaScript: A versatile language used extensively in web development, and essential for p5.js and other web-based creative coding.
- Python: A general-purpose language with libraries like Pygame and Turtle that can be used for creative coding projects.
- C++: A powerful language often used for more advanced graphics and simulations in creative coding.
- GLSL (OpenGL Shading Language): Used for creating shaders, which are programs that run on graphics cards to create visual effects.
Visual and Artistic Terms
- Sprites: Small, 2D graphics that can be manipulated in code.
- Pixels: The smallest units of a digital image, often manipulated in creative coding projects.
- Generative Patterns: Patterns created using algorithms, often resulting in unique visual effects.
Mathematical Concepts
- Vectors: Mathematical objects used to represent direction and magnitude, often used in graphics and animations.
- Trigonometry: Mathematical functions like sine and cosine, frequently used in animations and visual effects.
Term Videos
How to break the ice and make a start.
- Watch creative coding introductory videos.
- Explore creative coding examples.
- Play with the examples—many are interactive, allowing you to change the code and experiment.
- Start a course or follow tutorials—many of which are free.
First Steps Videos
Creative coding connects art and technology: It bridges the gap between artistic expression and technical innovation, creating new forms of digital art.
Get read-y.
More: Books / Processing.org
Step-by-step tutorials.
- Tutorials / Processing.org
- Processing Hour of Code
- Processing Tutorials – Happy Coding
- p5.js Tutorials – Happy Coding
- Fun Programming – creative coding video tutorials
- Learn – OpenProcessing
- Tutorials | p5.js
- learning | openFrameworks
- Tutorials | Learn how to create generative art
- LEARN – ZIM JavaScript Canvas Framework – Code Creativity with ZIMjs!
How-To Videos
More how-to videos
Creative coding can lead to transformative learning experiences, known as “Threshold Concepts,” which open new perspectives and ways of thinking.
Essentials to have.
Product Demos
More product demos
Further reading.
Video Articles
More video articles
The process of creative coding encourages experimentation and rapid iteration, allowing artists to explore new aesthetic realms.
Go-tos for information.
Learning Resources
Creative Coding Platforms and Frameworks
- p5.js – Friendly Tool for Learning to Code and Make Art
- Welcome to Processing! / Processing.org
- openFrameworks | Open Source Creative Coding Toolkit
- ZIM JavaScript Canvas Framework – Code Creativity with ZIMjs!
Community and Inspiration
- OpenProcessing – Creative Coding for the Curious Mind
- thedotisblack
- Welcome • tim rodenbröker creative coding
- Generative Hut, home of generative art and pen plotters
Online Code Editors
- My Sketch – OpenProcessing
- p5.js Web Editor
- CodePen: Online Code Editor and Front End Web Developer Community
Creative Coding Examples
Website Previews
More website previews
Nothing like a good film or a show for inspiration.
Movie and TV Trailers
More movie trailers
Creative coding often uses open-source tools: Languages like Processing and libraries like p5.js are freely available, making the hobby accessible to anyone.
Get a clue.
Is creative coding a hobby?
Yes, definitely! Creative coding is a fantastic hobby that combines the logic of programming with the freedom of artistic expression. It’s a great way to explore your creativity, learn new skills, and create unique digital art and interactive experiences.
What is creative coding?
Creative coding is a type of computer programming where the goal is to create something expressive, artistic, or simply fun, rather than focusing solely on functionality. It can involve generating visuals, animations, interactive experiences, or even sound and music.
What are the benefits of creative coding?
Creative coding offers numerous benefits, including:
- Creative expression: It provides a unique way to express yourself through code and technology.
- Skill development: You’ll learn programming concepts, problem-solving skills, and computational thinking.
- Stress relief: The focus and flow state achieved while coding can be relaxing and meditative.
- Community: You can join a vibrant online community of creative coders, sharing your work and learning from others.
Do I need to be good at math or programming to start?
Not necessarily! There are many resources available for beginners with little to no coding experience. Start with a beginner-friendly language like p5.js or Processing and gradually build your skills.
Do I need to be good at art to do creative coding?
No, you don’t need to be a skilled artist. Creative coding is about using code to create art, so your artistic skills will develop as you practice.
What kind of projects can I create with creative coding?
The possibilities are endless! You can create generative art, interactive animations, data visualizations, simple games, and much more. Start with small projects and gradually increase the complexity as you learn.
What tools or software do I need for creative coding?
Popular tools include Processing, p5.js, and openFrameworks. These platforms are accessible and offer extensive resources for beginners. Many tools and websites enable you to start and experiment online, without buying or installing any software.
Is creative coding expensive?
Most creative coding tools are free or low-cost. Platforms like Processing and p5.js are open-source, making them accessible without significant financial investment.
Do I need a high-performance computer to begin creative coding?
For most beginner creative coding projects, a standard modern computer will be sufficient. Basic generative art, p5.js sketches, and Processing projects don’t require high-end graphics cards or processors. As you progress to more complex 3D simulations or video processing, a more powerful computer might be beneficial, but it’s not a necessity for getting started.
Where can I showcase my creative coding projects?
Creative coding projects can be showcased in a variety of online and physical spaces. Online platforms like OpenProcessing and CodePen offer communities for sharing and displaying your work. Digital art galleries and online exhibitions often feature code-based art. Additionally, interactive installations and live performances can present your work in physical spaces. Some creative coders also share their work through personal websites, social media, and open-source repositories.
Where can I find resources and tutorials?
There are many online resources available, including websites, YouTube tutorials, and online communities. Some great places to start are the Processing Foundation website, the p5.js website, and The Coding Train website.
What programming languages and technologies are commonly used in creative coding?
Creative coding utilizes a variety of programming languages and related technologies, each with its strengths. Some popular choices for beginners include:
- p5.js: A JavaScript library that’s excellent for web-based creative coding and visual projects. It’s beginner-friendly and has a large online community.
- JavaScript: The foundation of web development, JavaScript is essential for p5.js and other web-based creative coding projects.
- CSS (Cascading Style Sheets): While not a programming language in the traditional sense, CSS is crucial for styling and designing the visual presentation of web-based creative coding projects. It’s used to control layout, colors, animations, and more.
- Processing: A language and environment designed specifically for visual arts and creative coding. It’s easy to learn and has a rich set of libraries.
- Python: A versatile language with libraries like Pygame and Turtle that can be used for creative coding, especially for beginners.
- C++: Used for more advanced graphics and simulations, C++ is a powerful option for those seeking greater control and performance.
- GLSL (OpenGL Shading Language): This is used for creating shaders, programs that run on your graphics card to create visual effects, and is common in more advanced creative coding.
FAQ Videos
More FAQ videos
Smart start.
App Trailers
More app trailers
Generative art, a key aspect of creative coding, can produce infinite variations: Algorithms and randomness allow for unique outputs each time they run, demonstrating the potential for endless creativity.
Get smart.
Free Courses
- Getting Started Guide / The Coding Train
- ZIM Skool – JavaScript Lessons for School Curriculum
- Learn p5.js | Codecademy
- For more free courses, explore the videos below.
Paid Courses
- Online Course – Creative Coding: Making Visuals with JavaScript (Bruno Imbrizi) | Domestika
- Online Course – Intro to Creative Coding: Create Graphic Objects (Julien Gachadoat) | Domestika
- Online Course – Creative Coding: Immersive Art with openFrameworks (Paul Ferragut) | Domestika
- Online Course – Creative Coding 2.0 in JS: Animation, Sound, & Color (Bruno Imbrizi) | Domestika
- Code Art: Learn Creative Coding to Generate Visuals with JS | Udemy
- Courses • tim rodenbröker creative coding
Video courses and trailers
More video courses and trailers
Get together.
Related Videos
Creative coding can be an environmentally friendly alternative to traditional art forms. By using digital tools, artists reduce the need for physical materials, minimizing waste and environmental impact. This approach aligns with sustainable practices, making creative coding a forward-thinking medium for artistic expression.
Additional advice for beginners.
Video Tips
he practice of using programming for artistic purposes dates back to the 1960s, with groups like Compos 68 exploring programming for art exhibitions.
We rely on your feedback.
Want to discuss something?