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 — *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.

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.

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!