How to Create Generative Art with p5.js
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, and educators. p5.js is free and open-source and beginner friendly!
Creating generative art using p5.js is an exciting and accessible way to combine programming and art. p5.js is a JavaScript library that makes it easy to create graphics and interactive visualizations.
Note that p5.js is an interpretation of Processing — they hold events and operate with support from the Processing Foundation. Jump to this article for how to create generative art using Processing.
Here is a step-by-step guide to creating generative art with p5.js.
Generative artwork from c2.js; a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules.
Step 1: Set Up Your Environment
Install a Code Editor: You can use any code editor of your choice, but many find Visual Studio Code or the p5.js Web Editor convenient.
Connect p5.js: If you're using the p5.js Web Editor, the library is already integrated. If you're using your own code editor, you'll need to link to the p5.js library in your HTML file. You can download the library from the p5.js website or use a Content Delivery Network (CDN) link.
Step 2: Understand Basic Concepts
Canvas: Start by creating a canvas using the createCanvas() function. This is where your generative art will be displayed.
Shapes and Colors: Learn how to draw basic shapes (rectangles, ellipses, etc.) using functions like rect(), ellipse(), and set their colors with fill() and stroke().
Step 3: Experiment with Simple Patterns
Lines and Shapes: Begin by drawing simple geometric shapes and lines on the canvas. Experiment with their positions, sizes, and colors.
Step 4: Embrace Randomness
Random Numbers: Utilize the random() function to introduce randomness into your art. Generate random coordinates, sizes, colors, and angles to create variation.
Step 5: Explore Loops and Iteration
Loops: Use loops, like for and while, to repeat patterns or create complex structures efficiently.
Generative artwork from c2.js; a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules.
Step 6: Learn Animation
Frames and Time: Understand how animations work in p5.js. Use the frameRate() function to control the speed of your animation. Learn to use the draw() function, which is called repeatedly to create animation frames.
Step 7: Incorporate Interactivity
Mouse and Keyboard Interaction: Learn how to respond to mouse clicks, movement, and keyboard input. Use functions like mouseX, mouseY, and keyIsPressed to create interactive elements.
Step 8: Experiment with Advanced Techniques
Perlin Noise: Delve into using Perlin noise with the noise() function to create organic and natural-looking patterns.
Particles and Systems: Create particle systems with varying properties like position, velocity, and lifespan. Experiment with attracting or repelling forces.
Step 9: Document and Share
Comments and Documentation: Comment your code to explain its purpose and how it works. This helps you understand it later and makes it easier for others to learn from.
Sharing Your Art: Once you're satisfied with your generative art piece, you can share it on platforms like the p5.js community forum, social media, or your personal website. Submit your art to Digital Arts Blog for a chance to be featured!
Step 10: Keep Learning and Exploring
Tutorials and Examples: Explore the p5.js website for tutorials, examples, and documentation. They cover a wide range of topics and can help you expand your skills.
Creative Experimentation: Generative art is all about experimenting and pushing boundaries. Don't hesitate to try new techniques, combine ideas, and develop your unique style.
Generative artwork from c2.js; a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules.
Resources:
Make sure you join the p5.js Discord channel to connect with fellow creative coders
Check out p5.js Community Libraries for reference and inspiration
Remember, generative art is about creativity and experimentation. Don't be afraid to push the boundaries of your knowledge and explore new possibilities in your p5.js code!
Read next:
An Introduction to Generative Art
10 Digital Artists: The Reign of Generative Art
How to create generative art with Processing
How to create generative art with openFrameworks
Generative artwork from c2.js; a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules.
We share works by digital artists as well as digital arts exhibitions, events, and open calls daily on our Instagram — follow us for more and subscribe to our newsletter so you don’t miss new blog posts.
