Generative Art for Beginners: Creative Coding with p5. js
Iasya Bazelevskaia
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Why You Should Take This Class
2:05
-
2.
Getting Started with p5.js
4:57
-
3.
Drawing Basics
3:44
-
4.
Randomness & Pattern Generation
4:20
-
5.
Interactivity
7:59
-
6.
Organic Patterns with Perlin Noise
4:37
-
7.
Layers & Transparency
5:07
-
8.
Exporting and Sharing
3:07
-
9.
Conclusion
1:40
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
1
Estudiante
--
Proyectos
Acerca de esta clase
Discover the fascinating world of generative art through creative coding with p5.js! Whether you're an artist curious about coding or a programmer interested in creating art, this class will guide you through the fundamentals of creating stunning algorithmic artworks in your browser - no installation required.
In this class, I'll walk you through the basics of p5.js, a beginner-friendly JavaScript library perfect for creative coding. We'll start with simple shapes and colors, then gradually build up to creating complex, interactive patterns and organic designs using concepts like randomness and Perlin noise.
What you'll learn:
- Getting started with the p5.js web editor
- Drawing basics: shapes, colors, and composition
- Creating dynamic patterns using loops and randomness
- Adding interactivity to your artwork
- Generating organic patterns with Perlin noise
- Working with layers and transparency
- Exporting and sharing your creations
By the end of this class, you'll have created your own unique generative artwork and gained the skills to continue exploring creative coding. All students are encouraged to share their projects in our class gallery, where we can learn and draw inspiration from each other's work.
Join me on this creative journey where code meets art!
Proyecto de clase práctica
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!
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
