Curious about code?
Playing with code is the easiest way to learn coding without it ever feeling like 'coding'.
Most ways to learn to code start with rules and syntax before you get to make anything. Here, you start with a finished design — shapes, animation, generative art — and learn by changing the code and watching what happens.
The more designs you play with, the more familiar the terms and patterns become, until they start to feel like second nature.
Built for artists, designers, coders and hobbyists who want to learn to code by creating.
Learn to code by playing
with designs
Creative experimentation
Design based approach
Learn by doing
Over time terms become familiar
No rush to learn all the terms straight way
How It Works
1
Look for the
arrow and //try lines
in the code
2
Change the code
3
Press Run
4
See your design
Give it a try!
Explore the design gallery
Explore more ....
Design by Code on YouTube
Design by Code on Etsy
Join the newsletter
Creating designs with code
Receive the latest designs and exclusive resources direct to your inbox.
We respect your privacy. Unsubscribe at any time.
Frequently Asked Questions
What is creative coding and generative art?
Creative coding is using code to make something expressive which can include art, animation, or sound, instead of using code to build an app or website.
Generative art is art made by code that follows a set of rules, often with some randomness built in, so the code decides a lot of the final look.
What is p5.js?
p5.js is a tool built for creative coding provided by the p5js community. It’s an intuitive tool used to draw designs on screen using code. It’s also designed to be beginner friendly for learning code. The programming language used is JavaScript.
The editor on this website uses an adapted version of the p5.js editor. If you would like to see the full version then please check that out on the p5js.org website.
Why experiment with code?
When you were young, did you ever get hold of an item which is made up of parts such as a bike, TV, or computer (random examples 😂) and take it apart to see how each part of it worked towards the whole?
That's what we are aiming to do with these designs. By taking a design, and then adding, changing, or deleting code, you can see the impact of the changes and start to understand how the design was put together.
Help! The design has disappeared!
If you make changes to the code and the design disappears, then there is likely an error in the code.
The first thing to look for is typos. All the brackets, commas, and semi-colons are required and it’s very easy to accidentally delete one.
If that doesn’t work, then check that the logic of the change makes sense.
For example:
- if you have a grey background and draw a grey square of the exact same colour, you won’t see the square against the background.
- if a larger item is drawn after a smaller item, then the larger item may be covering the smaller item.
The Reset button can be used to revert the code to the original.
Your code's not clean!
No, it's not always clean. The examples are written to be clear and easy to change, rather than follow every coding best practice (clean code), so you can play with the code and see what happens when a change is made. That's what helps the learning stick.