Generative Art for Beginners: Creative Coding with p5. js

Praxisnahes Kursprojekt

Create and share your own unique piece of generative art using p5.js!

Throughout this class, you’ll be building your project step by step as you follow along with each lesson. By the end, you’ll have a finished generative artwork that you can proudly share in the Project Gallery.

Project Steps:

1. Set up your p5.js sketch

Open the p5.js web editor and get comfortable with the interface.

2. Experiment with shapes and colors

Use basic drawing functions to create an abstract composition. Try different shapes, colors, and arrangements.

3. Add randomness and patterns

Introduce randomness and loops to generate interesting, dynamic patterns in your artwork.

4. Make it interactive

Add interactive elements—let your art respond to mouse movements or keyboard input.

5. Explore organic patterns

Use Perlin noise to create smooth, natural-looking effects like waves or landscapes.

6. Play with layers and transparency

Add depth and atmosphere by layering shapes and adjusting their transparency.

7. Export and share your artwork

Save your final piece as an image and upload it to the Project Gallery. Feel free to include a short description of your process or what inspired your design!

Final Deliverable:

Upload a screenshot or exported image of your generative artwork, along with a brief note about your creative process or what you learned. If you’d like, you can also share a link to your p5.js sketch so others can see your code and try it out!

Tips:

• Don’t be afraid to experiment! There’s no right or wrong way to create generative art.
• Check out the example project in the Resources section for inspiration.
• Leave feedback on your classmates’ projects and get inspired by their creations!
• I can’t wait to see what you make!